Color Converter

What this tool does

Color Converter reads any CSS colour syntax, including names, and shows it in every common notation with copy buttons. A list mode converts dozens of colours to one target format at once, which is handy when moving a palette between tools or codebases.

Colours travel between design tools, CSS, Android and iOS code, documentation and print, and each place prefers a different notation. Converting by hand is error-prone: HSL needs hue maths, CIELAB needs a white point and gamma-correct conversion, and OKLCH, now widely used in CSS and Tailwind CSS v4, cannot be worked out mentally at all.

This converter parses the colour once and derives every format from it using the CSS Color Module Level 4 formulas implemented by the culori library. CIELAB and LCH use the D50 white point as CSS does, OKLab and OKLCH follow Björn Ottosson's model, and Display P3 uses the wide-gamut P3 primaries with a D65 white point. If a colour lies outside the sRGB gamut, the sRGB-based formats show the closest displayable colour, found by reducing chroma in OKLCH, while the wide-gamut formats keep the exact value.

How to use Color Converter

1. Type or paste a colour into Enter any colour, or click one of the Examples.
2. Read the swatch, the plain-language Description and the OKLCH lightness.
3. Copy any notation from the list: HEX, RGB, HSL, HSV, HWB, CIELAB, LCH, OKLab, OKLCH, Display P3, CMYK or integer.
4. To convert many colours, paste them one per line under Convert a list of colours.
5. Pick the target under Convert to and copy the Result.

Tips for better results

• Bare hex such as 3b82f6 and comma-separated numbers such as 59, 130, 246 are accepted too.
• The comma form rgb(59, 130, 246) is the legacy syntax; modern CSS also accepts the space-separated rgb(59 130 246 / 50%).
• For design tokens, OKLCH keeps lightness consistent across hues, which makes accessible palettes easier to build.
• Use the integer value for Android colour resources or code that stores colours as numbers.

Common use cases

• Turning HEX codes from a style guide into HSL or OKLCH for CSS variables.
• Converting a Figma palette into RGB values for a chart library or native app.
• Checking what an OKLCH or Display P3 colour looks like on an sRGB screen.
• Bulk-converting a list of brand colours for documentation.

Common mistakes to avoid

• Using the CMYK output for professional printing; it is a simple formula without ICC colour management, so ask your printer for a proof.
• Rounding HSL values too aggressively, which can shift the colour by one or two RGB steps.
• Mixing up lab() and oklab(); the numbers are on completely different scales.