Color Converter

Enter a color value in HEX, RGB, or HSL format and see it converted to all other formats instantly. All processing happens locally in your browser.

Enter HEX (#rrggbb), RGB (rgb(r,g,b)), or HSL (hsl(h,s%,l%)) - or use the picker.
Copied!

Contrast against plain backgrounds

On white
On black

About Color Formats

  • HEX - #rrggbb, the most common CSS color format.
  • RGB - rgb(r, g, b), each channel 0-255.
  • HSL - hsl(h, s%, l%), hue 0-360°, saturation and lightness 0-100%.

Anything the browser understands is accepted, including a name like rebeccapurple, an eight digit hex with alpha, and the space separated form with a slash before the alpha that current CSS uses. The contrast figures follow the WCAG formula for relative luminance, so a ratio of 4.5 is the threshold for normal body text at level AA and 7 is the threshold at AAA. Those figures are calculated against the opaque colour, because a translucent one has no fixed contrast until you know what sits behind it.

Related tools

CSS Minifier / Beautifier Image to Base64 QR Code Generator

Is the markup fighting you?

Escaped entities, mangled encodings and content that renders one way in the CMS and another on the page usually mean something in the pipeline is guessing. We build front ends and the publishing path behind them, so what you write is what a visitor sees.

Talk to us about your site

Frequently Asked Questions

Which colour formats can I paste in?
Hex in three, four, six or eight digits, rgb and rgba, hsl and hsla, hwb, and any CSS colour name. Both the comma form and the modern space separated form with a slash before the alpha are accepted, so you can paste straight from a stylesheet.
How is transparency handled?
An alpha channel survives the conversion, so an eight digit hex comes back as rgba and the preview shows a chequerboard behind it. The alpha is only written into the output when it is actually less than fully opaque, unless you ask for it always.
What do the contrast numbers mean?
They are the WCAG contrast ratio between this colour and a plain white or black background. Normal body text needs 4.5 to pass level AA and 7 to pass AAA; large text has a lower bar. A ratio below 3 is hard to read for most people at any size.
Why is the contrast calculated without the alpha?
Because a translucent colour has no fixed contrast. What a reader actually sees depends on whatever sits behind it, so the figures use the opaque colour. If your text really is translucent, work out the blended colour first and check that.
What is the difference between HSL and HWB?
Both start from the same hue angle. HSL describes a colour by how saturated and how light it is, which is the pair most tools expose. HWB describes it by how much white and how much black are mixed in, which is closer to how people mix paint and easier to reason about when building a tint scale.