Color Converter
Convert a colour between HEX, RGB and HSL and check its relative luminance for contrast work.
About Color Converter
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
Worked example
With the default values below, Color Converter returns HEX of #6d5efc. Change any input above and every figure here is recalculated in your browser.
Inputs used
- Colour
- #6d5efc
Results
- 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
- 1Channels= rgb(109, 94, 252)
- 2HSL conversion= hsl(246, 96.3%, 67.8%)
- 3Relative luminance (WCAG)= 0.1828
- 4Best foreground text= Black text
Assumptions and limits
- The result is derived only from the single input listed above. Anything not among them is not part of the calculation.
- In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
- Figures are rounded for display to 4 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.
How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.
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.