Color Converter — HEX, RGB, HSL
Paste a HEX, RGB, or HSL color to convert it to every format, with a live preview and shades.
| HEX | |
| RGB | |
| HSL |
Shades (click to use)
Conversions run locally in your browser. Shades keep the hue and saturation fixed and step lightness from 90% down to 10%.
How it works
Every color has three equivalent spellings: HEX for CSS and design handoffs, RGB for canvas and image work, HSL for reasoning about relationships between colors. The shade strip turns any input color into a 9-step scale, which is usually all you need to derive hover, border, and background variants from one brand color. Click a shade to load it and copy whichever format you need.
FAQ
What is HSL good for?
HSL separates hue (the color), saturation (intensity), and lightness — so making a hover state 10% darker is just lowering L, without touching the hue. That's much harder to reason about in HEX or RGB, which is why design systems define palettes in HSL.
What does 3-digit hex mean?
#abc is shorthand where each digit doubles: #aabbcc. It only works when each channel's two hex digits repeat, so it covers a coarser set of colors — fine for quick prototyping.
How are the shades generated?
The hue and saturation stay fixed while lightness steps from 90% down to 10% in HSL space — the standard way UI palettes (like Tailwind's 100–900 scales) are built.