Which format should I use in CSS?

Hex for fixed brand colours, HSL when generating variations of a colour, and OKLCH when you need perceptually even steps across a palette or are targeting wide-gamut displays.

Why does my OKLCH colour look duller as hex?

It lies outside the sRGB gamut, so the hex value is the closest displayable colour. The tool warns when this clipping occurs.

What contrast ratio do I need?

WCAG AA wants 4.5:1 for normal text and 3:1 for large text; AAA wants 7:1. The ratios against white and black are shown for every colour.

Which colour names are supported?

The common ones (red, blue, teal, and so on) plus transparent. The full CSS list runs to 148 names; use hex for anything unusual.

Converters

Color Converter

Convert colours between HEX, RGB, HSL and OKLCH.

LiveCtrl+↵

Inputcolor0 lines · 0 chars

Outputcolor0 lines · 0 chars

Options

Output

About this tool

CSS accepts the same colour in several notations, and each suits a different task. Hex is compact and universal, RGB maps to how screens emit light, HSL lets you reason about hue and lightness separately, and OKLCH is perceptually uniform, equal numeric steps look like equal visual steps.

Every format is shown at once, along with relative luminance and contrast ratios against white and black, so you can judge accessibility at the same time as converting.

How to use it

Paste or upload your colorDrop a file onto the input pane, use the file picker, or paste the text directly.
Adjust the options if neededThe defaults suit most input; open Options to change the behaviour.
ConvertPress Convert, or use Ctrl+Enter (Cmd+Enter on macOS).
Copy or downloadCopy the result, or download it as a .txt file.

Worked examples

Each example below is executed against this tool by the test suite, so what you see is what the tool actually produces.

A hex colour in every format

Input

#1f6feb

Output

HEX          #1f6feb
RGB          rgb(31 111 235)
RGB (legacy) rgb(31, 111, 235)
HSL          hsl(216.5 83.6% 52.2%)
HSL (legacy) hsl(216.5, 83.6%, 52.2%)
OKLCH        oklch(56.86% 0.2023 259.67)

Channels     R 31  G 111  B 235
Relative luminance  0.1766
Contrast vs white   4.63:1
Contrast vs black   4.53:1

At 4.63:1 against white this clears the WCAG AA threshold of 4.5:1 for body text, but not the 7:1 needed for AAA.

What to watch for

The details that decide whether a conversion is correct, and where information can be lost without any error being raised.

What each format is good for: Hex is the most portable and the shortest to type. RGB is what the display actually does, making it right for programmatic blending. HSL makes "same colour, lighter" a single-number change, which is why theme systems use it. OKLCH does what HSL only appears to do: because it is perceptually uniform, lightening two different hues by the same amount produces an equal perceived change, whereas in HSL yellow at 50% lightness looks far brighter than blue at 50%.
Modern and legacy CSS syntax: Both space-separated modern syntax, rgb(255 0 0), and comma-separated legacy syntax, rgb(255, 0, 0), are shown. They are equivalent in current browsers; the legacy form is there for older targets and for tools that have not caught up.
Alpha and 8-digit hex: Transparency is preserved across formats. In hex it becomes an 8-digit value such as #ff000080, where the final pair is the alpha byte, well supported now, but not in very old browsers, where rgba() is the safer choice.
OKLCH can describe colours your screen cannot show: The OKLCH space is larger than sRGB, so a high-chroma value may have no sRGB equivalent. Converting such a colour to hex clips it to the nearest displayable one, which looks less saturated, and the tool warns when that happens. This is not a bug. It is why OKLCH matters for wide-gamut displays.
Contrast ratios and WCAG thresholds: Contrast against white and black is computed from WCAG relative luminance. WCAG AA requires 4.5:1 for body text and 3:1 for large text; AAA requires 7:1. The maximum possible ratio is 21:1, black on white. Checking this while picking a colour is far easier than retrofitting accessibility later.

Limitations

Supports the common CSS colour names rather than all 148.
OKLCH values outside sRGB are clipped when converted to hex.
Does not handle LAB, LCH or colour profiles beyond sRGB and OKLCH.
Processing happens in your browser, so very large inputs are bounded by available memory. Files above roughly 10 MB are handled but will feel slower, and multi-hundred-megabyte files are better suited to a command-line tool.

Questions

Which format should I use in CSS?: Hex for fixed brand colours, HSL when generating variations of a colour, and OKLCH when you need perceptually even steps across a palette or are targeting wide-gamut displays.
Why does my OKLCH colour look duller as hex?: It lies outside the sRGB gamut, so the hex value is the closest displayable colour. The tool warns when this clipping occurs.
What contrast ratio do I need?: WCAG AA wants 4.5:1 for normal text and 3:1 for large text; AAA wants 7:1. The ratios against white and black are shown for every colour.
Which colour names are supported?: The common ones (red, blue, teal, and so on) plus transparent. The full CSS list runs to 148 names; use hex for anything unusual.

Related tools

More CSS tools

CSS Minifier