Whether you’re creating a logo, designing a website, or defining a brand identity, color plays a vital role in any design project.
We designers take color seriously, and use a variety of tools to help us make the most of it. We’ve reached out to dozens of designers (including those in our office) to find out what color tools and apps they use. Take a look!
Color pickers are among the most common tools used by designers because they let us quickly grab and reuse colors we see on our screens.
1. ColorSnapper 2
Out of the many options out there, ColorSnapper proves the most popular color picker among our designers, and for good reason. This popular Mac app lets you quickly use a magnifying color picker on anything you see — online or off.
Once you’ve picked a color, ColorSnapper stores it in the color panel for you to use later. Need to copy the color right now? Just click on the stored color and ColorSnapper will automatically copy it your clipboard.
2. Webflow Chrome Extension
Of course, we'd be remiss if we didn't mention our very own Webflow Chrome Extension, which activates an in-Webflow color picker to enable you to easily grab colors from within your own project. That makes it super simple to pull the right color from a logo, hero photo, or illustration, without having to leave the app. And once you've grabbed the color, you can easily make it a global swatch to quickly and easily reuse across your site.
Palette generators give you a great way to see your entire color palette together. This helps you decide what your primary and secondary colors might be, as well as how they fit together.
Actually selecting the colors can be tough — luckily, there are tools that help us do it!
Color is an incredibly intuitive (and fun to use) color swatch generator you use right in your browser — go ahead, give it a try! With just a few clicks, you can already see how your colors will work together, and which ones might be better left out.
Coolors is another popular palette generator. Though (slightly) less intuitive than Color, Coolors lets you export, store, and reuse your palette in tools like Adobe. Coolors also has a mobile app, so you can review and modify your colors from anywhere.
LOLColors is a simple collection of curated color palettes. The site makes it very easy to 'favorite' a specific palette, and view the most popular based on others' votes as well. Although it doesn't offer as much volume as others on this list, I found the palettes themselves to be beautifully put together.
Thanks to advancements in CSS, designers can now take full advantage of colorful gradients on the web without worrying about creating heavy images or writing complex code. The only problem now is trying to narrow down your selection!
Luke Davies put together a great solution with Gradients.io, a simple site (made in Webflow) that showcases some beautiful gradient color combinations. He kindly included the hex values so you can recreate them in your own designs as well.
7. Adobe Capture CC
What better way to get color inspiration than from the world around us? Adobe’s Color ecosystem has a number of resources (including a swatch generator), but the one I find myself using the most is their iOS app, Adobe Capture CC.
Simply take a photo with the app, and it automatically generates a palette from the colors in the photo. You can then save these colors to use anywhere.
Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.
Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.
BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.
Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.
Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.
As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.
Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.
Did we miss any standouts? Let us know in the comments!