Color Converter — HEX / RGB / HSL / HSV / CMYK

Real-world use cases

• Hand a Figma OKLCH color to a frontend dev as HEX

  Figma 2025 lets you pick colors in OKLCH, which is great inside Figma but useless the moment you copy-paste the value into a Tailwind config or a legacy stylesheet that has to render in Safari 15. Workflow: grab the OKLCH from Figma's inspector, convert it to RGB in your head (or via the browser dev tools), paste those RGB numbers into this tool, read back the HEX. HEX is still the most universally accepted color format in CSS-in-JS libraries, email templates, mobile native, and any tooling older than 2023 — when in doubt, hand off HEX.

• Build a dark-mode hover state from a base color

  You have a button background `#06b6d4` and need a hover state that's noticeably lighter for dark mode. Paste the HEX, look at the HSL row — `H: 188° S: 95% L: 43%`. Add 5 to L (to `L: 48%`), type the new HSL back, copy the new HEX. The result is brighter by exactly the amount you asked for, and the hue stays locked. Way more predictable than nudging the HEX by eye, and the contrast ratio readout against black/white tells you immediately if the new state still passes WCAG AA.

• Verify what users on iOS Display P3 will actually see

  Your design system was authored in sRGB but the iPhone renders in Display P3 by default. A `#FF0000` in your Figma file lights up redder on an iPhone than on your MacBook external monitor. Paste the brand red, read the RGB triple, then sanity-check it on an actual P3 device before signing off — the contrast readout here is a sRGB-relative number, so if your phone preview looks more saturated than the WCAG calc suggests, that's the P3 uplift talking, not a bug in the math.

• Migrate a Tailwind RGB palette to HSL CSS variables

  You're moving a Tailwind config from hardcoded RGB to CSS custom properties so you can theme-switch at runtime. Each color needs the HSL form so a single `--primary-hue` variable can drive light/dark themes. Paste each RGB triple from `tailwind.config.js`, copy the HSL string (the tool spits it out as `hsl(188 95% 43%)` — the modern space-separated syntax). Paste into your `:root` block. One palette migration is 20 quick paste-and-copy cycles rather than 20 manual HSL conversions.

• Diagnose a browser color-rendering mismatch

  A user reports your CTA looks "muddier" in Safari than Chrome. Same HEX, different rendering — and the difference usually traces back to how each browser resolves color interpolation, gamma, or the new OKLCH/Display P3 paths. Paste the HEX, look at the HSL and HSV side-by-side. If the perceived issue is saturation-related, HSV's S row tells you the true source-of-truth saturation; if it's lightness-related, HSL's L row does. Pair the numeric readout with a screenshot diff from each browser and you have evidence instead of vibes.

Common pitfalls

• The CSS function names are lowercase. `RGB(6, 182, 212)` works in vanilla CSS (browsers normalize), but several CSS-in-JS runtimes (styled-components older versions, some Emotion configs) only accept `rgb(...)`. Same for `hsl(...)` and `hsla(...)`. Copy the lowercase form this tool generates.

• HSL and HSV both start with H and S but the S means different things — HSL's S is "saturation relative to a neutral gray at the same lightness", HSV's S is "saturation relative to the brightest version of the same hue". Swapping one S into the other tool will give you a visibly wrong color. Read the row label, not just the number.

• HEX shorthand `#f00` expands to `#ff0000` in CSS, but some color-validation libraries (older Joi schemas, some form validators) reject 3-digit HEX outright. If your downstream system is strict, output the 6-digit form. This tool always shows the full 6-digit HEX so you don't get caught.

Privacy