How Colour Codes Work
Computer screens mix red, green, and blue light to produce every visible colour. The three common notation systems (HEX, RGB, and HSL) are simply different ways to express the same underlying RGB values.
HEX encodes R, G, and B as two-character hexadecimal numbers (0-9, a-f) concatenated into a six-character string prefixed with #. The range 00 to ff in hex corresponds to 0 to 255 in decimal. A shorthand three-character form exists where each digit is doubled: #39f is the same as #3399ff.
RGB expresses each channel as a decimal integer from 0 (none) to 255 (full intensity). The CSS function is rgb(r, g, b). The total number of colours representable is 256 x 256 x 256 = 16,777,216.
HSL was designed to be more intuitive for humans. Hue is the pure colour position on a 360-degree wheel (0 and 360 are red, 120 is green, 240 is blue). Saturation is how vivid the colour is as a percentage (0% is greyscale, 100% is fully saturated). Lightness describes how bright it is (0% is black, 100% is white, 50% is the full colour). Designers often prefer HSL because adjusting a single property produces predictable results.
Conversion Formulas
| Conversion | Method |
|---|
| HEX to RGB | Parse each 2-char hex pair with parseInt(pair, 16). Short codes: double each digit first. |
| RGB to HEX | Convert each 0-255 integer to a 2-digit hex string: channel.toString(16).padStart(2,'0'). |
| RGB to HSL | Normalise to 0-1. L = (max+min)/2. S = (max-min)/(1-|2L-1|) when max != min. H from dominant channel. |
| HSL to RGB | C = (1-|2L-1|) x S. X = C x (1-|(H/60) mod 2 - 1|). Rotate (C,X,0) by H sector, add m = L - C/2. |
Worked Example (Default Values)
Starting with #3b82f6:
- Split into 3b, 82, f6. Convert: 0x3b = 59, 0x82 = 130, 0xf6 = 246. So RGB = rgb(59, 130, 246).
- Normalise: r = 59/255 = 0.2314, g = 130/255 = 0.5098, b = 246/255 = 0.9647.
- max = 0.9647 (blue), min = 0.2314 (red). Chroma C = 0.7333. Lightness L = (0.9647 + 0.2314)/2 = 0.5980 (approximately 60%).
- Saturation S = 0.7333 / (1 - |2 x 0.5980 - 1|) = 0.7333 / (1 - 0.1961) = 0.7333 / 0.8039 = 0.912 (approximately 91%).
- Hue: blue is dominant, H = 60 x ((r - g)/C + 4) = 60 x ((0.2314 - 0.5098)/0.7333 + 4) = 60 x 3.620 = 217 degrees.
- Result: HSL = hsl(217, 91%, 60%).
When to Use Each Format
HEX is the most widely used format in web development and design tools. Use it in CSS for static colour values. RGB is useful when you need to manipulate individual colour channels in code or apply opacity using rgba(r, g, b, a). HSL is ideal when you want to create colour palettes or modify a colour predictably, for example darkening a brand colour by reducing lightness by 10%.
Perceived Brightness
This converter also shows perceived brightness using the W3C relative luminance formula: Y = 0.2126R + 0.7152G + 0.0722B (where R, G, B are linearised). A relative luminance above about 0.179 is treated as a light colour and is best paired with dark text; at or below 0.179 it is treated as dark and is best paired with white or light text. This 0.179 figure is the WCAG crossover point, the luminance at which black and white text give equal contrast, so it predicts the more legible choice more reliably than a simple midpoint would. This is useful for ensuring sufficient colour contrast for accessibility (WCAG 2.1). For the default #3b82f6 the luminance is about 0.235, so the tool treats it as a light colour and suggests black text.
Related Calculators
Sources and method: W3C CSS Color Level 4 specification (w3.org/TR/css-color-4). W3C WCAG 2.1 relative luminance definition (w3.org/TR/WCAG21/#dfn-relative-luminance). Conversions are performed entirely in the browser using standard floating-point arithmetic.
This tool converts colour codes exactly using the standard formulas. Results are correct to the nearest integer for each channel. Minor rounding differences may appear compared to some design software due to different intermediate precision choices.
