Colour Converter
With the WCAG contrast that decides readability.
Convert Colour. With the WCAG contrast that decides readability. States the assumption instead of hiding it.
Three or six digits, with or without the hash.
Hex
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%)
Relative luminance applies gamma correction before weighting the channels, which is why a naive average of R, G and B gives the wrong answer. Green contributes 71% of perceived brightness, red 21% and blue only 7% — so pure yellow is far brighter than pure blue despite both being fully saturated. WCAG AA requires 4.5:1 contrast for body text and 3:1 for large text; AAA requires 7:1. The maximum possible is 21:1, which is pure white on pure black. HSL and HSV both describe the same colours differently. HSL's lightness runs from black through the pure hue to white; HSV's value runs from black to the pure hue only, which is why HSV is more common in colour pickers and HSL in CSS.
How the Colour Converter works
Hex, RGB, HSL and HSV conversion with relative luminance and WCAG contrast ratios. The luminance formula weights green at 71% and blue at 7%, which is why a naive channel average gives the wrong answer.
Also known as: hex to rgb converter · rgb to hsl converter · wcag contrast checker · what text colour on this background
Frequently asked questions
How do I convert hex to RGB?
Each pair of hex digits is one channel from 0 to 255. #FF0000 is 255 red, 0 green, 0 blue. Three-digit shorthand doubles each digit, so #F00 expands to #FF0000.
What is relative luminance?
Perceived brightness, gamma-corrected and weighted by channel — 21% red, 72% green, 7% blue. It is why pure yellow looks far brighter than pure blue despite both being fully saturated.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for body text and 3:1 for large text; AAA requires 7:1. The maximum possible is 21:1, which is pure white on pure black.
What is the difference between HSL and HSV?
HSL's lightness runs black → pure hue → white; HSV's value runs black → pure hue only. HSV suits colour pickers and HSL suits CSS, which is why both survive.
Why does my colour look different on another screen?
Because hex values are device-dependent without a colour profile. The same #3B82F6 renders differently across displays and colour spaces, which is what sRGB and Display P3 exist to pin down.
Put this calculator on your own site
Free to use, on any site, commercial or not. Paste this where you want it to appear. It is a plain iframe, so it works in WordPress, Squarespace, Wix, Webflow, Ghost and anything else that accepts HTML.
<iframe src="https://www.thecalclibrary.com/embed/color-converter-calculator" width="100%" height="640" style="border:1px solid #e2e8f0;border-radius:12px" loading="lazy" title="Colour Converter"></iframe>
<p style="font:13px/1.5 system-ui,sans-serif;margin:6px 0 0;color:#64748b">Powered by <a href="https://www.thecalclibrary.com/color-converter-calculator" style="color:#64748b">Colour Converter</a> from The Calc Library</p>The only condition is that the credit line below the frame stays in place. That one line is what pays for the tool being free — it is how anyone else finds it.