Skip to content

Colour converter

Paste a colour in any notation — HEX, rgb(), hsl(), oklch(), oklab(), cmyk() or a CSS name — and get every other one. Each value is checked by converting it back: it names the same colour.

  • HEX · RGB · HSL · HWB
  • OKLCH · OKLab
  • CMYK · Pantone
  • Free, no sign-in

Colour

HEX

For example: · · · · ·

Aaon white 3.67:1Aaon black 5.70:1Check contrast

Every format

  • HEX#3B82F6
  • RGBCSS Color 4rgb(59 130 246)
  • RGBlegacy syntaxrgb(59, 130, 246)
  • HSLhsl(217.2 91.2% 59.8%)
  • HWBhwb(217.2 23.1% 3.5%)
  • HSV / HSBFigma, Photoshophsv(217.2 76% 96.5%)
  • OKLCHoklch(62.3% 0.188 259.8)
  • OKLaboklab(62.3% -0.033 -0.185)
  • CMYKno ICC profilecmyk(76% 47.2% 0% 3.5%)
  • CSS namenearest · ΔE 8.5≈ dodgerblue
  • Pantonenearest Solid Coated · ΔE 19≈ PANTONE 300 C

Adjust in OKLCH

Lightness, chroma and hue in a perceptual space: one slider step looks the same for every hue.

Scale & harmonies

Built in OKLCH. Click a swatch to make it the current colour — every format updates.

Scale 50–950
Harmonies
How it works

One notation, every other

  1. Step 1. Pick or enter a colour

    With the picker, from the screen, or by pasting any notation — HEX, rgb(), hsl(), oklch(), cmyk(), a CSS name.

  2. Step 2. Instant conversion

    RGB, HSL, HWB, HSV, OKLCH, OKLab, CMYK and the nearest CSS name and Pantone appear at once.

  3. Step 3. Copy any format

    A button next to every row — or all formats at once as one block.

  4. Step 4. Use it in code

    Values are exact: each converts back to the same HEX, no off-by-one drift.

FAQ

About colour formats

What is a HEX color code and why is it so popular?

HEX (hexadecimal) is a 6-digit code starting with # that represents RGB values in base-16. For example, #FF5733 means Red=FF (255), Green=57 (87), Blue=33 (51). It's popular because it's compact, easy to copy-paste, and universally supported in HTML/CSS. The first two digits control red, middle two control green, and last two control blue. You can also use 3-digit shorthand like #F53 which expands to #FF5533.

What's the difference between RGB and HEX?

RGB and HEX represent the same thing — they're just different notation systems. RGB uses decimal numbers (0–255) like rgb(255, 87, 51), while HEX uses hexadecimal (00–FF) like #FF5733. RGB is more human-readable with separate channels, while HEX is more compact. RGB supports alpha transparency with rgba(255, 87, 51, 0.5), whereas HEX requires an 8-digit format #FF5733CC for transparency.

When should I use HSL instead of RGB?

HSL (Hue, Saturation, Lightness) is superior for color manipulation and creating color schemes. To make a color lighter, just increase the lightness value. To desaturate, lower the saturation. RGB requires changing all three channels which makes color relationships harder to reason about. HSL is intuitive for designers: hue (0–360°) is the color wheel position, saturation (0–100%) is color intensity, and lightness (0–100%) is brightness.

What is OKLCH and why should I use it?

OKLCH is a modern perceptually uniform color space supported in CSS since 2023. Unlike HSL where 50% lightness looks visually different for blue vs yellow, OKLCH ensures consistent perceived brightness across all hues. This makes it perfect for generating accessible color scales. The format is oklch(L C H) — L is lightness (0–100%), C is chroma (0–0.4), H is hue (0–360°). Supported in Chrome 111+, Safari 15+, and Firefox 113+.

What is CMYK and when do I need it?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model for printing. While screens use additive RGB (light mixing), printers use subtractive CMYK (ink mixing). When designing business cards, brochures, or packaging, you need CMYK values. CMYK has a smaller color gamut than RGB, so vibrant screen colors may look duller in print. Always convert and check CMYK before sending to print.

How accurate is the Pantone color matching?

Our Pantone matcher finds the closest Pantone Solid Coated color using the Delta E (ΔE) color difference algorithm — the industry standard for measuring perceptual color differences. A ΔE below 1 is imperceptible, below 3 is acceptable for most uses. However, screen colors (RGB) can never perfectly match physical Pantone swatches due to different color spaces and viewing conditions. Always reference physical Pantone books for final print decisions.

What's the best color format for CSS custom properties?

For maximum flexibility, store colors as OKLCH or HSL in CSS custom properties. This allows easy manipulation — you can adjust just lightness for hover states without recalculating the entire color. Example: --primary: oklch(60% 0.15 260); then use relative color syntax for variations. Avoid storing as HEX since you can't manipulate individual channels directly in CSS.

Which color formats can I use in CSS today?

HEX, RGB, and HSL have universal browser support. OKLCH requires modern browsers (Chrome 111+, Safari 15+, Firefox 113+). CMYK is not a CSS format — it's only for print software. For transparency, use rgba(), hsla(), 8-digit HEX (#RRGGBBAA), or OKLCH's slash syntax oklch(60% 0.15 260 / 0.5). Always provide fallbacks when using newer color spaces in production.
Keep going

Other UIXColors tools that pair well with the Color Converter.

Guides for this tool

Related

Each conversion, explained with a worked example

HEX → RGBHEX → HSLHEX → HSVHEX → CMYKHEX → OKLCH
Copied