Now Reading
Methods to decide extra stunning colours in your knowledge visualizations

Methods to decide extra stunning colours in your knowledge visualizations

2023-11-30 20:56:14

Selecting good colours in your charts is tough. This text tries to make it simpler.

Selecting good colours in your charts is tough. This text tries to make it simpler.

I need you to really feel extra assured in your colour selections. And when you’ve got no sense of colour in any respect, right here’s my try that can assist you discover good ones anyway. We’ll discuss frequent colour errors I see on the market within the wild and the way to keep away from them.

This isn’t the fitting article for you should you’re looking for good gradients or shades. But when it’s essential to discover stunning, distinctive colours for various classes (e.g., continents, industries, chicken species) in your line charts, pie charts, stacked bar charts, and so on., then learn on.

Index

00 Before we start…
01 Broaden your understanding of colors
02 Don’t dance all over the color wheel
03 Use saturation and lightness to make your hues work
04 Use warm colors & blue
05 When using green, make it a yellow or blue one
06 Avoid pure colors
07 Avoid bright, saturated colors
08 Combine colors with different lightness
09 Make your colors equally “colorful”
10 Avoid too little contrast with the background
11 Avoid too much contrast with the background
12 Choose a background that’s desaturated enough
13 Copy colors, or understand them

Earlier than we begin…

I’ll point out saturation, brightness, and hue quite a bit. The HSB (Hue, Saturation, Brightness) or HSV (Hue, Saturation, Value) colour areas work pretty effectively to verify them:

  • Hue ranges from 0° to 360° — that’s your typical colour wheel:
  • Saturation ranges from 0% (grey) to 100% (tremendous duper colourful!!):
  • Brightness/Worth ranges from 0% (black) to 100% (the precise colour):

To transform your colours from HEX (e.g. #cc0000) or RGB (e.g. rgb(207, 176, 58)) to HSB/HSV, use a instrument like colorizer.org.

A relative of HSB/HSV is the HCL colour area. It makes use of the identical parameters (Hue, Chroma = saturation, Lightness), however is nearer to “how we actually see colours.” Datawrapper uses the HCL color space for its colour picker:

HCL color picker in Datawrapper

However because you gained’t discover HCL in Adobe Photoshop or colorizer.org, each time I point out levels (like 0°) or percentages, I’ll be speaking concerning the HSB/HSV colour area.

All proper, let’s do that:

Broaden your understanding of colours

You would possibly suppose like this: “I would like 5 colours for my chart. So I’ll use inexperienced and yellow and blue and pink. And… um… perhaps orange? Or purple!”

In the event you haven’t thought a lot about colours because you have been a child coloring in your coloring ebook, this thought is smart. So at the moment I’m right here to let you know: There are extra colours than that.

Take a look at this graphic’s colours and examine them with the fundamental ones :

They’re completely different. The pink that Nadieh makes use of is completely different out of your typical pink . The inexperienced is… are you able to even name it a inexperienced ?

So earlier than we impose guidelines that restrict us, let me freak you out a bit: There are millions of colours you should utilize. There may be yellow-ish pink and blue-ish pink and every part in between. There may be grey , however there may be additionally chilly grey and there may be heat grey . After which there may be blue. A lot blue! Like this , this , this , this and this . And we haven’t even talked about orange and yellow.

You could have heaps of selections. Which suggests you possibly can keep in a small space of the colour wheel and nonetheless have many choices. Which suggests:

Don’t dance everywhere in the colour wheel

There’s no must depend on hues from throughout the colour wheel like in your visualizations. It can look extra skilled — and due to this fact extra reliable — when it solely makes use of a couple of hues and their neighbors.

Right here’s the place it turns into a good suggestion to really have a look at a colour wheel. You should utilize Adobe Color or Color Calculator to take action.

Color Calculator harmonies

Numerous these instruments allow you to select completely different harmonies. One in every of them is known as “sq.” or “tetradic.” Don’t use it. It can lead to too many hues — and we’re on a mission to keep away from that.

Within the video above, I used the colour instrument Paletton to begin with a tetradic concord after which lower the gap. Observe how rather more stunning the colour mixtures change into.

If the gap turns into sufficiently small, you’re principally utilizing complementary colours. And that’s an amazing selection! Numerous complementary colour pairs look implausible collectively. When doubtful, use complementary colours and their neighbors.

So let’s do that — this time with Adobe Colour:

Adobe Color color wheel
Our complementary colours in Adobe Color

Our colours are reverse one another on the colour wheel, in order that they’re clearly complementary. Yay! However they’re additionally unusable: The 2 oranges are approach too related. And every part seems to be so… vivid.

There’s the place we have to change the saturation and lightness:

Use saturation and lightness to make your hues work

Saturation and brightness are as essential as hue. The truth is, you possibly can create new colours once you change simply the saturation and brightness. Listed below are two colour pairs with the identical hue, simply completely different saturation and lightness: / . (In the event you change the hue only a tiny bit, you’ll obtain even higher outcomes: / .)

Let’s come again to our colour mixture: . After enjoying round with the saturation and darkness, it turns into this:

I desaturated the sunshine blue and the lighter orange and made each colour darker besides the lighter orange. Heck yeah, we are able to work with that!

So in case your colour mixture doesn’t look superior but, don’t instantly add one other hue. Change the saturation and lightness first and see if that’s higher.

That’s what I did to all of those colour palettes: and and . They’re all roughly complementary, they usually all include completely different saturations and lightness. That’s what makes them work.

Use heat colours & blue

There’s a complementary colour mixture that’s particularly liked by knowledge visualization designers: yellow/orange/pink and blue. Scroll by means of graphics portfolios like this one from the South China Morning Post or this one by The Economist (PDF), and also you’ll discover that they use these colours way more typically than colours like purple or inexperienced.

Three pages by The South China Morning Post

That’s as a result of these heat colours and blue are tremendous versatile for classes. Yellow and orange and pink look very pleasing collectively, however folks will nonetheless understand them as completely different: — which is precisely what we wish for categorical colours. And blue is extra versatile than another hue. Numerous blues, irrespective of if darkish or mild or saturated or not saturated , look pleasing, calming, {and professional}.

And they’re accessible: colorblind folks can simply distinguish blue and orange/pink from one another.

So when doubtful, use an orange/pink with blue.

When utilizing inexperienced, make it a yellow or blue one

Forest inexperienced covers a full sixth of the colour wheel, from roughly 90° to 150° , with 120° as its peak . Nonetheless, one can find few well-designed visualizations that use it. Why is that?

First, forest inexperienced is simply very darkish. And lightening the forest inexperienced means going into a clumsy neon . So it’s essential to lighten and desaturate inexperienced enormously — greater than different colour — to get to a pleasant one. That’s precisely what the Washington Put up does with their inexperienced right here:

How Trump is rolling back Obama’s legacy in The Washington Put up

It’s a 142° inexperienced, however solely 14% saturated. Right here’s what the identical hue with the identical brightness would seem like 100% saturated: . Yikes.

And bear in mind our colorblind pals: A pure inexperienced together with pink, orange, or brown is tough for them to tell apart.

So when utilizing inexperienced, make it a bit yellow or a bit blue. You’ll be able to see this within the examples on the prime of this text: All the greens besides FiveThirtyEight’s have a hue larger than 160° (= bluer) or lower than 60° (= extra yellow) . Nadieh makes use of each yellow-green and blue-green on this venture we’ve already seen:

Appears like you should utilize them in your visualization as two completely different colours, as Nadieh does: Win-win!

Keep away from pure colours

“Pure” hues are those which might be situated at precisely 60°, 120°, 180°, 240°, 300°, or 360°/0° within the colour wheel:

Right here’s an instance: In HSV/HSB, the Hue worth of this vivid blue is 180°, the Saturation worth is 67%, and the Lightness worth is 91%. You can too verify the RGB values of your colour: If no less than two of the values are the identical, they’re “pure”. For instance, our is a rgb(77, 232, 232).

To make your colours look extra pure and pleasing to your readers’ eyes, you possibly can both tone down the saturation of pure colours or make them darker. If you wish to have vivid, saturated colours, depend on combined colours no less than 5-10° away from the pure hues.

Within the picture above, the pink and orange, the blues and the greens have the identical saturation and lightness. The one distinction is the hue: The pink (0°), blue (240°), and inexperienced (120°) look extra colourful than the orange (40°), medium blue (211°), and blue-ish inexperienced (170°).

Keep away from vivid, saturated colours

Neon colours will certainly appeal to the eye of readers. However these readers gained’t thanks. Most of us get a bit wired after we see them: “Extremely saturated, mild colours will NOT be acceptable [to communicate] Severe or Belief, or Calm,” researchers Bartram, Patra, and Stone clarify of their paper “Affective Colour in Visualization” from 2017 (PDF).

In case your colours come near 100% saturation and 100% brightness, it’s doubtless your colours are too colourful. That’s undoubtedly the case for pure colours like .

“However I’ve seen such loopy colours earlier than, they usually look good,” you would possibly say, and check with tasks like these:

New York Times article on music playlists
Bloomberg article on bankruptcies
The Pudding article on celebrities

However should you examine the colours from these examples with colours like , you see how the previous ones are all much less saturated or darker. A 100% saturated and 100% vivid inexperienced turns into much less saturated within the New York Occasions , and fewer saturated and darker in each the Bloomberg article and the Pudding article .

They’ve the identical enjoyable, attention-grabbing impact as neon colours have, whereas being simpler on the attention.

This works kind of as a result of the folks at The Pudding, The New York Occasions, and Bloomberg are nice designers. When doubtful, keep away from 100% saturation mixed with 100% lightness.

Mix colours with completely different lightness

I generally see charts — particularly space charts — the place neighboring components have the identical lightness. You’ll be able to simply verify this: Simply convert your colours to black & white (e.g., with an exterior colorblindness simulator or with our Datawrapper colorblind check). If all of them have the identical grey, they’re the identical lightness.

For instance, the from the far left chart seem like in grayscale.

See Also

To keep away from that uninteresting and eye-hurting expertise, you may have two choices:

  • “Get it proper in black & white”: change the darkness of every space, making some brighter and a few darker, like so: . They seem like this in grayscale:
  • Separate the areas, e.g., with a white border

I extremely suggest the primary possibility (you possibly can nonetheless put a white border round it should you just like the model): The colours will look extra dynamic, and colorblind folks will thanks. Truly, everybody will thanks, no matter their color-seeing talents.

The truth is, a legitimate option to decide colours for categorical knowledge is to choose colours from gradients like these ones:

Viridis colour schemes

All these gradients transfer easily from mild to darkish, so colours you decide from there’ll all have a unique lightness: or . Do that Color Palette Generator should you’re a fan of that strategy.

Make your colours equally “colourful”

In your visualizations, you typically need colours to face out. There are other ways to realize that. Colours stand out:

  • as a result of they’re approach darker
  • as a result of they’re approach lighter
  • as a result of they’re extra saturated
  • as a result of they’re extra “pure”

However you normally simply need one or two colours to face out. Most of your colours are alleged to be kind of equally attention-grabbing.

In the event you’re utilizing colours with completely different lightness (“Get it proper in black & white”), you’ll must steadiness them out. Attempt to desaturate vivid colours. Put extra saturation in darkish colours.

Or select a much less pure hue: within the picture above, the inexperienced and blue are very pure, so I darkened them. (Right here’s how they appear with 100% brightness: .)

I then needed to convey a pink in… however the vivid pink would have been too intense as a pure hue (at 0°) . So I had two choices:

  1. merely darken it: .
  2. transfer the hue (and simply the hue) to 30° to make it extra orange .

I selected the second choice to make it look a bit extra pleasant. However each choices work.

Keep away from too little distinction with the background

A stunning variety of charts on vivid backgrounds use very pastel-ish colours. They’re typically not very saturated, and awfully mild.

That comes with issues: In the event you work with small areas like strains and dots, mild and desaturated colours may be laborious in your readers to tell apart. However even when legibility shouldn’t be a difficulty — e.g. for larger areas — your visualizations ought to have sufficient visible distinction with the background to confidently talk: “Hey, I’m right here, and I’ve one thing to say.”

Right here’s what to do when your colours are too desaturated and lightweight :

  • Enhance the saturation:
  • Make them darker:
  • Or do each for the very best outcome:

In fact, that’s additionally a matter of style. However should you’re unsure in case your colours are too pastel-ish, merely attempt to make them extra saturated and darker. Simply see the way it feels. And if it feels good, maintain it.

Keep away from an excessive amount of distinction with the background

The other is true, too: Don’t make your colours too darkish and saturated once you’re utilizing a vivid background. If doubtful, strive it out. Make your colours lighter, pull some saturation out of them and see the way it feels.

Select a background that’s desaturated sufficient

When you change into extra assured with colours, colourful backgrounds can appear to be a good suggestion. However they arrive with two massive drawbacks: First, they simply distract out of your knowledge. Second, they’re limiting your potential colour palette and are due to this fact laborious to work with. The truth is, the extra saturated your background, the more durable it will get — so desaturated colours are your finest wager. Listed below are some guidelines of thumbs for the HSB/HSV colour area:

  • In order for you a light-weight background, keep away from colours under 95% lightness and above 7% saturation.
  • In order for you a darkish background, keep under 20% saturation. Additionally, don’t go full black — maintain your lightness between 10% and 25%.

Copy colours, or perceive them

Choosing good colours is tough. It’s completely alright to be unhealthy with colours, to maintain being unhealthy with colours, and to simply copy colours. Critically, there’s no disgrace in stealing. I wrote a whole article about the place to get inspiration for colours: From films, artists, colour palettes others have created, and so on. (And will I add: Different knowledge visualizations are a superb supply.)

In the event you do wish to construct a greater intuitive understanding of which colours match effectively collectively, do that: Analyze them. Some methods to try this embody:

photo of a tree
Picture by niko photos on Unsplash
  • Choose an image with colours you think about stunning, like an artwork piece or photograph of nature. Then decide colours out of them with an eyedropper instrument, e.g., in Photoshop or image-color.com. Attempt to use them in your subsequent chart.
  • Set up Adobe Capture, which is similar thought however for “dwell photographs”: It allows you to seize colours out of your atmosphere. (It’s fascinating to see how desaturated many colours are round us!)
  • Play “guide colour picker”: Search for your display. Which colours do you see? How darkish and the way saturated are there? Which hues are shut by; which of them are reverse on the colour wheel?
  • Decide colours from stunning knowledge visualizations. Change a couple of colours. Do they nonetheless work effectively collectively?

Additionally, the subsequent time you’re creating an information visualization and also you’re not completely happy along with your colours, analyze them within the HSV/HSB colour area, e.g., with colorizer.org:

  • How saturated are they — and do they appear higher should you improve or lower the saturation by a couple of (or a whole lot of) share factors?
  • Which hue worth have they got? What occurs should you change the hue by only a few levels?
  • Are your colours in another way vivid?

With time, your understanding will transfer from “that’s stunning, however I don’t know why” to “that’s stunning, as a result of…” And also you’ll discover that you may break increasingly of those guidelines I defined right here — and nonetheless create nice colour mixtures.


I hope this text was useful! If you wish to proceed studying: There are fairly some articles on this weblog about colour, e.g. about colors for gender, colors for political parties, colorblindness (part 1, 2, 3), and what to consider in general when using colors in your visualizations. If there’s an amazing trick this text is lacking, let me know at lisa@datawrapper.de or within the feedback under.



Source Link

What's Your Reaction?
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0
View Comments (0)

Leave a Reply

Your email address will not be published.

2022 Blinking Robots.
WordPress by Doejo

Scroll To Top