HSL Color Picker

Get HSL values from images

Click a pixel for hsl(h, s%, l%) — ideal for theme systems, gradients, and accessibility tweaks.

Needs Chromium EyeDropper API

or paste (Ctrl/Cmd+V) · drag below

Drop an image to start picking

Supports JPG, PNG, WEBP, GIF, and BMP. Hover to magnify, click to lock. Images stay on your device.

Current color

Approximate name: 海洋绿

#2596be

Colors you pick from the image will show up here

Up to 8 dominant colors are extracted automatically after an image loads

Shades

Tints

Background

Aa preview title

The quick brown fox jumps over the lazy dog.

3.40:1

AA Normal: Fail

AA Large: Pass

AAA Normal: Fail

AAA Large: Fail

Why do designers like HSL?+

HSL separates hue, saturation, and lightness in a way that matches how people tune color — ideal for tints/shades and theme variants.

How is HSL different from HSV?+

Both are hue-based, but lightness models differ: HSL’s L is relative lightness, while HSV’s V tracks maximum channel brightness more closely.