HSL Color Picker

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. The CSS output is an add-on for web designers who want to generate color codes for html documents with the possibility to take advantage of the new CSS3 color notation (RGB(a), HSL(a)).

How to use

Tip: change to fullscreen display mode in your browser
(usually press [F11]-key). The layout adapts to your screen ...

In general, use your mouse for graphical elements and your keyboard (type, copy & paste) for input fields.

Double-click in an input field to select its contents. Triple-click in the #HEX and the CSS output fields to select their contents.

Click once on the large preview square to save a color to the clipboard.

Click once on a clipboard selector to activate a different container.

Double-click on a clipboard selector to reset the color value of its container.

Color Picking:

It's recommended to use the sequence - hue - lightness - saturation - for color picking.

For a new color it's recommended to begin with a saturation value of 100% but bear in mind that a "natural" looking color rarely has a saturation value of 100%.

Saving the Clipboard Colors:

Click on the permalink by which you'll extend the URL of your browser's address bar with the color codes of your current clipboard colors. Then bookmark this page like you do with any other page.