HEX, RGB and HSL colour converter
Hexadecimal, RGB and HSL, all three ways. Plus the contrast, which is what decides whether readable text fits on top.
Your figures
Result
- RGB
- rgb(156, 74, 6)
- HSL
- hsl(27, 93%, 32%)
- Contrast with white
- 6.18
- Contrast with black
- 3.40
- Recommended text colour
- #FFFFFF
- Relative luminance
- 12.0%
What we assume
- Converted in your browser.
- It works in sRGB, the colour space of the web. Wider spaces such as P3 are not covered.
- Luminance and contrast follow the WCAG 2 formula, the one accessibility tools and audits use.
- Transparency is ignored: if you type
rgba()only the colour is taken. The real contrast of a translucent colour depends on what is behind it. - Rounding to HSL and back can move a value by one unit. That is inherent to the conversion, not a bug.
How it is calculated
The three formats describe the same colour in different ways. Hexadecimal and RGB are the
same thing in another base: #FF0000 is rgb(255, 0, 0), and each pair
of hex digits is one channel from 0 to 255.
Why HSL is easier to think in
HSL describes a colour by hue, saturation and lightness. Lightening a colour in RGB means changing three numbers at once; in HSL you just raise the lightness. That is why palettes are almost always designed in HSL even when they end up written in hex.
Contrast, which is what decides whether it reads
The contrast ratio runs from 1:1 — two identical colours — to 21:1, pure black on pure white. WCAG asks for 4.5:1 for normal text and 3:1 for large text; AAA raises it to 7:1. You get the contrast against white and against black here, which answers «what colour text do I put on this?».
An example
#9C4A06 is rgb(156, 74, 6) and hsl(27, 93%, 32%).
Its contrast with white is 6.18:1, so white text goes on top and it clears AA
comfortably.
Frequently asked questions
What contrast do I need?
4.5:1 for normal text and 3:1 for large text — from 18 pt, or 14 pt bold. That is level AA, which is what most regulations require. AAA asks for 7:1.
Why does converting to HSL and back change a digit?
Because HSL is expressed in whole degrees and percentages, and precision is lost there. Coming back, the colour can land one unit off the original in some channel. It is inherent to the rounding.
Does it work with translucent colours?
The rgba() notation is accepted but the alpha channel is ignored. The real contrast of a translucent colour depends on the background behind it, so it would have to be calculated on the resulting colour.
What about named colours like «rebeccapurple»?
Not yet. There are 148 of them, and for now the tool works with the three numeric notations, which are the ones used when designing.
Keep calculating
All tools →- Number base converter Binary, octal, decimal and hex, both ways. With genuinely large integers: 64-bit values come out exact.
- Data size converter Bytes, KB, MB, GB… and KiB, MiB and GiB too. Both systems side by side, which is the only way to see why your 1 TB drive shows 931 GB.
- Unix timestamp converter Timestamp to date and date to timestamp. If the number is in milliseconds we spot it, which is the mistake that wastes the most time.
Updated on 2026-09-02. Calculations run in your browser; nothing you type is sent to a server.