Enter Color name Values
Input or choose Color name 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.
Start from a readable CSS named color and convert it into HSL so you can tune saturation or lightness without losing the hue identity. Ideal as a starting point for a design system that wants to expose accessible variants of a familiar named color.
Hue is preserved through the conversion; only saturation and lightness change as you adjust the result, which keeps the family character of the color recognisable.
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.
Yes. Names are matched after whitespace is removed, so rebecca purple and rebeccapurple both resolve.
Common synonyms like grey and gray both resolve, since they alias to the same underlying CSS value.
Yes. Saturation and lightness are output as integer percentages.