Color Converter
Convert colors between HEX, RGB, and HSL with a live preview swatch.
🎨HEX ↔ RGB ↔ HSL, with a live swatch
Paste a colour in any format — #4f46e5, rgb(79, 70, 229), or hsl(243, 75%, 59%) — and get the other two instantly, with a live preview swatch and a native picker. The three formats describe the same colour three ways; converting between them is daily work for anyone touching CSS.
🧮Three languages for one colour
HEX and RGB are the same numbers in different clothing — two hex digits per channel. HSL is the human-friendly one: hue picks the colour wheel angle, saturation its intensity, lightness its brightness — which makes "same colour, slightly darker" a one-number tweak instead of guesswork.
#4f46e5 = rgb(79, 70, 229) = hsl(243, 75%, 59%). Want a darker shade for hover? Drop lightness to 45% — no channel algebra needed.💡Colour tips for the web
- Design in HSL, ship in HEX: adjust lightness/saturation intuitively, then paste the hex.
- Hover/active states: same hue and saturation, lightness ±10% — instantly cohesive.
- Check text contrast (4.5:1 for body text) — a pretty pair can be an unreadable pair.
- #4f46e5 and #4F46E5 are identical; case never matters in hex.
💡 Frequently Asked Questions
How do I convert HEX to RGB?+
Split the hex into pairs and read each as a number 0–255: #4f46e5 → 4f=79, 46=70, e5=229 → rgb(79, 70, 229). Paste any hex here and the conversion (plus HSL) is instant.
What is HSL and why use it?+
Hue (0–360° on the colour wheel), Saturation (0–100%), Lightness (0–100%). It matches how people think about colour — 'a bit darker' or 'less vivid' is a single-number change, which is why designers prefer editing in HSL.
What are the 3-digit hex codes like #fff?+
Shorthand where each digit doubles: #fff = #ffffff (white), #4ae = #44aaee. Handy for quick grays and simple colours; expand to 6 digits when precision matters.
How do I make a colour darker for a hover state?+
Convert to HSL and reduce lightness by about 10 percentage points, keeping hue and saturation. That preserves the colour's character — unlike darkening RGB channels, which can shift the hue.
Does this support transparency (alpha)?+
The converter works with opaque colours (the formats above). For transparency, append alpha in CSS: #4f46e5cc (8-digit hex) or rgba(79, 70, 229, 0.8).