Color Converter (HEX ↔ RGB ↔ HSL)
Paste a colour in any format and get all the others, with a live swatch — HEX, RGB and HSL in one place.
- RGB
- —
- HSL
- —
Fast, easy and free — your answer appears as you type, and whatever you enter stays on your device.
Paste a colour as HEX, RGB or HSL and read it in all three at once, with a live swatch — plus the answer designers actually need next: whether white or black text reads better on it, with the measured contrast ratios.
How to use it
- Paste any format#0F756B, rgb(15, 117, 107) and hsl(174, 77%, 26%) all parse — three-digit hex shorthand too.
- Read all threeThe swatch confirms it is the colour you meant; each format has its own copy button.
- Check the text verdictWhite-on and black-on contrast ratios, computed the WCAG way, with the winner named.
Three notations, one colour
Every colour on the web is a red-green-blue triple; the notations are habits of different workflows. Hex is compact and universal — the format of brand guides and CSS tradition. RGB is explicit and what JavaScript manipulates. HSL reshapes the same data around how people think about colour, which makes palette work tractable. Fluency is not choosing one; it is converting without friction, which is the whole tool.
The contrast verdict, up front
The question that follows "what is this colour?" is nearly always "can I put text on it?" — and it is a question with a formula, not an opinion. The tool computes WCAG luminance for the colour and reports the contrast of white and black text against it. This site's own palette was built with exactly this check, and two of its first colour choices failed it; measured ratios beat designer confidence every time. If the winning ratio is still under 4.5:1, the colour needs darkening or lightening before it carries words — HSL's L dial, one field over, is the lever.
Colours you paste stay on your device.
Questions people ask
What do the six hex digits mean?
Three pairs — red, green, blue — each from 00 to FF (0 to 255). #0F756B is 15 red, 117 green, 107 blue: heavy on green and blue, so a teal. The shorthand #ABC expands each digit: #ABC = #AABBCC.
When should I use HSL instead?
When you are designing rather than specifying. HSL's dials are human: hue is the colour wheel position, saturation the intensity, lightness the brightness. Making a hover state slightly darker is 'drop L by 8' in HSL and inscrutable arithmetic in hex — which is why design systems increasingly define palettes in HSL and ship hex.
Are HEX and RGB the same thing?
Identical values in different clothes — hex is just RGB written in base 16. Conversion between them is lossless in both directions. HSL round-trips can drift by a single RGB point due to rounding, visible to no one.
How is the white-or-black verdict computed?
By WCAG relative luminance, the standard accessibility formula — the same maths auditors use. Body text needs 4.5:1 against its background; the tool shows both ratios so you can see not just which wins but whether either is actually sufficient.
Why does my brand colour fail both?
Mid-tone colours — luminance near the middle — can sit under 4.5:1 against white and black alike. It means the colour works for decoration but not behind text; the fix is a darker or lighter variant for text duty. Finding that out here is cheaper than in an audit.
Is anything sent anywhere?
No — parsing and conversion run on your device.