Color converter

Paste a color in any format and copy it in every other: hex to rgb, rgb to hex, hex to hsl, an OKLCH converter, hex to CMYK, Display P3 and more.

How to convert a color

  1. Paste or type a color in any CSS format: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() or color(), a CMYK value, or a color name such as coral.
  2. The status line confirms what was read, including its opacity and whether the color fits inside sRGB or Display P3.
  3. Copy any row from the list of formats. They are grouped as web, perceptual, device and native code.
  4. The page address updates with your color, so you can bookmark or share a conversion.

What you can do

  • Web formats

    HEX, with an 8-digit HEX when there is opacity, plus RGB, HSL and HWB, written the way CSS expects.

  • Perceptual formats

    CIE Lab, LCH, OKLab and OKLCH, plus a ready-made Tailwind v4 theme variable.

  • Display P3 and CMYK

    Wide-gamut Display P3 and a simple CMYK estimate. If a color falls outside sRGB you get both a gamut-mapped and a clipped fallback.

  • Native code

    Android ARGB, Swift UIColor, SwiftUI Color and Flutter Color values, ready to paste.

  • Opacity

    A color with alpha keeps its opacity in every format that can carry it.

  • Examples and next steps

    Try the example inputs, open the color page for shades and harmonies, or check its contrast.

Frequently asked questions

How do I convert HEX to RGB?

Paste the hex code, for example #3B82F6, and copy the RGB row. By hand, split the six digits into three pairs and convert each pair from base 16 to a number from 0 to 255: 3B is 59, 82 is 130 and F6 is 246, so #3B82F6 is rgb(59, 130, 246).

How do I convert RGB to HEX?

Enter the rgb() value and copy the HEX row. By hand, write each channel as two hexadecimal digits and join them: 59, 130 and 246 become 3B, 82 and F6, which gives #3B82F6.

What is the difference between HEX, RGB and HSL?

HEX and RGB describe the same thing, the amounts of red, green and blue light to mix. HEX writes the three amounts in base 16 and RGB in base 10. HSL describes hue, saturation and lightness instead, which is easier to adjust by hand.

What is OKLCH?

OKLCH is a CSS color format with three parts: lightness, chroma and hue. It is based on the OKLab color space, where equal numeric steps look like equal visual steps, so changing lightness does not shift the apparent hue the way HSL does. Modern browsers support it through oklch().

Is the CMYK value accurate for print?

No. The CMYK value comes from a simple formula without an ICC profile, so printed color will shift. Use it as a starting point and check a proof with your printer.