HSL color picker

Hue, saturation and lightness sliders with instant HEX/RGB values — the most direct way to make a color lighter, darker or more vivid.

Input

Color value

#E4572ECustom color · oklch(63.72% 0.184 36.5)

HEX#E4572E

RGBrgb(228, 87, 46)

HSLhsl(14, 77%, 54%)

HSVhsv(14, 80%, 89%)

OKLCHoklch(63.72% 0.184 36.5)

OkLaboklab(63.72% 0.1478 0.1093)

CMYKcmyk(0%, 61.8%, 79.8%, 10.6%)

CSScolor: #e4572e;

Format

Every editor writes to the same color — switch tabs without losing sync.

Contrast

WCAG contrast of this color used as text on white and on black.

On white3.68 : 1On black5.70 : 1Best text color#000000 5.70 : 1

Closest named colors

Tomato (survey)ΔE 4.2 Orangey RedΔE 4.4 Orange RedΔE 4.5

Continue with this color

Palette from this →Check contrast →Shades and tints →All formats →

Need every format at once? Open the universal color picker →

FAQ

What does each HSL slider do?

Hue (0–360°) rotates around the color wheel; saturation (0–100%) controls intensity; lightness (0–100%) mixes toward black at 0% and white at 100%. At 50% lightness you get the "purest" version of a hue.

When is HSL the wrong model?

When building lightness ramps: HSL lightness is not perceptual, so a yellow and a blue at "50%" look very different in brightness. Use the OKLCH tab for perceptual scales.

What is HSL used for in CSS?

hsl(210 80% 45%) is a first-class CSS color. Design systems often define hues in HSL and then tune lightness per role.

Related tools

Color Picker

Universal picker — HEX, RGB, HSL, HSV, OKLCH and CMYK in one place, with an eyedropper.

RGB Color Picker

Pick colors by RGB channels — live preview, HEX and HSL output, contrast info.

Color Converter

HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH and XYZ in one place.

HEX Color Picker

Pick a color and read it as a HEX code — sliders, native picker and instant copy.

Loading…