Colours on a screen
Every colour on a screen is a mix of red, green and blue light, each from 0 to 255. That gives the RGB value, and writing the three numbers in hexadecimal gives the familiar hex code used on the web. HSL describes the same colour as hue (the position on the colour wheel in degrees), saturation (how vivid) and lightness (how bright), which is often easier to reason about when you want a lighter or duller shade.
CMYK is used in print. It describes how much cyan, magenta, yellow and black ink to use. The conversion here is the simple mathematical one. A real printer uses colour profiles, so printed colours can differ.
A worked example
Mix #2F44D0 (a strong blue) with #F97316 (orange) at 50%. The red channels are 47 and 249, so the mix is 148. Green is 68 and 115, so 91.5, and blue is 208 and 22, so 115. That is RGB (148, 92, 115), which is #945C73, a muted mauve. Its contrast with white text is about 5.2:1, which passes AA, so it is readable for normal text.
Checking readability
Choosing text and background colours is where the contrast ratio helps. The result shows the ratio for the mixed colour against both white and black text. The better of the two is the safer text colour, and if neither reaches 4.5:1 the colour is a poor background for small text.
For wall and room projects, the paint calculator works out how much you need once you have chosen a colour.
Questions people ask
How do I convert a hex colour to RGB?
A hex colour is three pairs of hexadecimal digits for red, green and blue. Convert each pair from base 16 to base 10. For #2F44D0, 2F = 47, 44 = 68 and D0 = 208, so the RGB value is 47, 68, 208. Short hex codes such as #FA0 repeat each digit, so #FA0 means #FFAA00.
How does the colour mix work?
The mix is a straight blend of each channel. At 50% the red, green and blue values of the two colours are averaged. Red (255, 0, 0) and blue (0, 0, 255) at 50% give (128, 0, 128), which is #800080, a purple. Move the slider to take more of one colour.
What is a complementary colour?
It is the colour opposite on the colour wheel, found by turning the hue 180 degrees and keeping the saturation and lightness. Complementary pairs, such as blue and orange, create strong contrast and are often used together in design.
What does the contrast ratio mean?
Contrast ratio compares the brightness of two colours, from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines ask for at least 4.5:1 for normal text (level AA) and 7:1 for the stricter level AAA. Large text only needs 3:1 for AA.
Why does mixing here differ from mixing paint?
Screens make colour by adding light, but paint absorbs light, so the results of mixing differ. Blue and yellow light make a grey-ish tone on screen, while blue and yellow paint make green. The calculator shows what a digital blend looks like.