Color Converter & Palette
Convert HEX/RGB/HSL and build palettes.
3-digit (#4cf) or 6-digit; the # is optional.
Result
#4C5FD5
Shades & Tints
Analogous
Pick a color or enter a HEX code.
What is this converter?
The color code converter takes a color from the picker or a typed HEX code and instantly converts it to HEX, RGB and HSL. It also builds Shades & Tints and Analogous palettes from that color — handy for web/app design, CSS work and choosing color schemes.
Notation differences
HEX — #RRGGBB hexadecimal; red/green/blue each 00–FF (0–255).
RGB — rgb(r, g, b), each channel 0–255.
HSL — hsl(h, s%, l%), Hue 0–360°, Saturation, Lightness. All three describe the same color in different ways.
Using the palette
- Shades & Tints — 9 steps varying lightness (L) from 10% to 90% at the same hue and saturation.
- Analogous — neighboring hues at ±30° and ±60° on the color wheel for harmonious schemes.
HEX→RGB→HSL conversion, worked example
Converting each HEX byte pair to decimal gives you RGB directly. For example #2ecc71 is 2e=46, cc=204, 71=113, so RGB is rgb(46, 204, 113). To get HSL, normalize R/G/B to 0-1, derive lightness (L) and saturation (S) from the max/min difference, then compute the hue angle (H) from whichever channel is the max.
| Step | Calculation | Result |
|---|---|---|
| HEX→RGB | 0x2e=46, 0xcc=204, 0x71=113 | rgb(46, 204, 113) |
| Normalize | 46/255=0.180, 204/255=0.800, 113/255=0.443 | max=0.800(G), min=0.180(R) |
| Lightness L | (max+min)/2 = (0.800+0.180)/2 | 0.49 → 49% |
| Saturation S | L not > 0.5, so (max-min)/(max+min) | 0.632 → 63% |
| Hue H | max is G, so 60×((B-R)/d+2) | 145° |
So #2ecc71 becomes hsl(145, 63%, 49%) — try it in the tool above to confirm.
Why HSL is easier for adjusting colors
HSL separates hue, saturation, and lightness into independent axes closer to how humans perceive color. Brightening a color in RGB means scaling R, G, and B together proportionally, while HSL only needs lightness (L) to change — the hue and saturation stay untouched. This tool's Shades & Tints palette works exactly this way, sweeping only L from 10% to 90%. The same logic makes lowering saturation for muted tones, or rotating hue by ±30°/±60° for analogous colors, far more intuitive than doing the equivalent math in RGB.