On the hunt for the perfect color palette? While there are plenty of color palette generating tools available on the web, there’s nothing quite like curating your very own, unique combination of colors. One way to do this is through color exploration—a creative approach to generating beautiful color palettes that work for a particular project.
What is a color exploration
A color exploration (sometimes called a color study), is an abstract, visual representation of a set of colors, designed for you to see how each color interacts with one another. It’s a technique many graphic designers like to use for exploring how different color sets work together in various applications.
How to get started
The good news is, creating a color exploration is fairly simple because there are no hard and fast rules. They can be as simple or as complex as you decide. As you can see in the examples above, every color exploration will look a little different—you can use as many colors as you like, and you can play around with various shapes, textures, and typography to add even more depth.
If you’re not sure where to start when it comes to exploring color, we’ve got you covered. One of our very own Dribbblers Justin Mezzell created a downloadable color exploration template for Adobe Illustrator so you can simply start dropping in your own color schemes! Check it out:
Color exploration inspiration
If you’re eager to try your very own color study, here are a handful of beautiful explorations created by graphic designers to inspire you. Use them as inspiration for your next graphic design project, or for your next color study foundation:
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.
Happy Hues is both a great resource to help you find the best colors for your designs and for educating yourself on color theory to create great user interfaces and experiences.
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.
These are just some of color tools we use every day — let us know which tools you use on Twitter or Facebook.
11. HBR IdeaCast
There’s the economics of business. Then there’s the human side that goes beyond numbers and data. The Harvard Business Review IdeaCast covers the human side of business, getting into topics like the struggles of being a working mom and gender equality, but also discusses tech issues like cybersecurity and artificial intelligence.
The HBR IdeaCast covers a wide range of topics, which will expose you to ideas and subjects outside of your comfort zone. With weekly podcast episodes hitting iTunes and other podcast outlets, there’s no shortage of HBR IdeaCast episodes for you to listen to and learn from.
Falling under the umbrella of the well respected podcast network TechCrunch, Equity approaches its subject matter through the lense of venture capital, taking on what’s happening right now. From discussing the inflated valuations of companies like Uber and Robinhood, to discussing the gender pay gap, Equity makes for a compelling listen.
13. The Brainy Business
The science of behavior economics studies how peoples’ emotions affect how they spend and in turn impact the greater economy. Brainy Business delves into what affects our brains to buy what we do. This makes for episodes covering such subjects as mental biases, brand identity, and how tactile stimuli like the touch and smell of a product can influence the bottom line.
The psychology of consumerism makes for a fascinating listen, and Brainy Business explores it in a way that’s easy to understand. Whether you want to learn more about how behavior economics effects online business or traditional retail, Brainy Business is full of solid takeaways that will broaden your understanding.
Laura Correnti and Alexa Christon of Adlandia aren’t afraid to challenge long held beliefs in the real-life world of marketing. They’re friendly agitators, challenging the long held norms that are fading away. This fiery idealism may make you question your own understanding of marketing and business for the better. If you want a business podcast that isn’t afraid to challenge the status quo, Adlandia is the best business podcast.
15. Being Freelance
Anyone who has tried their hand at freelancing knows that there are challenges. Some of these can be hard lessons, with trial and error being a bumpy road. There are quite a few resources out there to make this process easier, with the Being Freelance podcast being a necessary listen for any freelancer who wants to know how to do things better in real-life.
Host Steve Folland fills his roster of guests with freelancers from a variety of fields. Anyone from illustrators to sound designers all share their experiences navigating their careers as freelancers, along with insights about their own creative work.
16. The Marketing Companion
Whether they’re talking about social media, entrepreneurship, or some other aspect of business, Mark Schaefer and Brook Sellas of the Marketing Companion pack plenty of wisdom into each episode. But this isn’t a dry business podcast. There’s a fun back and forth between the hosts, with plenty of humor mixed in. With the tagline of “The World’s Most Entertaining Business Podcast”, they certainly don’t disappoint.
17. Business Wars
Fender versus Gibson. Coke versus Pepsi. McDonald’s versus Burger King. These are the brand wars, fought with weaponized advertising, vying for us as consumers to pick a side. Business Wars explores these long-standing rivalries and strategies companies have come up with to outdo their competition. Are there any winners in the ongoing corporate skirmishes? The business wars podcast aims to answer that question and more.
18. The Pitch
We watch television shows like Shark Tank, like Romans watching the gladiators. We are transfixed by the high stakes, and the possibility of beautiful victory or crushing defeat.
The Pitch podcast captures this drama, with real company owners pitching in front of real investors. This theater, where those seeking the thumbs up that will give them the money they need to walk out victorious, makes for fun and intriguing listen.
19. Design Matters
How could we not include in the list Design Matters? They are the first ever design podcast, and have been putting out consistently great shows since they launched. Debbie Millman, a designer herself, has many different guests on from a wide range of disciplines. People like cartoonist Lynda Barry, David Lee Roth, and Adobe executive Scott Belsky have all made appearances.
Debbie brings her design smarts into these conversations, but leaves plenty of breathing room for her guests to talk about what they do. If you haven’t checked out Design Matters yet, you should dive right in.
20. Entrepreneurial Thought Leaders
The Entrepreneurial Thought Leaders series features business leaders, business owners, and others who have who’ve pushed the bounds of innovation and led companies to success. With the esteemed academic institution of Stanford being behind it, there are no lackluster figures here — with every episode featuring someone whose intelligence and vision has helped transform their given industry.
Whether they’re talking to Ryan Peterson of Flexport, whose mission is to bring tech to the shipping industry, or Lisa Anderson, the CEO of the biomedical company Genome Medical, each of these stands as a masterclass. Entrepreneurial Thought Leaders will expose you to ideas you may be unfamiliar with and inspire you to take leaps in your work and career.
What are you listening to?
There’s no way to cover the multitude of amazing podcasts out there like Mixergy, or Entrepreneurs on Fire in this given space. Please hit up the comments with what podcasts you’re listening to. We all have time that could be better spent opening our eyes to new ideas, and inspire us in our own work, lives, and careers.
The tool generates color palettes from images.
Upload an image and the tool does the rest. with the
range slider, you can set up how many colors should
be generated. Click on the button “Load Example
Image” to check out how it works.
There are no definites with color. Sure, you have your red, your green, and so on — but even that is relative. Try to describe a specific red color to a friend. Chances are the description will settle on, for example, is the color more of a brick-red or a fire truck-red?
Describing a color that looks similar to another color is natural way to discuss or express color. But when getting into specifics — accurately defining what it a certain color is — it’s almost impossible. Color, at its core, is a relative and personal experience.
Where does color come from
Electromagnetic radiation (EMR) contains radio waves, microwaves, ultraviolet, X-rays, and much more including a subset of what we call “visible light.” These visible light wavelengths contain all the colors that humans can observe without any additional tools. For each color there is a unique light wavelength. When we see color, our eyes are receiving and processing those wavelengths and converting them to colors.
Rods and cones
As wavelengths process through the iris of our eyes, rods and cones are receptors of wavelengths. They become activated.
Rods determine brightness, while cones determine the hues of red, yellow or blue. Most people have about 100 million rods and 6 million cones.
Cones are where we perceive color — and in our mental processes we start to interpret what the different types of colors are.
How many colors can the human eye differentiate? Under a good lighting or viewing conditions, people could determine up to 10 million different colors.
While color is relative, there has been a great deal of research and practice into organizing colors. There are several models for how to perceive colors — let’s start with some definitions:
Color is also known as hue. Each hue is a specific spot on the color spectrum. A spectrum can be as simple as a band, or wound up in a color wheel.
To work with color, there are different attributes you should know about:
The range from black to white is called value.
Contrast is the degree of separation between values.
Brightness adds white to an image, the lack of brightness tones the image.
Saturation is the measurement of color intensity. The lack of saturation becomes more like greyscale.
We can mix colors depending on the method or medium we are receiving color. There are two ways: subtractive primaries and additive primaries.
The subtractive colors are cyan, magenta, and yellow—mixing these colors, you get a color that closely resembles black. This is because this method uses reflective colors. The colors are using a physical substance like pigments in paint that reflect the wavelengths to the eyes. Take away these colors or their absence, and you are left with white (or whatever color the canvas is).
This is the primary system used in printing, commonly referred to as CYMK (with the “K” representing black ink, the key). The fourth ink is needed to produce a “true” dark black unlike the muddy black that the colors cyan, yellow, and magenta produce on their own.
The three additive primary colors of red, green, blue were determined in 1861 by Scottish physicist Sir James Clerk Maxwell. When the colors come together in various combinations, they produce other colors — with all three combining to produce white light. This, in short, is how color on your smart device or computer monitor right now is achieved.
Browsers allow us to select the colors we want to use in our designs in different ways from color keywords like (“red”) to hexadecimal (#FF0000). One of the different ways is with the rgb() syntax.
The rgb() syntax is a set of three values representing red, green, and blue — which are the same values as the additive primary colors. Each value is represented as a number that can range in value from 0 to 255. A value of 0 means that the color should not be present. A value of 255, on the other hand, means the full weight of the color should be present and mixed in with the other colors.
For the color red, this is how the CSS looks like:
/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */
color: rgb(255, 0, 0);
While a light green color would be
/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */
color: rgb(128, 255, 128);
The HSL model is another digital color system based within the RGB system. But instead of using red, green, and blue as the way to pinpoint a particular color, it goes about defining color through a different method — hue, saturation, and lightness. HSL places the hues in a full circle from 0 to 360 degrees; while percentages — 0% to 100% — are used for saturation and lightness. For example, the following code signifies the color red:
Deuteranomaly – red-green color blindness is found in about 6% of the male population.
Protanomaly – another form of red-green color blindness, affects about 1% of males.
Deuteranopia – a form of color blindness where it is hard to tell apart red and green colors.
Protanopia – people are unable to perceive any red light.
Tritanopia – people are unable to perceive blue light.
Achromatopsia – people cannot see any color.
Also, don’t forget that perceiving color is very much a process that includes the mind. So people might have cognitive issues which could affect their perception of color.
In the Web Content Accessibility Guidelines (WCAG), there are a number of guidelines that address the use of color. They are 1.4.1, 1.4.3, 1.4.6 and 1.4.11:
1.4.1 Use of color (A)
This guideline talks about using color alone to address or convey meaning. An example is to use color for depicting the bars in a line graph.
In short, we want to make sure we add a design or code treatment that aids in providing the appropriate context to the site visitor.
1.4.3 Contrast minimum (AA)
When providing text to people, we want to ensure that the text can be be perceived. We need to make sure text has enough contrast to come away from the background for legibility.
1.4.6 Contrast enhanced (AAA)
This success guideline is is similar to 1.4.3 but is more rigorous.
1.4.11 Non-text Contrast (AA)
For UI components and graphic objects — such as buttons and icons — we need to provide enough contrast on essential items for navigating a web site.
Checking for Color Contrast
In WCAG 1.4.3 and 1.4.11, one of the approaches, if you will, for helping to make sure colors are accessible is to make sure there is enough contrast between them. Knowing that there are so many millions of colors and knowing people have issues in viewing colors, what could be a way to calculate the contrast between two colors?
It’s hard to pick a path that would remediate issues for color blindness. So, WCAG uses the relative luminance of the colors to help determine contrast in a (somewhat) simple mathematical formula.
The Color Contrast ratio
Relative luminance is the value of luminance but expressed as values normalized from a value of 0 for the darkest black to a value of 1 for the lightest white.
The equation to convert RGB values to relative luminance can be found at WCAG:
For the sRGB colorspace, the relative luminance of a color is defined as
L = 0.2126 * R 0.7152 * G 0.0722 * B
where R, G and B are defined as:
* if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB 0.055)/1.055) ^ 2.4
* if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB 0.055)/1.055) ^ 2.4
* if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB 0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
* RsRGB = R8bit/255
* GsRGB = G8bit/255
* BsRGB = B8bit/255
The “^” character is the exponentiation operator. (Formula taken from [sRGB] and [IEC-4WD].
With a method for determining a color’s relative luminance, it’s therefore possible to compare compare them in what is a called a color contrast ratio.
L1 = Relative luminance of the lighter of the colors
L2 = Relative luminance of the darker of the colors
(L1 0.05) / (L2 0.05)
Now with the ability to determine the contrast ratio between two colors, we can use this formula to then set a standard or indication for what’s poor or good contrast for text and graphics.
And with formulas, it’s easy to create tools and apps to determine color accessibility, such as the Colour Contrast Analyzer (CCA) from The Paciello Group.
If you use DevTools, you can visually check and adjust colors to see if they pass color contrast:
There appear to be hundreds of online color contrast checkers. Here are just a few:
Through research and practice, it’s been found that the algorithm provides false results, as noted by Andrew Somers’ research.
Currently, a new model for detecting contrast is being worked on by the Silver Task Force, which is working on a new version of Accessibility Guidelines as the current contrast ratio is not an ideal algorithm.
Color is amazingly complex. It is both conveyed and perceived in a myriad of ways. While color contrast ratio is a simple aid to determine contrast, it is vital to go beyond just stating basic color contrast ratios when working towards accessible and inclusive designs. We need to convey all of the colors’ complexity in our designs so we can address the visual needs of a variety of people.
Color is my day-long obsession, joy and torment – Claude Monet
Over the last two years we’ve tried to improve our usage of color at Cloudflare. There were a number of forcing functions that made this work a priority. As a small team of designers and engineers we had inherited a bunch of design work that was a mix of values built by multiple teams. As a result it was difficult and unnecessarily time consuming to add new colors when building new components.
We also wanted to improve our accessibility. While we were doing pretty well, we had room for improvement, largely around how we used green. As our UI is increasingly centered around visualizations of large data sets we wanted to push the boundaries of making our analytics as visually accessible as possible.
Cloudflare had also undergone a rebrand around 2016. While our marketing site had rolled out an updated set of visuals, our product ui as well as a number of existing web properties were still using various versions of our old palette.
Our product palette wasn’t well balanced by itself. Many colors had been chosen one or two at a time. You can see how we chose blueberry, ice, and water at a different point in time than marine and thunder.
Lacking visual cohesion within our own product, we definitely weren’t providing a cohesive visual experience between our marketing site and our product. The transition from the nice blues and purples to our green CTAs wasn’t the streamlined experience we wanted to afford our users.
Reworking our Palette
Our first step was to audit what we already had. Cloudflare has been around long enough to have more than one website. Beyond cloudflare.com we have dozens of web properties that are publicly accessible. From our community forums, support docs, blog, status page, to numerous micro-sites.
All-in-all we have dozens of front-end codebases that each represent one more chance to introduce entropy to our visual language. So we were curious to answer the question – what colors were we currently using? Were there consistent patterns we could document for further reuse? Could we build a living style guide that didn’t cover just one site, but all of them?
Our curiosity got the best of us and we went about exploring ways we could visualize our design language across all of our sites.
A time machine for color
As we first started to identify the scale of our color problems, we tried to think outside the box on how we might explore the problem space. After an initial brainstorming session we combined the Internet Archive’s Wayback Machine with the Css StatsAPI to build an audit tool that shows how our various websites visual properties change over time. We can dynamically select which sites we want to compare and scrub through time to see changes.
Below is a visualization of palettes from 9 different websites changing over a period of 6 years. Above the palettes is a component that spits out common colors, across all of these sites. The only two common colors across all properties (appearing for only a brief flash) were #ffffff (white) and transparent. Over time we haven’t been very consistent with ourselves.
If we drill in to look at our marketing site compared to our dashboard app – it looks like the video below. We see a bit more overlap at first and then a significant divergence at the 16 second mark when our product palette grew significantly. At the 22 second mark you can see the marketing palette completely change as a result of the rebrand while our product palette stays the same. As time goes on you can see us becoming more and more inconsistent across the two code bases.
As a product team we had some catching up to do improve our usage of color and to align ourselves with the company brand. The good news was, there was no where to go but up.
This style of historical audit gives us a visual indication with real data. We can visualize for stakeholders how consistent and similar our usage of color is across products and if we are getting better or worse over time. Having this type of feedback loop was invaluable for us – as auditing this manually is incredibly time consuming so it often doesn’t get done. Hopefully in the future as it’s standard to track various performance metrics over time at a company it will be standard to be able to visualize your current levels of design entropy.
After our initial audit revealed there wasn’t a lot of consistency across sites, we went to work to try and construct a color palette that could potentially be used for sites the product team owned. It was time to get our hands dirty and start “picking colors.”
Hindsight of course is always 20/20. We didn’t start out on day one trying to generate scales based on our brand palette. No, our first bright idea, was to generate the entire palette from a single color.
Our logo is made up of two oranges. Both of these seemed like prime candidates to generate a palette from.
We played around with a number of algorithms that took a single color and created a palette. From the initial color we generated an array scales for each hue. Initial attempts found us applying the exact same curves for luminosity to each hue, but as visual perception of hues is so different, this resulted in wildly different contrasts at each step of the scale.
We can see the intensity of the colors change across hue in peaks, with yellow and green being the most dominant. One of the downsides of this, is when you are rapidly iterating through theming options, the inconsistent relationships between steps across hues can make it time consuming or impossible to keep visual harmony in your interface.
The video below is another way to visualize this phenomenon. The dividing line in the color picker indicates which part of the palette will be accessible with black and white. Notice how drastically the line changes around green and yellow. And then look back at the charts above.
After fiddling with a few different generative algorithms (we made a lot of ugly palettes…) we decided to try a more manual approach. We pursued creating custom curves for each hue in an effort to keep the contrast scales as optically balanced as possible.
Generating different color palettes makes you confront a basic question. How do you tell if a palette is good? Are some palettes better than others? In an effort to answer this question we constructed various feedback loops to help us evaluate palettes as quickly as possible. We tried a few methods to stress test a palette. At first we attempted to grab the “nearest color” for a bunch of our common UI colors. This wasn’t always helpful as sometimes you actually want the step above or below the closest existing color. But it was helpful to visualize for a few reasons.
Sometime during our exploration in this space, we stumbled across this tweet thread about building a palette for pixel art. There are a lot of places web and product designers can draw inspiration from game designers.
Here we see a similar concept where a number of different palettes are applied to the same component. This view shows us two things, the different ways a single palette can be applied to a sphere, and also the different aesthetics across color palettes.
It’s almost surprising that the default way to construct a color palette for apps and sites isn’t to build it while previewing its application against the most common UI patterns. As designers, there are a lot of consistent uses of color we could have baselines for. Many enterprise apps are centered around white background with blue as the primary color with mixtures of grays to add depth around cards and page sections. Red is often used for destructive actions like deleting some type of record. Gray for secondary actions. Maybe it’s an outline button with the primary color for secondary actions. Either way – the margins between the patterns aren’t that large in the grand scheme of things.
Consider the use case of designing UI while the palette or usage of color hasn’t been established. Given a single palette, you might want to experiment with applying that palette in a variety of ways that will output a wide variety of aesthetics. Alternatively you may need to test out several different palettes. These are two different modes of exploration that can be extremely time consuming to work through . It can be non-trivial to keep an in progress design synced with several different options for color application, even with the best use of layer comps or symbols.
How do we visualize the various ways a palette will look when applied to an interface? Here are examples of how palettes are shown on a palette list for pixel artists.
One method of visualization is to define a common set of primitive ui elements and show each one of them with a single set of colors applied. In isolation this can be helpful. This mode would make it easy to vet a single combination of colors and which ui elements it might be best applied to.
Alternatively we might want to see a composed interface with the closest colors from the palette applied. Consider a set of buttons that includes red, green, blue, and gray button styles. Seeing all of these together can help us visualize the relative nature of these buttons side by side. Given a baseline palette for common UI, we could swap to a new palette and replace each color with the “closest” color. This isn’t always a full-proof solution as there are many edge cases to cover. e.g. what happens when replacing a palette of 134 colors with a palette of 24 colors? Even still, this could allow us to quickly take a stab at automating how existing interfaces would change their appearance given a change to the underlying system. Whether locally or against a live site, this mode of working would allow for designers to view a color in multiple contets to truly asses its quality.
After moving on from the idea of generating a palette from a single color, we attempted to use our logo colors as well as our primary brand colors to drive the construction of modular scales. Our goal was to create a palette that would improve contrast for accessibility, stay true to our visual brand, work predictably for developers, work for data visualizations, and provide the ability to design visually balanced and attractive interfaces. No sweat.
While we knew going in we might not use every step in every hue, we wanted full coverage across the spectrum so that each hue had a consistent optical difference between each step. We also had no idea which steps across which hues we were going to need just yet. As they would just be variables in a theme file it didn’t add any significant code footprint to expose the full generated palette either.
One of the more difficult parts, was deciding on a number of steps for the scales. This would allow us to edit the palette in the future to a variety of aesthetics and swap the palette out at the theme level without needing to update anything else.
In the future if when we did need to augment the available colors, we could edit the entire palette instead of adding a one-off addition as we had found this was a difficult way to work over time. In addition to our primary brand colors we also explored adding scales for yellow / gold, violet, teal as well as a gray scale.
The first interface we built for this work was to output all of the scales vertically, with their contrast scores with both white and black on the right hand side. To aid scannability we bolded the values that were above the 4.5 threshold. As we edited the curves, we could see how the contrast ratios were affected at each step. Below you can see an early starting point before the scales were balanced. Red has 6 accessible combos with white, while yellow only has 1. We initially explored having the gray scale be larger than the others.
As both screen luminosity and ambient light can affect perception of color we developed on two monitors, one set to maximum and one set to minimum brightness levels. We also replicated the color scales with a grayscale filter immediately below to help illustrate visual contrast between steps AND across hues. Bouncing back and forth between the grayscale and saturated version of the scale serves as a great baseline reference. We found that going beyond 10 steps made it difficult to keep enough contrast between each step to keep them distinguishable from one another.
Taking a page from our game design friends – as we were balancing the scales and exploring how many steps we wanted in the scales, we were also stress testing the generated colors against various analytics components from our component library.
Our slightly random collection of grays had been a particular pain point as they appeared muddy in a number of places within our interface. For our new palette we used the slightest hint of blue to keep our grays consistent and just a bit off from being purely neutral.
With a palette consisting of 90 colors, the amount of combinations and permutations that can be applied to data visualizations is vast and can result in a wide variety of aesthetic directions. The same palette applied to both line and bar charts with different data sets can look substantially different, enough that they might not be distinguishable as being the exact same palette. Working with some of our engineering counterparts, we built a pipeline that would put up the same components rendered against different data sets, to simulate the various shapes and sizes the graph elements would appear in. This allowed us to rapidly test the appearance of different palettes. This workflow gave us amazing insights into how a palette would look in our interface. No matter how many hours we spent staring at a palette, we couldn’t get an accurate sense of how the colors would look when composed within an interface.
We experimented with a number of ideas on visualizing different sizes and shapes of colors and how they affected our perception of how much a color was changing element to element. In the first frame it is most difficult to tell the values at 2% and 6% apart given the size and shape of the elements.
In an effort to make sure everything we are building will be visually accessible – we built a react component that will preview how a design would look if you were colorblind. The component overlays SVG filters to simulate alternate ways someone can perceive color.
While this is previewing an analytics component, really any component or page can be previewed with this method.
After quite a few iterations, we had finally come up with a color palette. Each scale was optically aligned with our brand colors. The 5th step in each scale is the closest to the original brand color, but adjusted slightly so it’s accessible with both black and white.
Getting a team of people to agree on a new color palette is a journey in and of itself. By the time you get everyone to consensus it’s tempting to just collapse into a heap and never think about colors ever again. Unfortunately the work doesn’t stop at this point. Now that we’ve picked our palette, it’s time to get it implemented so this bike shed is painted once and for all.
If you are porting an old legacy part of your app to be updated to the new style guide like we were, even the best color documentation can fall short in helping someone make the necessary changes.
We found it was more common than expected that engineers and designers wanted to know what the new version of a color they were familiar with was. During the transition between palettes we had an interface people could input any color and get the closest color within our palette.
There are times when migrating colors, the closest color isn’t actually what you want. Given the scenario where your brand color has changed from blue to purple, you might want to be porting all blues to the closest purple within the palette, not the closest blues which might still exist in your palette. To help visualize migrations as well as get suggestions on how to consolidate values within the old scale, we of course built a little tool. Here we can define those translations and import a color palette from a URL import. As we still have. a number of web properties to update to our palette, this simple tool has continued to prove useful.
We wanted to be as gentle as possible in transitioning to the new palette in usage. While the developers found string names for colors brittle and unpredictable, it was still a more familiar system for some than this new one. We first just added in our new palette to the existing theme for usage moving forward. Then we started to port colors for existing components and pages.
For our colleagues, we wrote out desired translations and offered warnings in the console that a color was deprecated, with a reference to the new theme value to use.
While we had a few bugs along the way, the team was supportive and helped us fix bugs almost as quickly as we could find them.
We’re still in the process of updating our web properties with our new palette, largely prioritizing accessibility first while trying to create a more consistent visual brand as a nice by-product of the work. A small example of this is our system status page. In the first image, the blue links in the header, the green status bar, and the about copy, were all inaccessible against their backgrounds.
A lot of the changes have been subtle. Most notably the green we use in the dashboard is a lot more inline with our brand colors than before. In addition we’ve also been able to add visual balance by not just using straight black text on background colors. Here we added one of the darker steps from the corresponding scale, to give it a bit more visual balance.
While we aren’t perfect yet, we’re making progress towards more visual cohesion across our marketing materials and products.
Trying to keep dozens of sites all using the same palette in a consistent manner across time is a task that you can never complete. It’s an ongoing maintenance problem. Engineers familiar with the color system leave, new engineers join and need to learn how the system works. People still launch sites using a different palette that doesn’t meet accessibility standards. Our work continues to be cut out for us. As they say, a garden doesn’t tend itself.
If we do ever revisit our brand colors, we’re excited to have infrastructure in place to update our apps and several of our satellite sites with significantly less effort than our first time around.
Some of our favorite materials and resources we found while exploring this problem space.
When you’re looking at a jacket, sofa or something else, the first thing you look at is COLOR.
You either attractedto it or it repels you so, think of the color that your brand has.
That’s why, I pay closer attention to color choices when it comes to branding. It matters a lot and has cognitive implications on your customers.
Let’s dive in!
IMPORTANT: The right color palette will evoke the rightemotions and build positive associations with your brand!
Below, I’ve listed a few screenshots from the color discovery that is a part of a branding strategy:
In my work, I don’t simply rely on my personal judgement, but rather I prefer to supplement it with a cognitive psychology principles for a maximum impact.
To develop a color palette that supports many design goals, you’ll need to know which colors attract the eye more than others.
Take a look at this ‘Visual salience of colors chart’
Visual salience of colors chart explains how your brand color stacks up against other dominant (salient) colors. It can also help you pick the color tint that will draw more attention to your logo/identity,rather than your competitors.
It’s advised to stick to only 1 primary salient color to avoid a.k.a. ’Las Vegas’ strip design gutter where everything seems important and calling for your attention.
Another important factor to be aware of – Arousal level.
Arousal is the level of physical and cognitive energy experienced. When someone’s arousal is they’ll feel energized, focused, and experience a strong sense of cognitive energy.
In behavioral psychology, high-arousal colors evoke pleasurable emotions to motivate users complete certain actions.
At the end of the discovery, I give my recommendations on the best color variations as well as explaining the strengths and weaknesses of each color option. One of my principles is I never push clients to certain options because I believe that my job as a consultant is to give recommendations and then the company should choose what they feel would fit their needs better. That’s how relationships are built.
If you need help in solidifying your brandas well as establishing a bold visual language, feel free toget in touch.
Thank you for reading!
Till next time.
Alex Gilev is a UX/Brand consultant with a background in behavioral psychology, neuroscience, who helps SaaS companies to large Fortune 500 innovate in UX to maximize their competitive advantage.
RGB to HEX converter to instantly convert RGB color codes to Hexadecimal triplets, see result and copy to clipboard with one click! A RGBA and Hex Color CSS generator that helps you quickly convert and generate RGBA and Hex Color CSS declarations for your website. It comes with many options and it demonstrates instantly. What does this RGB to Hex converter do? It takes input in the form of values for Red, Green and Blue ranging from 0 to 255 and then converts those values to a hexadecimal string that can be used to specify color in HTML5/CSS3 code. Free online RGB color to hexadecimal color converter. Just load your RGB color and it will automatically get converted to a hex color. There are no popups or nonsense, just an awesome decimal RGB to hex converter. Load RGB, get hexadecimal.
How do I convert RGB values of a color to a hexadecimal string?
The RGB-to-hexadecimal converter algorithm is simple: make sure that your R, G, B (red, green, blue) values are in the range 0…255, convert R, G, B to hex strings, and then concatenate the three hex strings together. Convert RGB to Hex color values here:
RGB Input – it works both for upper and lowercase rgb or rgba codes, but you can ignore the starting rgb mark and the brackets. Make sure you add three numbers in the 0-255 range separated by commas.
HEX Input – the first field accepts values with or without the hash sign. It works for both 3 and 6 character long codes. The calculator can handle some typos too, for example when the second digit of a component is an invalid character, not in the hexadecimal range (0-F).
Setting a basic color theme for your web design project might be an easy task, however, deciding upon the right combinations or coming up with a color scheme may get tricky, especially when you don’t know which color tool would work best for you.
So to help determine the best color schemes for your projects, here are some of the best color tools for webs designers. Let’s check out the list.
SpyColor.com is a free app that provides information about any color, including conversions to many color models, such as RGB, CMYK, HSL, HSV, and much more. You can create various color schemes, for example, complementary, split-complementary, triadic, tetradic, five-tone, clash and more.
According to Color Blind Awareness, color blindness affects 1 in 12 men (8%) and 1 in 200 women (0.5%). There are an estimated 300 million color blind people worldwide, including Mark Zuckerberg, Bill Clinton and Prince William!
Optimizing your graphics can help make them more accessible—and that doesn’t mean banishing color from your charts and graphs either. Contrary to popular belief, more than 99% of color blind people can, in fact, see color—just not in the same way as someone who isn’t impacted by color blindness.
In this guide, we’ll break down the different types of color blindness and their special considerations with respect to data visualization. We’ll also show you how to effectively use color blind friendly palettes to make your graphics available to a wider range of people.
We’ve put together some ready-made color blind friendly palettes to inspire you. Scroll down to the section 4 for that.
Color blindness—also known as color vision deficiency (CVD)—is a deficiency in distinguishing between different colors. It occurs when light-sensitive tissue in the back of the eye—the retina–fails to properly respond to variations in wavelengths of light, which enable people to see different colors.
Although color blindness is primarily an inherited condition, it can also result from cataracts or trauma to the eye, as well as a number of diseases, including Parkinson’s, Kallman’s Syndrome and diabetes. Damage to the retina caused by aging can additionally cause color blindness.
Deuteranopia / Deuteranomaly: Also known as “green weakness”, this type of red/green color blindness renders people insensitive to green light (deuteranomaly) or unable to perceive any green light at all (deuteranopia).
Red/green color blindness is inherited, and affects males more than females. The reason for this is because the genes responsible for this condition are contained within the X chromosome.
Because women have two X chromosomes, any deficiencies in one will typically be compensated by the other. Men, however, only have one X chromosome, and don’t have a “spare” to fall back on.
Blue/Yellow Color Blindness
People who suffer from blue/yellow color blindness have difficulty distinguishing between blue and yellow colors.
This particular form of color blindness–also known as Tritanopia–is far less common than its red/green counterpart. In fact, according to the U.S. National Library of Medicine, blue/yellow color blindness affects fewer than 1 in 10,000 people worldwide.
Because Tritanopia isn’t caused by a genetic trait linked to the X chromosome, it is equally present in both men and women.
People who suffer from complete color blindness—also known as Monochromacy—are unable to distinguish between any colors at all. Monochromacy is extremely rare, occurring in 1 in 33,000 people, according to Colour Blind Awareness.
Color plays a significant role in data visualization. For starters, colors are used to highlight important information, as well as illustrate relationships between various types of data. Color also plays an instrumental role in guiding the viewer’s eye. It can even be used to stimulate emotion through color psychology.
You can even argue that the colors used in charts and infographics actually tell the story of the data they represent. As Eva Murray writes in Forbes:
In data visualization, color sets the tone and enforces a message for the underlying visual display. It creates a certain atmosphere and can turn an unassuming visualization into an emotion-filled data story.
WATCH: Everything you need to know about COLOR… in under 3 minutes
Knowing how to pick colors is important, but when you’re optimizing for accessibility, there’s more to consider than color theory and composition.
HOT TIP: Venngage’s Brand Kit feature makes it easy to automatically import your brand colors and brand fonts into your designs.
You can also use Venngage’s color picker tool to easily switch out different colors, a particularly useful tool for working with color blind friendly palettes.
How to design charts with a color blind friendly palette
1.) Plan out your color scheme beforehand
Using a color blind friendly palette doesn’t mean you need to compromise on aesthetics or strip out all the color from your charts. By planning ahead, you can ensure a color blind friendly palette compliments your design, rather than clashes.
Even with a tool like Venngage, which can drastically scale back the number of hours required to create an infographic, it’s still ideal to flesh out your color scheme before you dive in and start a new project.
After all, if it turns out your colors aren’t particularly suited to color blind people—and accessibility is important to you—it’s better to find this out before you’ve invested considerable time and effort in the design.
If you’re not sure where to start, these color blind color wheels can be a useful reference to quickly determine how your colors will translate across different forms of color blindness:
Better yet, we’ve put together some versatile color blind friendly palettes:
HOT TIP: If you’re stuck, try using a tool like Coblis, a free color blind simulator which will give you a better sense of how your images will appear to people with color blindness.
2.) Avoid problematic color combinations
Another reason you should plan out your color scheme beforehand is so you can avoid using problematic color combinations, some of which can make your charts or infographics completely inaccessible to color blind people.
Color combinations to avoid for people with color blindness include:
Red & green
Green & brown
Green & blue
Blue & gray
Blue & purple
Green & gray
Green & black
If you’re stuck and absolutely must use one of these combinations, try making adjusting the shades so one is extremely dark, and the other extremely light—most color blind people can detect contrast, so this likely will make things easier.
3.) Use highly contrasting colors
As previously mentioned, contrast isn’t an issue for most people who are color blind. Darken and lighten your colors, respectively, to make the contrast more pronounced. You can also play with different hues, as well as levels of brightness and saturation.
4.) Use patterns and textures
Using patterns and textures in your design is a great way to incorporate visual elements into your design which don’t rely on color.
Venngage’s drag-and-drop design editor features a library of patterns you can use to enhance your design and make it more accessible.
5.) Use symbols
Symbols and icons are a great way to make your designs more accessible because they can visually punctuate a message, without relying on color.
Hot Tip: Venngage’s library includes over 4,000 icons you can use to make your infographics and charts more accessible.
6.) Make your chart monochromatic
Because color blindness doesn’t impact the ability to distinguish between different shades, consider making your charts monochromatic. Using a restricted color palette will naturally mean there are fewer opportunities to use problematic colors or combinations.
7.) Keep your design clean and simple
When you’re designing for accessibility, it’s important to keep your infographics as simple and streamlined as possible. Adopting a minimalistic approach will help ensure your presentations are more easily understood, whether or not your audience is color blind.
Key takeaways for using color blind friendly palettes
Optimizing your infographics and charts for people affected by color blindness is important for both accessibility and inclusivity. It’s also possible to do without compromising the aesthetic quality in the process.
The following measures can help ensure color blind people are actually able to engage with your designs:
Selecting color blind friendly palettes
Avoiding problematic color combinations
Using different textures and patterns to highlight important information–not just color
Using symbols and icons to supplement color-coded messages, warnings and alerts
Using highly contrasted color combinations
Adopting minimalistic design to help avoid unnecessary confusion.
Combining all these elements will help make your designs more accessible to color blind people. After all, the more people you can engage with, the more impactful your work will be.