How to use the color converter

Type or paste a CSS color in any supported format: HEX, rgb(), hsl() or oklch(), or a common name such as rebeccapurple.
Or choose a color with the Picker; the text field and the picker stay in sync.
Read the same color in every notation in the table, and press Copy next to the one you need.

Example

Entering #ff0000 gives rgb(255, 0, 0), hsl(0, 100%, 50%) andoklch(62.8% 0.2577 29.23). A translucent color keeps its alpha in every format:rgb(255 0 0 / 50%) becomes #ff000080 and oklch(62.8% 0.2577 29.23 / 0.5). Both comma syntax (rgba(255, 0, 0, 0.5)) and the modern space syntax are accepted.

Frequently asked questions

What is OKLCH and why use it?

OKLCH describes a color by lightness, chroma and hue in the OKLab color space, which matches how people perceive brightness much better than HSL. Two OKLCH colors with the same lightness look equally light, so it is a good base for palettes and design tokens. Modern browsers support oklch() in CSS.

What happens to colors outside the sRGB gamut?

OKLCH can describe colors that ordinary sRGB screens and HEX codes cannot show. When that happens the converter clips each red, green and blue channel to the displayable range and says so, so the HEX, RGB and HSL values are the closest sRGB color rather than an exact match.

Is my input sent anywhere?

No. Parsing and conversion run in your browser and nothing is uploaded.