Enter RGB Values
Input or choose RGB values
See Results
View HSL and other formats
Copy or Use
Copy, save, or reuse your color
Choose a color visually, use sliders, or paste a value.
Quick Presets
hsl(9, 100%, 64%)
tomato
PreviewOriginal
rgb(255, 99, 71)
Lighten 20%
rgb(255, 130, 108)
Darken 20%
rgb(204, 79, 57)
Complementary
rgb(71, 227, 255)
Aa
With White Text
Aa
With Black Text
Other Formats
Color Palette
Did you know?
You can pick a color from your screen in browsers that support the EyeDropper API.
HSL is convenient when you want to keep a color's hue stable while shifting its lightness or saturation. The converter takes an RGB triple and returns the matching CSS hsl() string with hue in degrees and the other two channels as percentages. Common use cases include porting sampled pixel values into stylesheets and building lightness ramps from a single brand color.
HSL is mathematically convenient but not perceptually uniform; for perceptual editing prefer OKLCH on the Color Converter page.
Need more notations? Open the Color Converter for HEX, RGB, HSL, LAB, OKLAB, and OKLCH, or use the Color Contrast Checker to validate foreground/background pairs before shipping.
No. HSL is convenient for stylesheet editing but not perceptually uniform; OKLCH on the Color Converter is a better fit for perceptual ramps.
Greys have no defined hue, so the converter reports 0 and a saturation of 0 to keep the output a valid hsl() value.
Yes. The Other Formats panel always lists hex, RGB, RGBA, HSL, HSLA, HSV, CMYK, and the nearest named color.