Color Converter

Paste a colour in any common CSS format — #hex, rgb(), hsl(), hwb(), or one of 148 named colours — and see it normalised into every other format. Click a chip to copy it. Live, in your browser, no upload.

Accepts #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), hwb(), or one of 148 named CSS colours. Alpha values come through as rgba() / hsla() / 8-digit hex / hwb(... / α).

Output formats — click a chip to copy

CSS colour formats — quick reference
  • Hex — #RGB (3-digit), #RGBA (4-digit), #RRGGBB (6-digit), #RRGGBBAA (8-digit). Leading # is optional.
  • rgb() — rgb(13, 110, 253) or rgba(13, 110, 253, 0.5). Also CSS Color 4: rgb(13 110 253 / 0.5). Channels can be 0–255 or 0–100%.
  • hsl() — hsl(216, 98%, 52%) or hsla(216, 98%, 52%, 0.5). Also hsl(216 98% 52% / 0.5). Hue accepts deg, rad, grad, or turn.
  • hwb() — hwb(216 0% 0%). CSS Color 4 only. Optional alpha: hwb(216 0% 0% / 0.5).
  • Named — rebeccapurple, tomato, cornflowerblue … 148 entries. Case-insensitive.
  • Anything with alpha < 1 comes out as rgba(), hsla(), 8-digit hex, and hwb(... / α).

About this tool

Color Converter translates a colour between hex, RGB, HSL, HSV, OKLCH, and CMYK in your browser. The conversion is round-trippable within the sRGB gamut, with a warning when the input is outside sRGB and the conversion involves a gamut clip. The page also reports the WCAG 2.1 contrast ratio against a chosen background and tells you whether the combination meets AA or AAA for normal or large text — useful when you are picking a foreground colour against an existing background. The OKLCH and hex values are produced using the CSS Color 4 algorithm (the same one Chrome and Safari use), so the output matches what your stylesheet will actually render.

When to use it

  • Translating a brand colour from a designer's hex value to HSL so you can describe it in prose
  • Checking the WCAG contrast ratio of a foreground/background pair before shipping a UI change
  • Converting an OKLCH colour from a modern stylesheet back to hex for a legacy tool that doesn't support OKLCH yet
  • Picking a tint or shade by adjusting the L channel in OKLCH while holding the chroma and hue constant

When not to use it

  • You need colour-managed output for print — the CMYK conversion is approximate, using a naive sRGB-to-CMYK mapping. For real print, use a colour-managed tool with a printer profile
  • You need a colour picker with a swatch library — this tool converts, it does not pick. Use the colour picker tool on the site for that
  • You are working with spot colours (Pantone, HKS) — those have no direct sRGB equivalent and require a separate lookup

Frequently asked questions

Is the OKLCH conversion accurate?

Yes for in-gamut sRGB colours. For out-of-gamut inputs (very saturated colours in wide-gamut displays), the conversion involves a gamut clip to sRGB, which slightly shifts the result. The page flags the clip so you know the conversion is approximate.

What contrast ratio meets WCAG AA?

4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). AAA is 7:1 and 4.5:1 respectively. The page reports the actual ratio and tells you which level the combination meets.

← Back to the homepage · More guides · More from the blog