Quick answer
A color converter rewrites one color in different notations: HEX (#3b82f6), RGB (rgb(59 130 246)), HSL, and perceptual models such as OKLCH and LAB that describe the same color in other terms. Paste any CSS color, or a 0xAARRGGBB value from Android or Flutter, into Playxoft's free Color Converter and every format appears at once with one-click copy. Adjust it with OKLCH or HSL sliders, then copy it as a CSS variable, Tailwind class, SwiftUI, Compose or Flutter color.
- Any CSS color in
- 12 formats out
- OKLCH and HSL sliders
- Alpha support
- Nearest named color
- Swift, Compose and Flutter code
- Eyedropper
- Shareable links
How to use the Color Converter
- 1Paste or type a color into Your color: hex, rgb(), hsl(), oklch(), a CSS color name, or 0xAARRGGBB from mobile code.
- 2Check the badge at the right of the field to confirm which format was detected.
- 3Fine-tune the color with the OKLCH or HSL sliders, and set Alpha for transparency.
- 4Copy any value from Every format, or a platform snippet from Copy as code.
- 5Use the link button on the swatch to copy a share link that reopens this exact color.
Which color format should I use?
Every format below describes the same sRGB color; they differ in what they make easy. Pick by the job, not by habit:
| Format | Best for | Example |
|---|---|---|
| HEX | Everyday web code, design handoff | #3b82f6 |
| RGB | Canvas, image code, anything 0–255 | rgb(59 130 246) |
| HSL | Quick manual tweaks in CSS | hsl(217 91% 60%) |
| HWB | Tinting and shading a pure hue | hwb(217 23% 4%) |
| HSV / HSB | Design-app color pickers (not valid CSS) | hsv(217 76% 96%) |
| OKLCH | Design systems, palettes, theming | oklch(62.31% 0.188 259.81) |
| OKLAB | Gradients, color distance, mixing | oklab(62.31% -0.0332 -0.1851) |
| LAB / LCH | Print and color-managed workflows | lab(54.62% 8.76 -65.79) |
| CMYK | Rough print values (not valid CSS; see below) | cmyk(76% 47% 0% 4%) |
| XYZ | The reference space other models derive from | color(xyz-d65 0.2642 0.2355 0.9034) |
HEX and RGB are the same numbers in different bases: 3b in hex is 59 in decimal. HSL, HWB and HSV are rearrangements of RGB that are easier to reason about, but they are not perceptual. OKLCH, OKLAB, LAB and LCH are built on models of human vision, which is why they are the right tools for anything that must *look* consistent.
Why does OKLCH matter for design systems?
HSL's lightness is a formula, not a perception. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) share "50% lightness", yet the yellow has an OKLCH lightness of about 97% and the blue about 45%. Build a palette in HSL and every hue needs hand-correcting.
OKLCH, from Björn Ottosson's OKLab model, fixes that. Its three numbers are lightness (0–100%), chroma (colorfulness, from 0 up to about 0.4, which CSS treats as 100%; colors inside sRGB stay below about 0.32) and hue (0–360°), and equal lightness looks equally light at every hue. That unlocks things HSL cannot do:
- Generate tints and shades by changing one number, with the hue staying put (CIE LCH tends to drift blues toward purple; OKLCH was designed to avoid that).
- Swap a brand hue and keep every contrast ratio roughly intact, because lightness carries most of the luminance.
- Describe wide-gamut Display P3 colors that HEX cannot express.
:root {
--brand: oklch(62% 0.19 260);
--brand-hover: oklch(55% 0.19 260); /* same hue, just darker */
}Tailwind CSS v4 defines its whole default palette in OKLCH, and oklch() works in Chrome and Edge 111+, Safari 15.4+ and Firefox 113+. If you need to support older browsers, declare a HEX fallback first. When a value falls outside sRGB, this converter flags it and offers Map to sRGB, which lowers chroma while keeping lightness and hue.
How do I write a HEX color with transparency?
Add two more hex digits for alpha: #RRGGBBAA. The alpha digits run from 00 (transparent) to FF (opaque), so 50% opacity is 80 (128 of 255). The four-digit short form works too: #f008 is #ff000088.
| Opacity | Hex alpha | Opacity | Hex alpha |
|---|---|---|---|
| 100% | FF | 50% | 80 |
| 90% | E6 | 40% | 66 |
| 80% | CC | 30% | 4D |
| 75% | BF | 25% | 40 |
| 70% | B3 | 20% | 33 |
| 60% | 99 | 10% | 1A |
Android, Jetpack Compose and Flutter put alpha first: 0xAARRGGBB. CSS #3b82f680 becomes 0x803B82F6 in Flutter. Mixing up the two orders is a classic bug, which is why the converter accepts and outputs both.
Why does my CMYK conversion not match my printer?
Screen-to-ink conversion depends on the paper, the inks and the press, all captured in an ICC color profile (for example FOGRA39 for coated paper in Europe, or GRACoL in the US). The CMYK numbers here use the simple device-independent formula: K = 1 − max(R, G, B), then C, M and Y from what remains. They are useful as a starting point and for understanding a color's ink balance, but they are not press-ready.
For real print work, ask your printer for their profile and convert in a color-managed app such as Photoshop, Illustrator or Affinity. Expect vivid screen colors, especially bright blues, greens and oranges, to come out duller: they sit outside what CMYK inks can reproduce.
Frequently asked questions
Last updated by the Playxoft engineering team.