What is the difference between HEX, RGB and HSL?

HEX, RGB and HSL all describe the same sRGB color, just with different numbers. HEX (#3b82f6) is a 6-digit hexadecimal shorthand for the three RGB channels. RGB (rgb(59 130 246)) writes those channels as 0–255 integers. HSL (hsl(217 91% 60%)) describes the color as Hue, Saturation and Lightness — much easier to tweak by hand because lightening or shifting the hue maps to a single channel.

How do I check if my text colors are accessible?

Use the Contrast tab. It calculates the WCAG 2.1 contrast ratio between your foreground and background and flags whether it passes AA (4.5:1 for normal text, 3:1 for large) and AAA (7:1 / 4.5:1). It also shows the APCA Lc value, the perceptual contrast metric proposed for WCAG 3.

Are CMYK conversions accurate for print?

The conversion shown here is the simple math sRGB → CMYK formula. It is correct as a rough estimate but not colorimetrically accurate — true print-ready CMYK requires an ICC profile for the specific paper, ink and press, which only software like Adobe Photoshop or a RIP can apply. Treat the CMYK output as a starting point, not a press-ready value.

Does this tool upload my colors anywhere?

No. All conversions, palette generation and image picking happen locally in your browser using JavaScript. Nothing is sent to a server. The shareable URL puts the HEX value in the link itself, and the image picker draws to a canvas in memory and discards the bitmap when you leave the page.

APCA (Accessible Perceptual Contrast Algorithm) is the contrast metric proposed for WCAG 3.0. It returns a score (Lc) that better reflects how the human eye actually perceives readability across the full range of light and dark color combinations, where the older WCAG 2.1 ratio is known to over- or underestimate. A common rule of thumb: |Lc| ≥ 75 for body text, ≥ 60 for large text, ≥ 45 for UI.

Can I share or bookmark a color?

Yes. Whenever you change the color the URL updates with a hash like #c=3b82f6. Copy that URL or bookmark it — opening the link later restores exactly the same color, palette and contrast settings.

Color Converter — HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH & Tailwind

All the ways this color converter works

Everything below runs locally in your browser — there is no server round-trip and your colors never leave the device. The same canonical sRGB triplet is the source of truth: every output, palette, contrast check and code snippet is recomputed from it whenever you tweak a slider, paste a value or pick a pixel.

HEX (3, 4, 6, 8 digits)

#f80, #f80c, #ff8800, #ff8800cc — short, alpha-short, classic and alpha-classic.

RGB & RGBA

Both legacy rgb(255,136,0) and modern CSS Color 4 rgb(255 136 0 / .8) syntax.

HSL & HSLA

Hue / Saturation / Lightness — easy to tweak by hand.

HSV / HSB

The model used in Photoshop, Sketch and Figma color pickers.

HWB

Hue + Whiteness + Blackness — the natural mental model for tints & shades.

CMYK

Subtractive color for print mockups (uncalibrated, no ICC profile).

CIE LAB & LCH

D65 white point, computed via XYZ — the standard perceptual space since 1976.

OKLAB & OKLCH

Modern perceptually-uniform space (Ottosson 2020) — what CSS Color 4 recommends.

XYZ (D65)

CIE 1931 tristimulus values, the bridge between RGB and every perceptual space.

CSS named colors

All 147 CSS Color 4 names — and the closest match for any custom color.

Tailwind v3 palette

242 default Tailwind shades — the closest utility class for any color.

SwiftUI / UIKit

Color(red:green:blue:opacity:) snippets ready to paste.

Android (Compose, XML)

0xAARRGGBB long literal and <color> resource format.

Flutter

Color(0xFFRRGGBB) with alpha-aware output.

Python & PIL

Matplotlib-style tuples and Pillow (R,G,B) integers.

9 palette generators

Tints, shades, tones, complementary, analogous, triadic, tetradic, split, monochromatic + an OKLCH lightness ramp.

WCAG 2.1 contrast

Pass / fail for AA & AAA, normal & large text, plus the UI components 3:1 threshold.

APCA Lc

The accessible perceptual contrast metric proposed for WCAG 3 — better for dark mode.

Color blindness simulator

Protanopia, deuteranopia, tritanopia & achromatopsia previews of your color and palette.

Color mixer

Blend two colors with an adjustable ratio — see both naive sRGB and perceptual OKLCH mixes.

Image picker (eyedrop)

Upload any image and click to extract the exact pixel color — keeps a recent-picks strip.

Native EyeDropper API

In Chrome / Edge 95+, pick a color from anywhere on screen — full OS desktop, not just the page.

Shareable URL

Your color is encoded in the page hash (#c=3b82f6) so the link always opens the same swatch.

Auto-detect parser

Paste any format — short hex, oklch, named, legacy rgb — the tool figures it out.

Why bother with anything beyond HEX?

HEX and RGB are great for storage but terrible for design. Try writing a "20% lighter, slightly more saturated" version of #3b82f6 in your head — you can't. In HSL it is just hsl(217 92% 80%). In OKLCH it is even more reliable, because OKLCH lightness matches human perception, while HSL lightness famously does not (a yellow at 50% L looks much brighter than a blue at 50% L). Picking the right space for the job is what makes a palette look intentional instead of accidental.

The color spaces, in one paragraph each

sRGB / HEX: what your monitor speaks. 256 levels per channel, gamma-encoded.

HSL: a human-friendly cylinder over RGB — easy, but lightness is mathematical, not perceptual.

HSV / HSB: like HSL but with "value" (max channel) instead of lightness — used in design tools.

HWB: hue with two simple knobs — how much white to add and how much black. A 2014 proposal that finally landed in CSS Color 4.

CMYK: subtractive ink mixing for print. Without an ICC profile, treat the numbers as a starting point only.

CIE XYZ (D65): a device-independent tristimulus model — the math anchor for every perceptual space below.

CIE LAB / LCH: the 1976 perceptual space. Equal numerical distance ≈ equal visible difference (Δ E*ab).

OKLAB / OKLCH: Björn Ottosson's 2020 redesign of LAB that fixes its hue-shift artefacts, especially in blues and purples.

Who this tool is for

🎨

Designers

Translate Figma swatches into Tailwind, SwiftUI or CSS without round-tripping through Photoshop.

💻

Front-end devs

Quick HEX → OKLCH conversion, contrast checks, and ready-to-paste CSS variables.

📱

Mobile devs

Get the exact 0xFFRRGGBB literal for SwiftUI, Compose, Flutter or XML.

♿

Accessibility leads

WCAG 2.1 + APCA verdicts, plus a color-blindness simulator — all in the same view.

🖨️

Print designers

Quick CMYK approximations and L*a*b* values for ink-spec discussions.

🧪

Data viz

Generate perceptually-uniform OKLCH ramps for sequential and diverging palettes.

📷

Brand teams

Eyedrop colors out of a brand image and snap them to the closest Tailwind class.

🎓

Students

See how all the spaces relate — every conversion is recomputed live as you drag a slider.

Frequently asked questions

What's the difference between HEX, RGB and HSL?

All three describe the same sRGB color. HEX (#3b82f6) is hex shorthand for the RGB channels. RGB writes those channels as 0–255 numbers. HSL describes the same color as Hue, Saturation and Lightness — much easier to tweak by eye.

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space — equal numeric steps look equally large. Unlike HSL, two OKLCH colors at the same Lightness really do appear equally bright. Modern browsers support oklch() natively.

How do I check if my text is accessible?

Open the Contrast tab. It calculates the WCAG 2.1 ratio between your foreground and background and flags AA / AAA pass for normal and large text. It also shows the APCA Lc value, the contrast metric proposed for WCAG 3.

What is the closest Tailwind class for my color?

The pill near the sliders shows the closest match in the default Tailwind v3 palette (22 colors × 11 shades = 242 entries) by Euclidean distance in sRGB.

Is the CMYK output print-ready?

No. The conversion is the simple math sRGB → CMYK formula. True print color requires an ICC profile for the specific paper and press. Use the CMYK output as a rough starting point only.

Does this tool send my colors anywhere?

No. All conversions, palette generation and image picking happen in your browser. The image picker reads pixels via a canvas in memory and discards the bitmap when you leave the page.

What is APCA?

APCA (Accessible Perceptual Contrast Algorithm) is the contrast metric proposed for WCAG 3.0. Rule of thumb: |Lc| ≥ 75 for body text, ≥ 60 for large text, ≥ 45 for UI elements.

Can I share a color via URL?

Yes — the page hash updates to #c=rrggbb as you tweak the color. Click the Share button to copy the link.