Color Converter
HEX, RGB, and HSL all describe the same colors, but each is useful in different situations — HEX is compact for CSS, RGB matches how screens mix light, and HSL (hue/saturation/lightness) is easier for humans to reason about ("a bit lighter", "more saturated"). This tool converts between all three instantly, with a live picker.
How to use
- Use the color picker, or type a value directly into the HEX, RGB, or HSL field.
- All three formats update together, whichever one you edit.
- Copy whichever format you need for your CSS, design tool, or code.
FAQ
What does HSL stand for?
Hue (0–360°, the color itself), Saturation (0–100%, how vivid vs. gray), and Lightness (0–100%, how close to black or white). It maps closely to how people intuitively describe colors.
What RGB/HSL formats can I type in?
Plain comma-separated values (37, 99, 235) or the full CSS function syntax (rgb(37, 99, 235), hsl(217, 91%, 60%)) both work.
Does this support alpha/transparency?
Not currently — this tool focuses on the three most common opaque color formats. For transparency, append an alpha value to the copied result yourself (e.g. rgba(..., 0.5)).