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.
Link to this page: