color-stuck?-try-the-color-palette-finding-technique-graphic-designers-love

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.

  1. Grovo Color Study 2: French Fry

  2. Shape & Color Study

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:

  1. Pattern exploration

  2. Color Study

  3. Screen Shapes

  4. Pattern 03

  5. shape and color exploration

  6. Color and Pattern exploration

  7. Abstract Exploration 02

  8. Exploration

  9. Testing patterns

  10. Color Study

  11. Mixpanel Events

  12. Morning Doodles

  13. Shape & Color

  14. Type And Color Exploration

  15. 7222019

Row 1:
Steve Wolf,
C.Rowe,
Skinny Ships.
Row 2:
Rogie for Dribbble,
Sophia Umansky,
Calin Ciobanu.
Row 3:
Jay Higginbotham,
Michelle Lasalvia,
Lorena G.
Row 4:
Cody Paulson,
Mike Casebolt for Mixpanel,
Cory Uehara.
Row 5:
Noah Jacobus,
Mario Šestak,
Cory Uehara.


Find more Inspiration stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

12-color-tools-to-boost-productivity-for-designers

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

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.

colorpick eyedropper

ColorPick allows you to find the Hex color code of any element

2. ColorSnapper 2

ColorSnapper 2 in action

Use ColorSnapper 2’s magnifier to get exactly the shade you want and save it for later.

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

Webflow's Chrome extension enables an in-app color picker


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.

Handy, right?

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.

mackenzie child happy hues

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.

5. Color

Color palette generator


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!

6. Coolors

Using Coolors to create a palette

Coolors makes it easy to pick and refine your palette.

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.

7. LOLColors

lolcolors

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.

Color inspiration

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.

9. Gradients.io

Gradients.io curates cool gradients for you to use in your websites.

Luke Davies’ Gradients.io suggests some beautiful gradients for your designs.

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

Color palettes created by Adobe Color users

User-generated color palettes in Adobe Color.

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.

11. Colormind

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.

12. Colorable

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

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.

12. Equity

techcrunch equity podcast

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 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.

14. ADLANDIA

ADLANDIA podcast

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

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

marketing companion podcast

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

business wars podcast

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

the pitch podcast

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

design matters podcast

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

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.

color-theory-and-contrast-ratios

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.

Color Theory

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:

All the hues in the color spectrum

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:

Greyscale representation going from black to light.

The range from black to white is called value.

Three photos with various degrees of contrast applied: Low, None, High.

Contrast is the degree of separation between values.

Three photos with various degrees of brightness applied: Dark, None, Light

Brightness adds white to an image, the lack of brightness tones the image.

Saturation and greyscale representation

Saturation is the measurement of color intensity. The lack of saturation becomes more like greyscale.

Mixing Colors

We can mix colors depending on the method or medium we are receiving color. There are two ways: subtractive primaries and additive primaries.

Subtractive primary colors

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.

Additive primary colors

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.

Coding Color

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 */

.alert {
  color: rgb(255, 0, 0);
}

While a light green color would be

/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */

.alert {
  color: rgb(128, 255, 128);
}

Graphic representation of HSL model. Caption = HSL cylinder from Wikipedia

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:

/* h = hue = 0 -> 360 */
/* s = saturation = 0% -> 100% */
/* l = lightness = 0% -> 100% */

.alert {
  color: hsl(0, 100%, 50%)
}

And a light green color is written out such as:

/* h = hue = 0 -> 360 */
/* s = saturation = 0% -> 100% */
/* l = lightness = 0% -> 100% */

.good {
  color: hsl(120, 100%, 75%)
}

Low Vision and Color Blindness

One person in twelve has some sort of color deficiency—about 8% of men and 0.4% of women in the U.S. A person with low vision or color blindness will not be able to distinguish text against a background without sufficient contrast.

Types of Color Blindness

  • 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.

Color Accessibility

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.

Screenshot of Colour Contrast Analyser

If you use DevTools, you can visually check and adjust colors to see if they pass color contrast:

Chome DevTools color inspector

There appear to be hundreds of online color contrast checkers. Here are just a few:

Future of Checking Color Contrast

Through research and practice, it’s been found that the algorithm provides false results, as noted by Andrew Somers’ research.

A series of color contrast tests.
Color tests conducted by Andrew Somers.

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.

In Conclusion

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.

thinking-about-color

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.

Cloudflare.com in 2016 & Cloudflare.com in 2019

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.

The color section of our theme file was partially ordered chronologically
The color section of our theme file was partially ordered chronologically

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.

Cloudflare.com 2017 & Sign in page 2017
Our app dashboard in 2017
Our app dashboard in 2017

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?

Screenshots of pages from cloudflare.com contrasted with screenshots from our product
Screenshots of pages from cloudflare.com contrasted with screenshots from our product in 2017

Our curiosity got the best of us and we went about exploring ways we could visualize our design language across all of our sites.

Above - our product palette. Below - our marketing palette aligned by hue
Above – our product palette. Below – our marketing palette.

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 Stats API 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.

Picking colors

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.

Below are a few of our initial attempts at palette generation. Jeeyoung Jung did a brilliant writeup around designing palettes last year.

Visualizing peaks of intensity across hues

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.

Demo of https://kevingutowski.github.io/color.html

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.

Heavily muted palette
Heavily muted palette

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.

Generated palette above a set of components previewing the old and new palette for comparison
Generated palette above a set of components previewing the old and new palette for comparison

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.

Two color palettes visualized to create 3d objects
Two color palettes visualized to create 3d objects
A color palette applied in a few different contexts
A color palette applied in a few different contexts

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.

Different color palettes previewed against a common component
Different color palettes previewed against a common component

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.

https://lospec.com/palette-list/sweetie-16
https://lospec.com/palette-list/vines-flexible-linear-ramps
https://lospec.com/palette-list/vines-flexible-linear-ramps

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.

Brand colors showing Hue and Saturation level
Brand colors showing Hue and Saturation level

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.

Early iteration of palette preview during development
Early iteration of palette preview during development

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.

Monitors set to different luminosity & a close up of the visual difference

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.

Optically balanced scales
Optically balanced scales

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.

Full theme minus green & blues and oranges

Grayscale example & monochromatic Indigo

Analytics charts with blues and purples & analytics charts with blues and greens
Analytics charts with a blues and oranges. Telling the colors of the lines apart is a different visual experience than separating out the dots in sequential order as they appear in the legend.
Analytics charts with a blues and oranges. Telling the colors of the lines apart is a different visual experience than separating out the dots in sequential order as they appear in the legend.

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.

Stress testing the application of a palette to many shapes and sizes

We’ve begun to package up some of this work into a web app others can use to create or import a palette and preview multiple depths of accessible combinations against a set of UI elements.

The goal is to make it easier for anyone to work seamlessly with color and build beautiful interfaces with accessible color contrasts.

Color by Cloudflare Design

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.

Analytics component previewed against 8 different types of color blindness
Analytics component previewed against 8 different types of color blindness

While this is previewing an analytics component, really any component or page can be previewed with this method.

import React from "react"

const filters = [
  'achromatopsia',
  'protanomaly',
  'protanopia',
  'deuteranomaly',
  'deuteranopia',
  'tritanomaly',
  'tritanopia',
  'achromatomaly',
]

const ColorBlindFilter = ({itemPadding, itemWidth, ...props }) => {
  return (
      
{filters.map((filter, i) => (
{props.children}
))}
) } ColorBlindFilter.defaultProps = { display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap', width: 1, itemWidth: 1/4 } export default ColorBlindFilter

We’ve also released a Figma plugin that simulates this visualization for a component.

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.

Palette preview as both fully saturated and desaturated
Our preview panel for palette development, showing a fully desaturated version of the palette for reference

Lyft’s writeup “Re-approaching color” and Jeeyoung Jung’s “Designing Systematic Colors are some of the best write-ups on how to work with color at scale you can find.

Color migrations

A visual representation of how the legacy palette colors would translate to the new scales.
A visual representation of how the legacy palette colors would translate to the new scales.

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.

Example of console warning when using deprecated color
Example of console warning when using deprecated color
Example of how to check for usage of deprecated values
Example of how to check for usage of deprecated values

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.

cloudflarestatus.com in 2017 & cloudflarestatus.com in 2019 with an accessible green

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.

Notifications 2017 – Black text & Notifications 2018 – Updated palette. Text is set to 1st step in corresponding scale of background color
Example page within our Dashboard in 2017 vs 2019
Example page within our Dashboard in 2017 vs 2019

While we aren’t perfect yet, we’re making progress towards more visual cohesion across our marketing materials and products.

2017

Cloudflare.com & Sign in page 2017
Our app dashboard in 2017
Our app dashboard in 2017

2019

Cloudflare homepage & updated Dashboard in 2019

Next steps

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.

Resources

Some of our favorite materials and resources we found while exploring this problem space.

Apps

Writing

Code

Videos

color-psychology-principles-to-bolster-your-brand

When you’re looking at a jacket, sofa or something else, the first thing you look at is COLOR. 

You either attracted to it or it repels you so, think of the color that your brand has. 

30kstrategy-alex-gilev-ux-design-saas-strategy-uxstrategy-color-branding-logo-design-identity.jpg

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 right emotions 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:

color exploration.jpg

Emnify color exploration_Page_02.jpg

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’

color-exploration.jpg

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.

Emnify color exploration_Page_28.jpg

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 brand as well as establishing a bold visual language, feel free to get in touch.

Thank you for reading!

Till next time.

Alex

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).

20+-color-tools-for-web-designers

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.

Read Also: Open Color – UI-Optimized color scheme for designers

Adobe Color CC

You may know this tool by its previous name Adobe Kuler. It’s one of the most popular features by Adobe allowing you to combine colors.

Adobe Color CC
ColourLovers

ColourLovers is an online community of color lovers. It contains images and their color palettes, so you can use them for your own work.

ColourLovers
Coolors

Coolors is a quick color scheme generator. It allows users to create and share color palettes in no time. It chooses the main color of the images and finds perfect color combinations.

Coolors
Color Snapper 2

Color Snapper 2 is a tool created for OS X Yosemite. It was made for graphic designers so they can play, modify, adjust, organize, save, and export colors on the screen.

Color Snapper 2
Colordot

Colordot is a great website and iOS app allowing you to create and share color schemes. You can choose color with a finger or a camera.

Colordot
Adobe Capture CC

Adobe Capture CC allows you to take a picture of anything you like and turn it into a color palette, create a brush, and pattern. It’s available on desktop and mobile.

Adobe Capture CC
LOL Colors

LOL Colors is one of the services created by Mackenzie Child. It’s a website with curated color palettes. Every colorful teardrop is clickable with ready-to-copy hex codes.

LOL Colors
Gradients.io

Gradients.io lets visitors use gradient fills for their images. The website contains a page full of squares in different color palettes with their hex codes for easier usage.

Gradients.io
CheckMyColours

CheckMyColours helps you combine foreground and background colors of all DOM elements. It’s created to check if the colors pairing create a proper contrast for people with color deficits.

CheckMyColours
Color Hunter

Color Hunter is a useful tool for designers. Just find an image you like and upload it (or enter image URL) to the website. The service will create a color palette from your chosen image.

Color Hunter
TinEye

TinEye allows you to extract color from over 20 million Creative Common images from Flickr. Just select a color, slide dividers to adjust the color and add tags to your search.

TinEye
Paletton

Paletton is made to help graphic designers create websites with proper color combinations. You can also use pre-made color palettes in a chosen color.

Paletton
Colorspire

Colorspire is a 3-steps color palette builder. You can choose a base color, then create a color scheme, and see huge colors preview.

Colorspire
Color Explorer

Color Explorer is one of the most in-depth color tools available out there. With its help, you can create, analyze, and customize your color schemes. It’s absolutely free.

Color Explorer
0to255

0to255 will help you to find darker and lighter shades of one color. It can be used to find a range of shades for one particular color.

0to255
ColorRotate

ColorRotate is a helpful color editing app for tablets. WIth 3D color scope, you can take a full control of colors of a subject.

ColorRotate
SpyColor.com

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.

SpyColor.com

Read Also: Find Awesome User-curated Color Palettes with Color Hunt

Designspiration

On this site, you can select up to five hues from a full-page palette. Then, it will generate a display of all the images in its database with this color combination.

Designspiration
ColorMunki

ColorMunki lets you create your own colors. You can create color palettes, find similar colors, and properly match them.

ColorMunki
Pantone

This service created for Apple users will help you to explore the world of colors and find new shades. You can discover color harmonies, values, and cross-references.

Pantone
ColorZilla

ColorZilla is Firefox and Google Chrome plugin extension that includes a color picker, eye-dropper, CSS gradient generator and palette browser.

ColorZilla
Color Hunt

Color Hunt is a new social media channel for color lovers. You can discover carefully picked color palettes, and choose some Hot, Popular or Random color schemes to use in your future designs.

Color Hunt
Material UI Colors

Material UI Colors is an amazing service to choose contrasting colors for material design.

Material UI Colors
ColorDrop

ColorDrop showcases hundreds of amazing color palettes you can use. For easier navigation, use sections “Favourites” and “Flat Colors”.

ColorDrop

how-to-use-color-blind-friendly-palettes-to-make-your-charts-accessible

Color blind friendly palette

Colors play a central role in data visualization. But what if your readers are color blind?

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!

Color blind friendly palette - famous color blind people



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.

Table of Contents

  1. What is color blindness?
  2. What are the 3 types of color blindness?
  3. Why color is important to data visualization
  4. How to design charts with a color blind friendly palette
  5. Key takeaways

First thing’s first…

What is color blindness?

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.

Color blind friendly color palette - retina

IMAGE SOURCE

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.

What are the 3 types of color blindness?

Color spectrums of the 3 types of color blindness

IMAGE SOURCE

There are three distinct types of color blindness:

Red/Green Color Blindness

According to Colblindor, 99% of all color blind people suffer from red/green color blindness. This is further broken down into two distinct categories:

  • Protanopia: Also referred to as “red weakness”, individuals who suffer with this variation of red/green color blindness are unable to perceive red light.

Normal vision compared with protanopia

Left: Normal vision, Right: Protanopia

IMAGE SOURCE

The protanopia color spectrum looks like this:

Protanopia color spectrum

SOURCE

  • 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).

Normal color vision compared to color blindness

Left: Normal vision, Right: Deuteranopia

IMAGE SOURCE

The deuteranopia color spectrum looks like this:

Color blind spectrum - Deuteranopia

SOURCE

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.

Color blind friendly palette - statistic

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.

Color blind friendly palette - statistic



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.

Color blind friendly palette - Tritanopia

Left: Normal vision, Right: Tritanopia

IMAGE SOURCE

The Tritanopia color spectrum looks like this:

Tritanopia color spectrum

SOURCE

Complete Color Blindness

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.

Complete color blindness

IMAGE SOURCE

Why is color so important in data visualization?

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.

Disney color wheel



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.

Color blind friendly palette - editor

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.

Color blind friendly color palette

IMAGE SOURCE

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:

Color blind friendly color palette

IMAGE SOURCE

Better yet, we’ve put together some versatile color blind friendly palettes:

Color blind friendly color palette



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.

Color blind friendly palette - Problematic colors



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.

Color blind friendly palette - template



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.

Color blind friendly palette - bar chart

IMAGE SOURCE

Venngage’s drag-and-drop design editor features a library of patterns you can use to enhance your design and make it more accessible.

Venngage editor - patterns

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.

Color blind friendly palette - icons



Hot Tip: Venngage’s library includes over 4,000 icons you can use to make your infographics and charts more accessible.

Color blind friendly palette - icons

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.

Color blind friendly palette - template



Color blind friendly palette - template



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.

Related blog posts:

6 Ways to Use Infographic Icons Like a Pro

The Do’s And Don’ts of Infographic Color Selection

How to Pick Colors to Captivate Readers and Communicate Effectively