Free tool
Color converter
Paste any color, in any CSS format, and get it in all the others: HEX, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH, plus HSV and CMYK. The tool also finds the nearest Tailwind color, checks WCAG contrast and writes the color for Swift, Flutter and Android.
Free · no sign-up · runs in your browser, nothing is uploaded
- orange-500#ff6900ΔE 2
- amber-600#e17100ΔE 4.5
- orange-400#ff8904ΔE 5.1
Distance is ΔE OK × 100 in OKLab; under about 2 is hard to tell apart. Nearest CSS name: coral (ΔE 4.2).
WCAG 2.2: 4.5:1 for body text (AA), 3:1 for large text and UI parts, 7:1 for AAA.
Tints (+ white), 10% to 90%
Shades (+ black), 10% to 90%
Color formats compared
| Format | Orange in that format | Good for |
|---|---|---|
| HEX | #F97316 | Short, copy-paste friendly, design handoff |
| RGB | rgb(249 115 22) | Channel math, canvas, image code |
| HSL | hsl(24.6 95% 53.1%) | Quick hand edits of hue and lightness |
| HWB | hwb(24.6 8.6% 2.4%) | Mixing a hue with white or black |
| OKLCH | oklch(70.49% 0.1867 47.6) | Palettes with even lightness steps, wide-gamut colors |
| OKLab | oklab(70.49% 0.1259 0.1379) | Gradients and mixing that look even |
| Display P3 | color(display-p3 0.9111 0.4814 0.2088) | Wide-gamut screens; colors brighter than sRGB can reach |
| Lab / LCH | lab(64.5% 49.37 68.66) | Print and photo workflows (CIE, D50 white) |
| HSV / HSB | hsv(24.6, 91.2%, 97.6%) | Design app pickers; not valid CSS |
| CMYK | cmyk(0%, 53.8%, 91.2%, 2.4%) | A first guess for print; real print needs an ICC profile |
Values are for #F97316 (Tailwind v3 orange-500); paste it above to see them live. All CSS formats except HSV and CMYK are valid in a stylesheet. The modern syntax uses spaces and a slash for alpha, rgb(249 115 22 / 50%); the comma syntax and the rgba()/hsla() names still work everywhere.
How the conversions work
Everything goes through sRGB. HEX and RGB are the same numbers in two notations. HSL and HWB are rearrangements of sRGB, computed with the formulas in CSS Color 4. Lab, LCH, OKLab and OKLCH need more steps:
sRGB (0-1) → linear light remove the sRGB gamma curve
→ CIE XYZ (D65) 3×3 matrix
→ OKLab 3×3 matrix, cube root, 3×3 matrix
→ OKLCH C = √(a² + b²), H = atan2(b, a)
Lab / LCH: XYZ (D65) → Bradford adaptation to D50 → CIE Lab formulaThe converter uses the matrices from the CSS Color 4 sample code, so its numbers match what browsers compute. Hue is reported as 0 for grays, where it has no meaning.
Nearest Tailwind color
Tailwind v3 ships its palette as HEX values; Tailwind v4 redefined the same names in OKLCH, so orange-500 is #f97316 in v3 and oklch(70.5% 0.213 47.604) in v4. The two are close but not identical, which is why the tool lets you pick the version.
Matches are ranked by ΔE OK, the straight-line distance in OKLab, multiplied by 100. Near 0 is the same color; under about 2 most people cannot tell them apart side by side. If no shade is close, use an arbitrary value like bg-[#ff5733], which the snippets section writes for you.
Contrast checks (WCAG 2.2)
Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. Luminance weights the linear channels: 0.2126 R + 0.7152 G + 0.0722 B, which is why yellow text on white fails while blue text passes.
| Requirement | Level | Minimum ratio |
|---|---|---|
| Normal text (1.4.3) | AA | 4.5:1 |
| Large text, 18pt or 14pt bold (1.4.3) | AA | 3:1 |
| Normal text (1.4.6) | AAA | 7:1 |
| Large text (1.4.6) | AAA | 4.5:1 |
| UI components and graphics (1.4.11) | AA | 3:1 |
Translucent colors are blended over the background first, the way the browser paints them, and then measured.
Convert colors in code
CSS: let the browser do it. Relative color syntax converts and edits in one step.
.badge {
background: oklch(from #F97316 l c h / 20%); /* same color, 20% alpha */
border-color: hsl(from #F97316 h s calc(l - 15)); /* darker by 15 points */
}Python: the standard library has HLS (note the order) and HSV.
import colorsys r, g, b = 249 / 255, 115 / 255, 22 / 255 h, l, s = colorsys.rgb_to_hls(r, g, b) # hue 0-1, lightness, saturation print(round(h * 360, 1), round(s * 100, 1), round(l * 100, 1)) # 24.6 95.0 53.1
Swift and Flutter: use the snippets panel above. Flutter and Android take 0xAARRGGBB, with alpha first, while CSS 8-digit hex puts it last.
More free developer tools
FAQ
Which color formats can I paste?+
Any CSS color: hex (3, 4, 6 or 8 digits), rgb() and rgba(), hsl() and hsla(), hwb(), lab(), lch(), oklab(), oklch(), color() in srgb, srgb-linear, display-p3 or xyz, the 148 CSS color names and transparent. Plain numbers like 255, 87, 51 and Android-style 0xAARRGGBB work too. The format is detected for you.
What is OKLCH and why use it?+
OKLCH describes a color by lightness (L), chroma (C, how colorful) and hue (H) in the OKLab space, which was designed so equal steps look equally different. Changing L keeps the hue steady, which HSL does not do well, so it is handy for building palettes. Tailwind CSS v4 defines its default colors in OKLCH.
Why does my OKLCH color look different as HEX?+
OKLCH can describe colors outside sRGB, the gamut that HEX, RGB and HSL cover. When that happens the converter keeps the lightness and hue and lowers the chroma until the color fits, and says so. The Lab, LCH, OKLab and OKLCH outputs keep your exact value.
How do I convert RGB to CMYK?+
The simple formula is K = 1 − max(R, G, B), then C = (1 − R − K) / (1 − K), and the same for M with G and Y with B, all on a 0 to 1 scale. That is what this tool shows. Print shops convert with an ICC profile for the paper and ink, so treat the result as a starting point, not a print proof.
What is the difference between HSL and HSV (HSB)?+
Both use hue and saturation. In HSL, lightness 100% is always white and 50% is the pure color. In HSV, value 100% is the brightest version of the color, and white needs saturation 0. CSS has hsl() but no hsv(); design apps like Figma and Photoshop show HSB.
What contrast ratio does text need?+
WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) at level AA, and 7:1 and 4.5:1 at AAA. Icons, focus rings and form borders need 3:1 against what is next to them.
How do I find the closest Tailwind color to a HEX code?+
Paste the code above. The tool measures the distance to every color in the Tailwind default palette (v4 or v3) in OKLab and lists the three nearest with their class names. A distance under about 2 is hard to see.
Sources: CSS Color Module Level 4 · CSS Color 4 sample conversion code · Björn Ottosson: A perceptual color space (OKLab) · WCAG 2.2: contrast ratio and relative luminance · MDN: <color> · Tailwind CSS: colors · Android Color.parseColor · Flutter Color · Python colorsys. Checked 2026-10-30.