Color Converter
Convert between HEX, RGB, HSL, HSB and CMYK with a live preview.
| HEX | #6366f1 | |
| RGB | rgb(99, 102, 241) | |
| RGBA | rgba(99, 102, 241, 1) | |
| HSL | hsl(239, 84%, 67%) | |
| HSLA | hsla(239, 84%, 67%, 1) | |
| HSB | hsb(239, 59%, 95%) | |
| CMYK | cmyk(59%, 58%, 0%, 5%) | |
| CSS var | --color: #6366f1; |
Tints and shades
About Color Converter
Every colour on screen can be written several ways, and each notation suits a different job: hex for CSS, RGB for canvas work, HSL for building tints and shades programmatically.
This converter keeps every representation in sync as you adjust any one of them, with a live swatch, an eyedropper where the browser supports it, and copy buttons on each format.
How Color Converter works in your browser
Conversions are computed directly from the colour space definitions rather than looked up. HEX to RGB is a base-16 parse; RGB to HSL finds the maximum and minimum channel values and derives hue, saturation and lightness from their relationship. Every conversion is exact and reversible, so round-tripping a colour returns the value you started with.
HSL is included because it is the space that matches how people describe colour changes. "Slightly darker" is a single lightness adjustment in HSL, but requires changing all three channels in RGB, usually by unequal amounts.
Alpha is carried through every format that supports it — eight-digit hex, rgba() and hsla() — so transparency survives conversion instead of being silently dropped.
When to use it
- Converting a hex value from a design file into the hsl() form a CSS variable system uses.
- Producing a lighter or darker variant of a brand colour by changing lightness alone.
- Translating a colour from a style guide into the format a particular framework expects.
- Reading the exact value behind a colour you have been given in an unfamiliar notation.
Frequently asked questions
How do I convert HEX to RGB?
Each pair of hex digits is one channel in base 16. #FF8800 is red 255, green 136, blue 0. The conversion is exact and reversible.
What is HSL used for?
It matches how people describe colour changes. Making something slightly darker is one lightness adjustment in HSL, but requires changing all three RGB channels by unequal amounts.
What is the difference between HSL and HSB?
Both use hue and saturation, but HSL varies lightness towards white and black, while HSB varies brightness towards black only. Design tools usually show HSB.
Is CMYK accurate for print?
The conversion here is the standard naive formula. Real print work needs an ICC profile for the specific press and paper.
Does it support alpha?
Yes. Set an alpha value and the RGBA, HSLA and eight-digit hex forms are all produced.