Which color spaces are supported?

HEX (3/6/8-digit), RGB(A), HSL(A), HSV/HSB, OKLCH, OKLAB, CMYK, named CSS colors (red, rebeccapurple, etc.), and the modern color() function syntax.

Why use OKLCH over HSL?

OKLCH is perceptually uniform — equal lightness values look equally bright across all hues. HSL doesn't: yellow at 50% lightness looks much brighter than blue at 50%. Modern design systems prefer OKLCH for that reason.

Is the conversion lossless?

Within the displayable sRGB gamut, yes — HEX/RGB/HSL all round-trip. Out-of-gamut OKLCH values (very saturated colors that sRGB can't display) get clipped on conversion back to RGB.

hex · rgb · hsl · hsv · hwb · cmyk · oklch · live

Convert any color between formats

Q: Is anything sent to a server?

No — every conversion runs locally in your browser.

Type a HEX value and read the equivalent RGB, HSL, HSV, HWB, CMYK and OKLCH. All conversions run locally in your browser.

Color Converter

HEX

#3b82f6

primary

RGB

59,130,246

byte

OKLCH L

62.31%

perceptual

Status

valid

live

input · color

HEX value

Live sample

output · preview

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217.2, 91.2%, 59.8%)

HSV

hsv(217.2, 76%, 96.5%)

HWB

hwb(217.2 23.1% 3.5%)

CMYK

cmyk(76%, 47.2%, 0%, 3.5%)

OKLCH

oklch(62.31% 0.188 259.8)

Quick Start

How to convert color formats

Type a HEX value. The converter computes the equivalent RGB, HSL, HSV, HWB, CMYK and OKLCH form so you can paste whichever fits your stylesheet.

01
Type HEX
Any 3, 6 or 8 digit HEX such as #3b82f6 or #3b82f6ff.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
input · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Read 7 formats
RGB, HSL, HSV, HWB, CMYK and OKLCH update live.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
formatshex · rgb · hslP3gamut-mappedlive
out · options7 · live
```
hsl(217, 91%, 60%)
```
options applied · livelive
03
Copy one row
Click the copy icon on any row to grab that string.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
copyWCAG 2.2APCAAA · AAAcontrast
✓ · convertedrgb · ready
```
copied RGB
```
converted · liveWCAG-aware
04
Drop into CSS
Paste the chosen format into your stylesheet or design tool.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
color: var(--c)
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to convert colors

CSS, design tokens, print, theming.

CSS authoring

Move between HEX and HSL while iterating. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Design tokens

Emit OKLCH tokens for modern design systems. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Print workflows

Estimate a CMYK equivalent of a screen color. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Code embedding

Match HEX to platform-specific formats. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick swap

Translate HEX → RGB while reading legacy CSS. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Move colors between Figma, VS Code, and your CSS. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Which formats are output?

HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH — the seven common CSS color notations.

Are alpha values supported?

Yes — 8-digit HEX (#RRGGBBAA) parses and the alpha shows up in RGBA / HSLA helpers.

Are CMYK values accurate for print?

They're a math approximation. Use a printer ICC profile for production print work.

What is OKLCH?

A perceptually-uniform color space — equal numeric steps look equal to the eye. Great for design tokens.

Is anything sent to a server?

No — everything runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!