How To Convert Colors

A digital colour is three numbers describing how much red, green and blue light to emit. Screens mix those three primaries additively, which is why every notation eventually resolves to an RGB triple.

The hex notation packs those three numbers into six hexadecimal digits. Each channel takes two digits, running from 00 for none to FF for full, so a hex code is exactly three bytes written in the base sixteen shorthand common in computing.

Hex is written in red, green and blue order, so the first pair is red. A value like #3B82F6 means red 3B, green 82 and blue F6, which is 59, 130 and 246 in decimal.

A three-digit hex code is a shorthand where each digit is doubled. #F0A is the same as #FF00AA. The shorthand only works when both digits of every pair are identical, so it cannot express most colours.

The RGB notation writes the same three numbers directly, either as integers from 0 to 255 or as percentages. It is easier to read and to generate in code, which is why it is common in scripts and inline styles.

HSL takes a different approach. Hue is an angle from 0 to 360 degrees around a colour wheel, saturation is how far the colour is from grey, and lightness is how close it is to white or black.

HSL is the notation that matches how people describe colour. Making a colour lighter means raising the lightness, and making it less vivid means lowering the saturation, both of which are single-number changes rather than three.

The conversion from RGB to HSL is a geometric operation on the RGB cube. The maximum and minimum channel values give the lightness and the saturation, and which channel is the maximum determines the hue sector.

Saturation in HSL is not the same as perceived vividness. Two colours with the same saturation value can look quite different because the eye is far more sensitive to green than to blue, which is what the luminance calculation accounts for.

Relative luminance is a weighted sum of the three channels after a gamma correction, using weights of about 0.2126 for red, 0.7152 for green and 0.0722 for blue. It is the basis of every contrast calculation in accessibility guidance.

The contrast ratio compares the luminance of two colours, running from 1 to 1 for identical colours up to 21 to 1 for black against white. The WCAG guidelines require 4.5 to 1 for normal body text and 3 to 1 for large text.

Contrast matters more than colour choice for readability. A stylish low-contrast palette can make text unreadable for someone with reduced vision or a screen in bright sunlight, and the ratio is the objective measure of that risk.

The calculator takes a hex code, RGB sliders or a colour picker, keeps them in step, and shows the hex, RGB and HSL values together with the contrast ratio against white and black.