HSL Color Picker – A most excellent HSL color picker

在写 CSS 代码的时候,免不了需要将 16 进制的颜色代码转化成 HSL() 格式,HSL Color Picker 就是一个在线的色值转换工具。

HSL Color Picker

如果你还不了什么是 HSL,可以看看 HSL Color Picker 官网的介绍

What’s so great about HSL

HSL (Hue, Saturation, Luminosity) allows us to describe meaningful relationships between colors. Give this brown color, hsl(36, 73%, 10%), it’s clear that if we desaturate 40 steps and lighten 70 steps we get hsl(36, 33%, 80%), a cream color.
Look at that in hex, #2C1D07 to #DDCFBB, or in rgb, rgb(44, 29, 7) to rgb(221, 207, 187), and the relationship between colors isn’t evident in any meaningful way.


In graphics software I pick colors in HSB (Hue, Saturation, Brightness) because it feels more natural to work with than RGB or CMYK.
Now, with CSS3 we can use HSL which is actually quite different than HSB. Without a decent HSL color picker, it’s difficult to understand.

How to think in HSL

Pick a Hue from 0 to 360 and with saturation at 100 and luminosity at 50 and you’ll have the purest form of that color. Reduce the saturation and you move towards gray.
Increasing the luminosity moves you towards white, decreasing it moves you towards black.