How to pick colors in Datawrapper
In Datawrapper charts, you'll find a color picker you might haven't seen in other software you're using. Here's an explanation of how it works:
Lightness, Chroma, Hue
The three stripes of the color picker let you pick, from top to bottom:
- Lightness: How bright or dark your color is, from almost black to pure white
- Chroma: How saturated and "colorful" your color is, from grey (no color at all) to a fully saturated color. These values are relative to the chosen hue.
- Hue: Which color you want – e.g. blue, red, pink, etc. Imagine the hue stripe to be a flattened color circle: There's no end to it, you can keep moving it to the right or left and you'll always come around to your known colors again.
These are three parameters of the HCL color space (a color space is simply a way to organize colors, like RGB or CMYK). We switched the order, but the color parameters are the same.
Try clicking through the hue and you will notice that you find lots of hues on there:
You might wonder where you can find yellow. Try to move the lightness slider to the right and then click through the hue slider again: Now you should see a yellow. Some colors are only visible once you change the saturation or lightness. That's because hue and saturation and lightness are very much connected in creating what we know as "a normal red" or "a normal yellow".
So how do you use it? Here are three examples:
- If you need a medium-dark blue, set the lightness to medium-dark before finding blue on the hue picker.
- If you need a bright grey, set the saturation to 0 and then the lightness to light.
- If you need a neon pink, find a color between red and blue, then set the saturation to 100%.
- If you need a light pastel color, set the lightness to bright and the saturation to low and then find a good hue.
Below the HCL picker, you'll find a HEX code. A HEX code is a conversation of the RGB color space (Wikipedia has a good explanation of how that works) and starts with a #, like so: #cc0000 (red), #000000 (black) or #f9f9f9 (light grey).
As soon as you move the sliders on the HCL picker, you'll see that the color gets also shown as a hex code. You can copy & paste a hex code in there, e.g. the hex code of your company colors. Or you can write web color names in there:
Changing the opacity
In some chart types (e.g. scatterplots), you can decide how translucent you want your chart elements to be with a slider. But you can always adjust the opacity in the color hex code itself: Simply add a number between 01 and 99 at the end of the hex code, to set colors to 1% and 99% opaque.