HEX and RGB Colour Codes Explained, With Contrast Tips for Readable Design
How colour codes work, how to read and choose them, and how to pick text and background colours that people can actually read.
How screens make colour
Screens create every colour by mixing three lights: red, green and blue. Each light has a brightness from 0 (off) to 255 (full). Mixing all three at full gives white; all at zero gives black. A colour is therefore three numbers, such as rgb(31, 157, 85), a medium green: little red, a lot of green, some blue. That gives 256 × 256 × 256, about 16.8 million, possible colours.
What a HEX code is
A HEX code writes the same three numbers in base 16, which uses the digits 0–9 and letters A–F. Each colour takes two characters: #1F9D55 means red = 1F (31), green = 9D (157), blue = 55 (85). So #000000 is black, #FFFFFF is white, #FF0000 is pure red. Shorthand like #0F0 doubles each digit (to #00FF00). The Color Picker shows both forms so you can copy the one your tool needs.
Building a simple palette
Start with one main colour for buttons and links. Add a dark neutral for text (a very dark grey is gentler than pure black), a light neutral for backgrounds, and one accent for alerts or highlights. Limit yourself to two or three colours plus neutrals. A palette used consistently looks professional. Write your codes down and reuse them exactly, so shades do not drift across pages.
Contrast: the most important rule
Colour is not only decoration; it decides whether people can read your page. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between text and background from 1:1 (identical) to 21:1 (black on white). Level AA requires at least 4.5:1 for normal text and 3:1 for large text (about 24 pixels, or 19 pixels bold). The stricter level AAA asks for 7:1.
Light grey on white and mid-green on white often fail. Check your pairs with a contrast checker, and make sure they pass in both light and dark themes. Good contrast helps everyone, especially people with low vision, and anyone using a phone in sunlight.
Do not rely on colour alone
About one in twelve men and one in two hundred women have some form of colour vision deficiency, often red–green. A red error message and a green success message may look alike. Add a symbol, a label or a pattern as well as colour: 'Error:' with an icon, for instance. Charts should use different shapes or direct labels as well as colours.
Colour in images and QR codes
Converting images between formats may slightly change colours if the colour profile is unusual; if a brand colour must be exact, use PNG or lossless WebP and check the result. For QR codes, keep strong contrast: dark modules on a light background. Coloured codes can work if the dark colour is much darker than the background, but always test them before printing.