HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converter. HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converter. HSL Color Picker - by Brandon Mathis. 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. 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. HSLa Grid. HSL Color Picker; HTML Color Picker; Web, HEX, CSS, HSLa.
The HSL Color Picker is a simple, yet effective color workbench to generate color output and also to import colors for analysis and comparison. It has all the features you need for experimenting with the seven color contrasts in mind. The contrast of light and dark (luminance value), of hue (hue value), of saturation (saturation value & grayscale equivalent of luminance), of warm and cold (is the red or the blue value dominant?) , of complementary colors (opposite side of the color wheel), of proportion (visual weight formed by the combination of hue and luminance) and of simultanious color (e.g. thin red and yellow lines form the impression of orange).
With the HSL Color Picker you can quickly get the color codes from colors you'd like to use in other websites or desktop applications. Tip: change to fullscreen display mode in your browser (usually press [F11]-key). In general, use your mouse for graphical elements and your keyboard (type, copy & paste) for input fields. Color Picking: