Color tools, ideas and good advice.

HEX, RGB or HSL: which color code should you use?

Reading time: about 3 minutes

If you have ever copied a color from a design, you have seen codes like #3A86FF, rgb(58, 134, 255) and hsl(217, 100%, 61%). All three describe exactly the same blue. They are just different ways of writing it.

RGB: three amounts of light

Screens make color by mixing red, green and blue light. RGB gives the amount of each from 0 to 255. rgb(255, 0, 0) is pure red, and rgb(255, 255, 255) is white because all three lights are at full power.

HEX: RGB in a shorter form

HEX writes the same three numbers in base 16, using two characters each. 255 becomes FF, so rgb(255, 0, 0) turns into #FF0000. It is short and easy to copy, which is why it is the most common code on the web.

HSL: how people think about color

HSL stands for hue, saturation and lightness. Hue is the position on the color wheel, saturation is how strong the color is, and lightness is how light or dark it is. This makes HSL the best choice when you want to make a color a little darker or softer: you change one number and nothing else.

Our advice

Use HEX when you copy and paste colors, and HSL when you want to adjust or build a family of shades. Use RGB when a tool asks for it. You can convert between them any time with the RGB ⇄ HEX converter or the Color Picker.

How to choose text colors people can actually read

Reading time: about 3 minutes

A beautiful color combination is useless if people cannot read the words. Good contrast helps everybody: people with low vision, older readers, and anyone using a phone in bright sunlight.

What contrast means

Contrast is the difference in brightness between the text and its background. It is measured as a ratio from 1:1 (no difference) to 21:1 (black on white). The web accessibility guidelines (WCAG) ask for at least 4.5:1 for normal text and 3:1 for large text.

Three quick rules

• Avoid mid-tones on mid-tones. Gray on blue or orange on red can look stylish but is often very hard to read.
• Do not use pure color on pure color. Bright red text on a bright green background vibrates and tires the eyes.
• Check small text first. Footnotes, captions and buttons need the most contrast because they are the smallest.

Test it, do not guess

Your eyes are a poor judge on a good monitor. Type your two colors into our Contrast Checker and it tells you immediately whether they pass, and suggests a nearby color that does.

Why mixing colors on a screen is different from mixing paint

Reading time: about 3 minutes

At school we learn that blue and yellow make green. On a screen, that does not always work, and the reason is interesting.

Paint takes light away

Paint and ink are pigments. Each pigment absorbs some colors of light and reflects the rest. Mixing two pigments absorbs more, so the result gets darker. This is called subtractive mixing.

Screens add light

A screen starts dark and adds red, green and blue light. Mixing two colors of light makes something brighter. This is called additive mixing. Red and green light together make yellow, which surprises many people.

Which is right for you?

If you design for screens, think in light. Our Color Mixer offers three blending styles so you can see the difference for yourself. The Hue blend style travels around the color wheel, which is the closest to what people expect from paint.

5 simple rules for choosing a color palette

Reading time: about 2 minutes

1. Start with one main color. Choose the color that matches the feeling you want: blue for trust, green for nature, orange for energy.
2. Add one accent. Pick a color from the opposite side of the Color Wheel for buttons and highlights.
3. Add neutrals. Whites, grays and near-blacks do most of the work in a design. Use them for backgrounds and text.
4. Use shades, not new colors. Lighter and darker versions of the same color keep a design calm. The Color Library has ready-made shade scales.
5. Test readability. Check text on every background with the Contrast Checker before you finish.