Delimiter.live
Developer Tools Runs in your browser Free · no account

Color Converter

The colour converter translates a colour between HEX, RGB, RGBA, HSL, HSV and CSS named colours, shows a live preview swatch, and reports the contrast ratio against black and white so you can check accessibility at a glance.

Colour value 0 characters
Conversions

Your result will appear here.

Not sure where to start? Use Load example.

Results update automatically and are calculated on your device. Nothing you type is sent to a server.

Runs in your browser. Processing happens entirely in your browser. Nothing you enter is sent to Delimiter.live.

How to use the Color Converter

  1. Type or paste a colour in any common notation — one per line to convert several at once.
  2. Read the equivalent HEX, RGB, HSL and HSV values, with a preview swatch.
  3. Check the contrast ratios if you are choosing text or background colours.

Example

Input
#4338ca
Output
RGB: rgb(67, 56, 202)
HSL: hsl(245, 57%, 51%)
Contrast with white: 8.4:1

Common use cases

  • Converting a brand HEX colour into the RGB values a design tool wants.
  • Moving to HSL so you can generate a lighter or darker variant by changing one number.
  • Checking whether a colour has enough contrast for body text.
  • Translating a CSS named colour into an explicit value.

Limitations and things to watch for

  • Conversions use the sRGB colour space, which is what CSS colours and ordinary screens use. Wide-gamut spaces such as Display P3 and Lab are not converted.
  • Contrast ratios follow the WCAG 2.x relative-luminance formula. WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text and user-interface components.
  • Rounding between spaces can shift a value by one unit when converting back and forth, which is a property of integer RGB rather than an error.

Frequently asked questions

Which colour formats are recognised?
Three- and six-digit HEX with optional alpha, rgb() and rgba(), hsl() and hsla() in both comma and space syntax, hsv(), and the CSS named colours.
What contrast ratio do I need?
WCAG 2.2 level AA requires 4.5:1 for normal body text, and 3:1 for text at 18.66px bold or 24px and above, and for user-interface components and graphical objects.
Why should I use HSL?
Because it separates hue from saturation and lightness. To make a colour lighter you change one number, which is far more predictable than adjusting three RGB channels.

Share this tool