Color Converter — HEX, RGB & HSL
Convert colors between HEX, RGB, and HSL formats with a live preview.
About the Color Converter
Colors on the web and in design software are represented in several different formats — HEX codes like #3B82F6, RGB values like rgb(59, 130, 246), and HSL values like hsl(217, 91%, 60%) — and different tools or codebases often expect a specific one. This converter translates a color between all three formats at once and shows a live preview swatch.
It's useful for designers moving a color between Figma, CSS, and a brand guideline, or developers who need to convert a design tool's HEX export into the HSL format used for programmatically generating color shades.
Worked example
Example: entering the HEX code #3B82F6 instantly shows the equivalent RGB value rgb(59, 130, 246) and HSL value hsl(217, 91%, 60%), along with a live preview of the color.
Frequently asked questions
- What's the difference between RGB and HSL?
- RGB defines a color by its red, green, and blue light intensities (0–255 each). HSL defines it by hue (a position on the color wheel), saturation, and lightness — which is often more intuitive for adjusting a color's brightness or vividness without changing its base hue.
- Can I convert a color with transparency (alpha)?
- This converter focuses on solid HEX/RGB/HSL values. For transparency, use the 8-digit HEX (#RRGGBBAA) or RGBA/HSLA formats supported by most modern CSS, adding the alpha value separately.
- Why do designers use HSL instead of HEX?
- HSL makes it easy to create consistent color palettes — you can keep the hue fixed and just adjust lightness or saturation to get lighter/darker or more/less vivid variants of the same base color, which is harder to do by eye in HEX or RGB.
- Is a 3-digit HEX code the same as a 6-digit one?
- Yes — a shorthand 3-digit HEX code like #38F is equivalent to doubling each digit to get the full 6-digit form, #3388FF. This tool accepts both formats.