Color converter
Type or paste a color in any format — a hex code, rgb(),
hsl(), oklch(), CMYK or a CSS name — and
every other format appears as you type. It all happens in your browser.
Other ways to write it
All formats
Name and Tailwind
Contrast (WCAG)
Color models, and when to use each
Each format describes the same color for a different job. Pick by where the value is going.
-
HEX
#F97316
Red, green and blue as three pairs of base-16 digits, plus two for alpha if you need it. The default in CSS, design tools and brand guides.
-
RGB
rgb(249, 115, 22)
The same three channels as numbers from 0 to 255. What screens emit, and what code and canvas APIs expect.
-
HSL
hsl(24.6 95% 53.1%)
Hue as an angle, then saturation and lightness. Easy to tweak by hand in CSS: lighten a button by raising L.
-
HSV / HSB
hsv(24.6, 91.2%, 97.6%)
Hue, saturation and value (brightness). The model behind the color pickers in Photoshop, Figma and most design apps.
-
CMYK
cmyk(0%, 53.8%, 91.2%, 2.4%)
Cyan, magenta, yellow and black ink, the subtractive opposite of RGB. For print; the numbers here are a formula, not a press profile.
-
OKLCH
oklch(70.5% 0.187 47.6)
Lightness, chroma and hue in a perceptual space, so equal steps look equal. Modern CSS, Tailwind v4's palette, and accessible color scales.
Convert one format to another
For a single direction, these pages show the steps for the color you type and a table of common values.
- HEX to RGB Split a hex code into its red, green and blue numbers, alpha included.
- RGB to HEX Turn three 0–255 values into a six-digit code for CSS.
- HEX to CMYK A screen color as ink percentages, with the print caveat.
- RGB to CMYK RGB values to CMYK for print files.
- HSL to HSV Move a CSS HSL color into a design app's HSB picker.
HEX to Tailwind: the nearest Tailwind color
The converter above also names the closest Tailwind CSS class for any color, in both palettes: v4, defined in OKLCH, and v3, defined in hex. “exact” means the class is that color; “≈” means it's the nearest by perceptual distance (OKLab), with the next two candidates beside it. The versions can disagree: v4 redrew the palette, so a v3 exact match is often only near in v4.
For an exact brand color, keep the hex as an arbitrary value
(bg-[#1DB954]) or add it to your theme. The nearest class is for when
close enough is fine.
Click a row to load it into the converter.
| HEX | Tailwind v4 | Tailwind v3 |
|---|---|---|
| #1DB954 | emerald-500 ≈ | green-500 ≈ |
| #FF5A5F | red-400 ≈ | red-400 ≈ |
| #6C5CE7 | indigo-500 ≈ | indigo-500 ≈ |
| #00A8E8 | sky-500 ≈ | sky-500 ≈ |
| #FFC312 | amber-400 ≈ | amber-400 ≈ |
| #2D3436 | olive-800 ≈ | zinc-800 ≈ |
Color formats: questions
Which color format should I use?
For CSS, HEX or rgb() are the safe defaults, and every browser reads them. When you're adjusting colors (a hover state, a lighter tint, a scale of shades), OKLCH keeps the steps even; HSL is simpler, but its lightness isn't what the eye sees. Design apps speak HSB. Print shops want CMYK, ideally converted with their own profile.
Are HEX colors CMYK?
No. A hex code is RGB written in base 16: light from a screen. CMYK is ink on paper. The converter turns one into the other with the standard formula, but the two cover different ranges of color, so a bright screen color may not print as bright.
Why is the CMYK value only approximate?
Real CMYK depends on the press, the paper and the ink, described by an ICC profile. A formula can't know those, so treat these CMYK numbers as a starting point and ask for a printed proof for anything color-critical. For screen work, stay in RGB.
What is OKLCH, and why would I use it?
OKLCH describes a color by perceived lightness (L), chroma (C, how vivid) and hue (H, an angle). Unlike HSL, two colors with the same L look equally light, which makes it good for palettes and contrast. Current browsers support oklch() in CSS, and Tailwind v4 defines its colors in it.
What does “Outside sRGB” mean?
Formats like OKLCH, Lab and color(display-p3 …) can describe colors a standard screen can't show. When you type one, the converter shows the nearest sRGB color, and HEX, RGB and CMYK are for that nearest color.
Chrome extension
Need a color from a web page?
KD Color picks it off any page and shows HEX, RGB, HSL, OKLCH and the nearest Tailwind class.
Add to ChromeColor API
Do it in code
curl "https://color.koval.tools/v1/convert?value=%23F97316"One call returns HEX, RGB, HSL, HSV, CMYK, Lab, LCH and OKLCH. No key needed to try it. Convert docs · Pricing
Have a photo instead of a code? Pick a color from an image. See all color tools.