Color Converter
HEX, RGB, and HSL — paste any one, get all three, with a live swatch and visual picker. Standard CSS conversion formulas, shown as you go.
| HEX | #C2612E | |
| RGB | rgb(194, 97, 46) | |
| HSL | hsl(21, 62%, 47%) | |
| OKLCH | oklch(60.0% 0.140 45.9) |
How to use this tool
- Paste any CSS color — #C2612E, rgb(194, 97, 46), or hsl(21, 62%, 47%) — or use the visual picker.
- All three formats update together, each with its own copy button.
How it works
HEX and RGB are the same numbers in different clothes: two hex digits per red/green/blue channel. HSL re-expresses them as hue (0–360° around the color wheel), saturation, and lightness — far friendlier for adjusting a color ('same hue, a bit lighter') than nudging RGB channels. The conversions are the standard CSS Color 3 formulas.
Frequently asked questions
How do I convert HEX to RGB?
Each pair of hex digits is one channel in base 16: #C2612E → R=0xC2=194, G=0x61=97, B=0x2E=46 → rgb(194, 97, 46). The tool does this instantly in both directions.
When should I use HSL instead of HEX?
When designing: HSL makes systematic variations trivial — hover states (drop lightness 10%), muted variants (drop saturation), complementary hues (rotate 180°). HEX is compact for copy-paste; they're interchangeable.
Does this support alpha (transparency)?
This tool converts opaque colors. For alpha, append it in CSS: #C2612E80, rgb(194 97 46 / 50%), or hsl(21 62% 47% / 50%).