HSL to RGB converter
Paste a HSL color to get its RGB value, or pick a color. Every other CSS format updates as you type, and any value copies in one click.
Common colors in HSL and RGB
| Color | HSL | RGB |
|---|---|---|
| Blue | hsl(217, 91%, 60%) | rgb(59, 130, 246) |
| Red | hsl(0, 84%, 60%) | rgb(239, 68, 68) |
| Green | hsl(142, 71%, 45%) | rgb(34, 197, 94) |
| Amber | hsl(38, 92%, 50%) | rgb(245, 158, 11) |
| Violet | hsl(258, 90%, 66%) | rgb(139, 92, 246) |
| Slate | hsl(215, 16%, 47%) | rgb(100, 116, 139) |
| White | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| Black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
Why convert to RGB?
RGB maps directly to how screens mix light, and it is what canvas, image and most JavaScript color APIs work with.
Color formats explained
- HEX
- Six hexadecimal digits for red, green and blue, like #3B82F6. Add two more digits for opacity (#3B82F680 is 50%). The most common way to write a color in CSS and design tools.
- RGB and RGBA
- Red, green and blue channels from 0 to 255, like rgb(59, 130, 246). RGBA adds an alpha channel from 0 (transparent) to 1 (opaque): rgba(59, 130, 246, 0.5).
- HSL and HSLA
- Hue in degrees, then saturation and lightness as percentages, like hsl(217, 91%, 60%). Easier to tweak by hand than RGB: change the hue to get a new color with the same feel.
- OKLCH
- Perceptual lightness, chroma and hue, like oklch(62.31% 0.188 259.81). Equal steps in lightness look equal to the eye, which makes OKLCH the best format for building shade scales and themes. Supported in every modern browser and used by Tailwind CSS v4.
- LAB
- CIE Lab: lightness plus two color axes, a (green to red) and b (blue to yellow), like lab(54.62% 8.77 -65.79). Device-independent and used for color matching and print workflows.
Color converters
- HEX to RGB
- HEX to HSL
- HEX to OKLCH
- HEX to LAB
- RGB to HEX
- RGB to HSL
- RGB to OKLCH
- RGB to LAB
- HSL to HEX
- HSL to RGB
- HSL to OKLCH
- HSL to LAB
- OKLCH to HEX
- OKLCH to RGB
- OKLCH to HSL
- OKLCH to LAB
- LAB to HEX
- LAB to RGB
- LAB to HSL
- LAB to OKLCH
Need every format at once? Use the color picker. To turn one color into a full scale, try the shades generator.