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:

LCH: 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 LCH color space (a color space is simply a way to organize colors, like RGB or CMYK).

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.

HEX 

Below the LCH 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 LCH 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 there's also a way to adjust the opacity in the color hex code itself: You can add an additional 2-digit-hex code between FF and 00 to (0 to 255 in hexadecimal) to your 6-digit hex code to make your color more transparent: Here are the two digits you can add to your color hex code for the most important opacities: 

To calculate a certain opacity yourself. use the formula 255/100*[your desired opacity], e.g. 255/100*80 = 204. Now use a Decimal to Hexadecimal converter like this one to covert your decimal 204 to the hexadecimal equivalent: In our case, the decimal 204 is the same as the hexadecimal "CC". Now simply add that cc to your color code.