Color converter

How do I convert HEX to RGB?

Split the six digits into three pairs and read each as a hexadecimal number: #1A7FB5 is 1A = 26, 7F = 127 and B5 = 181, so rgb(26, 127, 181).

What is HSL?

Hue (0–360° around the color wheel), saturation and lightness (both in percent). The same color is hsl(201°, 75%, 41%) — often easier to adjust than RGB.

What is a three-digit hex code?

A shorthand where each digit is doubled: #ABC is #AABBCC.

What contrast does text need?

The Web Content Accessibility Guidelines ask for at least 4.5 : 1 for normal text (AA). #767676 gray on white is 4.54 : 1 — just enough; #1A7FB5 on white is 4.42 : 1 — just short.

Are these colors exact on every screen?

The numbers are exact, but screens differ. The codes are sRGB, the standard for the web and CSS.

What does the contrast ratio mean?

WCAG defines it as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors, from 0 for black to 1 for white. The ratio runs from 1 : 1 (no contrast) to 21 : 1 (black on white). Level AA asks for 4.5 : 1 for normal text and 3 : 1 for large text and for user interface components; level AAA asks for 7 : 1 and 4.5 : 1.

How do I make a color darker or lighter?

In HSL, lower or raise the lightness while keeping hue and saturation. That keeps the same basic color. Changing the RGB values by the same amount also works, but it can shift the apparent hue.

Is HSL the same as HSB or HSV?

No. HSL and HSB (also called HSV) both use hue and saturation, but they define the third value and the saturation differently, so the same color has different numbers in each. Design tools often use HSB; CSS uses HSL.

How the conversion works

A hex code is three bytes in base 16: the red, green and blue values from 0 to 255. To get HSL, the largest and smallest of the three values (scaled to 0 to 1) give the lightness as their average, and the saturation and hue come from the spread between them and which color is largest. The contrast ratio uses the relative luminance, a weighted sum of the linearized channels: 0.2126 for red, 0.7152 for green and 0.0722 for blue, which reflects how much more the eye responds to green. The colors are sRGB, as in CSS.

Worked example

Take #E8590C. The pairs E8, 59 and 0C are 232, 89 and 12, so it is rgb(232, 89, 12). In HSL it is hsl(21°, 90%, 48%), and converting back gives #E8590C again. Its contrast is 3.58 : 1 against white and 5.87 : 1 against black, so black text is the better choice here. Lowering the lightness by 20 points to 28% gives #873407, which has a contrast of 8.32 : 1 against white.

Common mistakes

• Reading the hex digits as decimal. The pair 59 is 5 × 16 + 9 = 89, not 59.
• Judging contrast by eye. Colors that look different can still fail the 4.5 : 1 test, and a pair on a screen at full brightness looks different from a phone in sunlight. Use the ratio.
• Forgetting rounding. HSL values are rounded to whole numbers on screen. Converting a rounded HSL back can differ by one in a channel.

Sources and related calculators

Color models: CSS Color Module Level 4 (W3C) for sRGB and HSL; contrast: Web Content Accessibility Guidelines 2.x, success criteria 1.4.3 and 1.4.11. Related: hex calculator, binary converter and number base converter.