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, because it is serious. The colors you choose will not only impact how your site makes people feel, but also what users with various types of color blindness can see. So choose wisely.
There are a variety of tools out there to help us with the important task of color selection. We reached out to dozens of designers (including those in our Webflow 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. ColorPick Eyedropper Chrome extension
Great for any designer, the ColorPick Eyedropper is a chrome extension that easily allows you to identify the Hex color code of any UI element you hover your mouse over. It's great for quick access to colors you gain inspiration from when browsing around online.
2. 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.
3. 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 web designers to easily grab colors from within their 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.
Color scheme and palette generators
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!
4. Happy Hues
Created entirely in Webflow by none other than Mackenzie Child, Happy Hues gives you various color palettes for inspiration and shows you real examples of how those colors could be used in professional designs.
Color's swatch generator is nearly as intuitive as its name, which we are still trying to understand the origin of. You can use this generator right in your browser — so go ahead, give it a try!
Coolors is another popular palette generator. Coolors is another popular palette generator. Though (slightly) less intuitive than Color (hence that extra o), 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.
8. Brandmark’s Color Wheel
Brandmark’s Color Wheel uses AI to automatically colorize logos, illustrations, wireframes and other graphical art. Simply upload your design to quickly generate color palettes. We love this tool as a source of inspiration as well. When you upload a flat design, you’ll be given thousands of unique color variations to choose from.
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!
The following four tools are our top picks for guiding your color palette 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.
10. 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 in a Photoshop project or anywhere else.
Colormind is a color palette generator that uses deep learning to make color suggestions from scratch or based on your input. Colormind can learn color styles from photographs, movies, or other sources of media that you may use as inspiration, making it one of the smartest color palette generators out there — color me impressed.
Developed by Jxnblk, Colorable make it easy for web and print designers to test out different color combinations using their hex codes. The site is extremely easy to use: simply add the hex value for two colors and the system will rate the combination based on WCAG accessibility guidelines. This rating ensures that users who are color blind or visually impaired can still read the design with those two colors.
This site is one of our current favorites — it places accessibility at the forefront of its recommendations.
Master the fundamental concepts of web design, including typography, color theory, visual design, and so much more.
There can be many reasons for a website to exist
I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.
I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.
That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.
Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex.
Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be.
Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.
If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience.
For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation.
Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list.
The ones who will make it to the other side are the ones who dared to be different
Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.
The truth is, brands willing to take risks will always come out on top.
So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”
But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple:
Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.
As you were.