Skip to content

← All tools

Free online tool

Colour converter

Type or pick a colour and get it in every common format at once, with a copy button for each. You also get ready-made CSS, the closest named colour, ten tints and shades, and harmony colours. Nothing is uploaded: it all runs in this page.

Accepts hex (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and the 148 CSS colour names.

Try:

Preview

On light

On dark

Nearest CSS colour name

rebeccapurple (#663399) is exactly this colour.

All formats

  • HEX

    #663399

  • RGB (0-255)

    102, 51, 153

  • RGB (percent)

    40%, 20%, 60%

  • HSL: hue deg, saturation, lightness

    270, 50%, 40%

  • HSV / HSB: hue deg, saturation, value

    270, 66.7%, 60%

  • HWB: hue deg, whiteness, blackness

    270, 20%, 40%

  • CMYK (naive, not for print)

    33.3%, 66.7%, 0%, 40%

  • CIE Lab (D65): L, a, b

    32.9, 42.89, -47.15

  • CIE LCH (D65): L, chroma, hue deg

    32.9, 63.74, 312.29

  • CIE Lab (D50, as CSS lab()): L, a, b

    32.39, 38.42, -47.69

  • CIE LCH (D50, as CSS lch()): L, chroma, hue deg

    32.39, 61.24, 308.86

  • OKLab: L, a, b

    0.44027, 0.08818, -0.13386

  • OKLCH: L, chroma, hue deg

    0.44027, 0.1603, 303.37

  • Decimal integer

    6697881

  • Hex integer

    0x663399

Ready to paste into CSS

  • Hex

    #663399

  • rgb()

    rgb(102 51 153)

  • rgb() with commas

    rgb(102, 51, 153)

  • hsl()

    hsl(270 50% 40%)

  • hwb()

    hwb(270 20% 40%)

  • lab()

    lab(32.393 38.423 -47.691)

  • lch()

    lch(32.393 61.244 308.857)

  • oklab()

    oklab(0.44027 0.08818 -0.13386)

  • oklch()

    oklch(0.44027 0.1603 303.37)

Tints (mixed with white)

Shades (mixed with black)

Ten steps from 10% to 100%, mixed in OKLab, so the steps look evenly spaced. Alpha is ignored. Tap a swatch to copy its hex code.

Harmony

Complementary

Analogous

Triadic

Found by turning the HSL hue and keeping saturation and lightness: complementary is +180 degrees, analogous is -30 and +30, triadic is +120 and +240. HSL hue is a simple rule, not a perceptual one, so the results can differ in apparent brightness.

What the numbers mean

  • •The CMYK numbers are the plain textbook formula from RGB. They do not use an ink, paper or printer profile, so do not send them to a printer expecting the same colour. A print shop converts with a profile.
  • •CIE Lab and LCH are shown with a D65 white point, the white of sRGB, so white is exactly 100, 0, 0. CSS lab() and lch() use a D50 white point, so those rows are shown separately and are the ones to paste into CSS.
  • •HEX, RGB and the integer forms are rounded to whole 0-255 steps. The other models are computed from the exact colour and rounded only for display.
  • •A colour typed in lab(), lch(), oklab() or oklch() can fall outside sRGB. It is then clamped channel by channel and flagged. Hue is shown as 0 for greys, where it has no meaning.

How it works

  • •The page reads your colour with its own parser: hex with 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), the 148 CSS colour names, and "transparent". Both the modern space-separated form and the older comma form work. If something is wrong, the message says what.
  • •The conversions follow the formulas in the CSS Color Module Level 4: sRGB to XYZ with the D65 white point, Lab and LCH from XYZ, and OKLab from the matrices published with the OKLab colour space.
  • •Lab and LCH are shown with a D65 white (the sRGB white, so white is 100, 0, 0) and again with a D50 white, because that is what CSS lab() and lch() use. Use the D50 rows or the CSS rows when you paste into a stylesheet.
  • •CMYK here is the plain textbook formula from RGB. It knows nothing about ink, paper or printers, so it is a starting point and not a print-ready value.
  • •Colours outside sRGB (easy to get with oklch or lab) are clamped channel by channel and flagged. Tints and shades are mixed with white or black in OKLab. Harmony colours rotate the HSL hue, which is simple and predictable but not perceptually even.
  • •Input is limited to 100 characters, and the colour is not stored anywhere.

Questions

Is my colour uploaded?
No. Everything is calculated by code running in this page and nothing is sent anywhere. Copy buttons only put text on your own clipboard.
Why do the Lab numbers differ from another site?
Lab depends on the white point it is measured against. Many tools use D65, the white of sRGB screens. CSS lab() and lch() use D50. Both are shown and labelled here, so compare the row with the same white point.
Can I print with the CMYK numbers?
Treat them as a rough guide only. They come from a simple formula with no printer or paper profile, and a print shop or design app converts with a profile that gives different numbers for the same screen colour.
Why was my oklch or lab colour changed?
Some oklch(), lab() and lch() values describe colours that an sRGB screen cannot show. The page clips each channel into range and tells you. It does not try to find the closest displayable colour with a smarter method, so for very vivid colours a dedicated gamut-mapping tool may pick differently.

Related