Color Converter
Convert colors between HEX, RGB, HSL, HSV and CMYK
All five representations update live as you type or pick.
Colour spaces and their small print
Every format from one paste
Paste "indigo", "#4f46e5", rgb(79,70,229) or hsl(245,58%,59%) and instantly get all five representations — no retyping a color in every mode.
Live swatch with picker
The preview updates as you type or drag the native color picker, so what you convert is exactly the swatch you see.
What is a color converter?
A color converter translates a single color between the formats different tools speak. Design software exports HEX or CMYK, a frontend engineer needs rgb() or hsl() for CSS, and a data tool might want hsv(). Rather than opening a color picker five times, paste the value you have and instantly see all the others: "#4f46e5" → rgb(79, 70, 229) → hsl(245, 58%, 59%). The converter parses whichever format you provide, computes every other representation with the standard forward and inverse formulas, and shows a live swatch so you can confirm the hue before you copy it.
What it can do
- Parse hex (#fff, #ffffff, #rrggbbaa) and rgba() inputs
- Compute rgb / hsl / hsv / cmyk equivalents for every input
- Live preview swatch that updates as you type or pick
- Preserve alpha where present (8-digit hex, rgba)
- Copy each format with its own button
- Native color picker for visual selection
When to use it
- Moving a brand color from a design tool into CSS variables
- Converting a CMYK print value into a web-safe hex
- Getting an hsl value for CSS gradients and dark-mode palettes
- Double-checking how another converter rounded a color
Privacy: the conversion happens entirely in your browser — nothing you enter is ever uploaded.
HEX, RGB, HSL and what contrast really means
- HEX and RGB are the same sRGB values in different notation — converting between them is pure arithmetic, never a colour shift.
- HSL wraps the same gamut on a cylinder: hue spins, saturation radiates, lightness rises. Equal HSL steps do not look equally different — perceptual spaces like OKLCH were invented for that.
- WCAG contrast is computed from relative luminance after gamma expansion, not from raw RGB averages; the checker below uses the official 2.1 formula.
Frequently asked questions
Which formats are supported?⌄
Hex (3, 4, 6 and 8 digits — 8-digit adds alpha), rgb()/rgba(), hsl()/hsla(), hsv()/hsb() and cmyk(). Input is normalized automatically whether you type #FFF, rgb(255 0 0) or hsl(0, 100%, 50%).
Are the conversions exact?⌄
They match the standard CSS conversion formulas (rounded to whole channels). HSL/HSV hues are preserved at one-decimal precision; CMYK is computed with conventional conversion and rounded to one decimal percent.
Is my color sent anywhere?⌄
No. Everything runs in your browser with plain JavaScript — nothing you enter is transmitted or stored.