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
- –
- OKLCH
- –
- HWB
- –
- Lab
- –
- Nearest named colour
- –
Free forever, no sign-up and no limits, and this tool installs on its own so you can keep it on your home screen.
Paste a colour as HEX, RGB or HSL and read it in every notation at once: the classics plus the modern CSS formats oklch(), hwb() and lab(), a live swatch, the nearest CSS named colour, and the answer designers actually need next: whether white or black text reads better on it, with measured contrast ratios and AA/AAA verdicts.
How to use it
- Paste any format#0F756B, rgb(15, 117, 107) and hsl(174, 77%, 26%) all parse, three-digit hex shorthand too. On supported systems, a pick button lifts a colour straight off your screen.
- Read every notationHEX, RGB, HSL, OKLCH, HWB and Lab side by side, each with its own copy button, plus the closest CSS colour name.
- Check the text verdictWhite-on and black-on contrast ratios, computed the WCAG way, with AA and AAA badges and 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 modern formats, done with the reference maths
CSS gained three colour notations worth knowing. oklch() orders colours by how light they actually look, which is why new design systems define palettes in it. hwb() is the painter's version: a hue plus how much white and black are mixed in. lab() is the long-standing scientific space, the one colour-difference formulas are defined in. This tool derives all three with the matrices from the CSS specification itself, checked against the specification's published sample values, so what you copy here is what a browser computes.
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.
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.
What is OKLCH and why does it matter?
A modern CSS colour notation built on the OKLab colour space, where the lightness number finally means what it says: two colours with the same OKLCH lightness genuinely look equally light, which HSL never managed. That makes it the best format for building palettes, and every current browser supports it. This tool converts with the reference maths, so pure red comes out as the specification's own sample value, oklch(62.8% 0.258 29.2).
How near is the nearest named colour?
CSS defines around 140 colour keywords, from teal to papayawhip. The tool measures distance in OKLab, the space built to match human perception, and names the closest keyword, with its hex so you can see how close it landed. Handy for talking about a colour in words, or for discovering your brand teal is two points off the actual teal.
Why does the same hex look different on two screens?
Because a hex value names a position in a colour space, not a physical colour. Every panel renders that position with its own brightness, gamut and profile, which is why a brand colour should be checked on a phone in daylight before it is signed off, and why the measured contrast figure is worth more than the swatch.