Color Converter
Convert a colour between HEX, RGB and HSL and check its relative luminance for contrast work.
Inputs
Accepts #rgb, #rrggbb or rgb(r, g, b).
HEX
#6d5efc
RGB
rgb(109, 94, 252)
HSL
hsl(246, 96.3%, 67.8%)
Red
109
Green
94
Blue
252
Hue
245.7°
Saturation
96.3%
Lightness
67.8%
Relative Luminance
0.1828
Contrast vs White
4.51:1
Contrast vs Black
4.66:1
Better Foreground Text
Black text
Step by step
Channels
#6d5efc → R 109, G 94, B 252
= rgb(109, 94, 252)
HSL conversion
hue from the dominant channel, L = (max + min) / 2
= hsl(246, 96.3%, 67.8%)
Relative luminance (WCAG)
0.2126·R + 0.7152·G + 0.0722·B on linearised channels
= 0.1828
Best foreground text
white 4.51:1 vs black 4.66:1
= Black text
How it works
HEX and RGB describe the same thing — three 8-bit channels — so converting between them is pure notation. HSL is a cylindrical remapping of that cube: hue is the angle of the dominant channel, lightness is the midpoint of the brightest and darkest channel, and saturation is how far the colour sits from grey at that lightness. Relative luminance is the perceptual weighting defined by WCAG 2.1: each channel is linearised out of sRGB's gamma curve and then weighted 0.2126 / 0.7152 / 0.0722, because human vision is far more sensitive to green than to blue. That luminance is what contrast ratios are built from, which is why it decides whether white or black text is more legible on this colour.
Formulas
Relative luminance (WCAG 2.1)
L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin
- R_lin
- Red channel linearised out of the sRGB gamma curve
- G_lin
- Green channel, linearised
- B_lin
- Blue channel, linearised
Contrast ratio
ratio = (L_lighter + 0.05) / (L_darker + 0.05)
- L_1
- Relative luminance of the lighter colour
- L_2
- Relative luminance of the darker colour
HSL lightness
L = (max(R,G,B) + min(R,G,B)) / 2
- max(R,G,B)
- Largest normalised channel value
- min(R,G,B)
- Smallest normalised channel value
Frequently Asked Questions
Why does HSL lightness differ from perceived brightness?
HSL lightness is a geometric midpoint of the channel extremes and ignores how sensitive the eye is to each primary. Pure yellow and pure blue both sit at 50% lightness, yet yellow looks far brighter — that difference is what relative luminance captures.
What contrast ratio do I need to pass WCAG?
WCAG 2.1 AA requires 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1.
Are 3-digit hex codes lossless?
Only for colours whose channel bytes are duplicated pairs. #abc expands to #aabbcc, so the shorthand can express just 4,096 of the 16.7 million sRGB colours.
Does this handle alpha channels?
An alpha component in an rgba() value is parsed but ignored, because luminance and contrast are only meaningful once the colour has been composited over a known background.