🌈 HEX ↔ RGB ↔ HSL Converter
Paste a color in any format — #hex, rgb() or hsl() — and get it converted to all three, with a live swatch preview.
Frequently Asked Questions
Which input formats are accepted?
HEX with or without the # in 3-digit (#1af) or 6-digit (#11aaff) form, RGB as rgb(16, 185, 129) or just 16, 185, 129, and HSL as hsl(160, 84%, 39%). Whitespace and capitalisation don't matter.
How does HEX map to RGB?
Each pair of hex digits is one channel: #10b981 means red = 0x10 = 16, green = 0xb9 = 185, blue = 0x81 = 129 — so it equals rgb(16, 185, 129). The 3-digit shorthand doubles each digit: #1af = #11aaff.
How is HSL calculated from RGB?
Hue is the angle (0–360°) on the color wheel derived from which channel dominates; lightness is the average of the largest and smallest channels; and saturation measures how far the color is from grey at that lightness. HSL values are rounded to whole numbers, so converting back can differ by ±1 in the RGB channels.
Why use HSL instead of HEX or RGB in CSS?
HSL is easier to adjust by hand: raise or lower the lightness for hover states, or reduce saturation for muted variants, without recomputing all three channels. All modern browsers support hsl() everywhere color values are allowed.
Is alpha (transparency) supported?
This tool converts opaque colors — the 3 and 6 digit HEX, rgb() and hsl() forms. If you paste rgba() or hsla(), the alpha component is ignored and the opaque color is converted.