Copyright © 2010 Michael Pitt. All trademarks used are the properties of their respective owners.
This is an overview.
Not sure what numbers to put in? Try a preset. They provide some good places to start. Click on a preset and then click the Display button.
NOTE: Presets don't change anything in the Options section.
You will be shown two types swatches. At the top will be grays only. Under that will be the color swatches (which may include their own grays). This settings in this section control the top group of grays only.
A whole number between 0 and 100 that selects the lightest shade of gray to show.
A whole number between 0 and 100 that selects the darkest shade of gray to show.
A whole number between 1 and 100 that selects the number of different grays to show in total.
This section has settings that control which color swatches to display. You select the colors using the HSL color model. This is a way of describing a color that resembles the way it's perceived by the human eye. Therefore, it's very good for generating and arranging color swatches in a useful way. You can select the ranges of hue, saturation, and lightness to show, and a color swatch will be displayed for each and every possible combination of those values.
In the HSL color model, the hue determines the main color that is shown (e.g. red, orange, yellow, green, etc). It starts with red at 0 degrees, moves through all the colors of the rainbow and then back to red again at 360 degrees.
A whole number between 0 and 360 that selects the first hue to show.
A whole number between 0 and 360 that selects the last hue to show.
A whole number between 0 and 360 that selects the number of degrees between the hues that are displayed. A smaller number means more hues shown. A larger number means fewer hues shown.
In the HSL color model, a saturation of 1 means the color is fully saturated and 0 is a shade of gray (i.e. no color). So, the lower the saturation, the more gray a color appears to be.
A whole number between 0 and 100 that selects the first saturation to show.
A whole number between 0 and 100 that selects the last saturation to show.
A whole number between 1 and 35 that selects the total number of different saturations that are displayed. 35 is the maximum only because beyond that point it becomes nearly impossible to distinguish between the different colors .
NOTE: If Hide gray is enabled (see below), and your Start value is 0, then you will see one less level of saturation than you selected (because it's hidden).
This removes all pure gray colors (saturation=0%) from the color swatches. This setting does not effect the gray swatches shown at the very top of the page. Sometimes it's useful to keep this setting off, so that you can better judge how far a color is from gray. Sometimes it's better to have this setting on, so that all the duplicate gray swatches don't clutter the screen.
In the HSL color model, a lightness of 0 is black and a lightness of 1 is white. A lightness of 0.5 shows the most vibrant color (i.e. it doesn't look like a shade or a tint). For example, a saturated red hue looks red at 0.5, looks like a dark red at a lower value, and looks pink at a higher value.
A whole number between 0 and 100 that selects the first lightness level to show.
A whole number between 0 and 100 that selects the last lightness level to show.
A whole number between 1 and 35 that selects the total number of different lightness levels that are displayed. 35 is the maximum only because beyond that point it becomes nearly impossible to distinguish between the different colors .
NOTE: If Hide B&W is enabled (see below), and your Start value is 0 or your End value is 100, then you might see one or two fewer levels of lightness than you selected (because they are hidden).
This removes any pure black (lightness = 0%) or pure white (lightness = 100%) swatches from the color swatches. This setting does not affect the gray swatches at the very top of the page. Sometimes it's useful to keep this setting off, so that you can better judge how far a color is from black or white. Sometimes it's better to have this setting on, so that all the duplicate black and white swatches don't clutter the screen.
This section has some additional options for how the swatches are displayed.
This selects what order to display the swatches in. The "H" stands for Hue, the "S" stands for Saturation, and the "L" stands for Lightness. The first letter indicates what should change (hue, saturation, or lightness) as you move from group to group down the page. The second letter indicates what changes as you move from left to right inside a group. The last letter indicates what changes as you move from top to bottom inside a group. So, for example, if you chose "SHL" then each group of swatches would be more saturated than the previous group. Within each group, the hue would change from left to right, and the lightness would change from top to bottom. It is important to remember that the swatches shown will be exactly the same regardless of which grouping order you choose. Only the way they are arranged on the screen changes.
This can be a very powerful feature. If you're looking for a bluish color, then group by hue first. If you're looking for a subdued color, then group by saturation first. If you're looking for a dark color, then group by lightness first. You should be able to quickly find what you're looking for.
This selects what size the displayed swatches will be. You can fit more swatches on the screen when they are smaller, but it also becomes more difficult for your eyes to fully distinguish each color.
This selects how far apart the swatches in each group will be. Having no gap between them can result in an optical illusion where each swatch appears to no longer be one solid color. So, use this setting with care. It can be hard for your eye to get a real sense of each color without the gap.
This setting alters the way the background color is chosen for the swatches..
Makes the background the gradient color (the color that changes from swatch to swatch based on your chosen HSL ranges).
Displays a box where you can type in a color manually (in #RRGGBB or #RGB hex format). Every single swatch will have that same background color. This is useful if you want to find a good text color for a certain background.
NOTE: If the label color is set to something other than Gradient, then the HSL settings are useless. Therefore, the display will consist of a single large box with the chosen background and label colors.
Each swatch has a label inside that indicates the gradient color (the color that changes from swatch to swatch based on your chosen HSL ranges). This setting determines the color of the actual text itself.
Makes the text the same color as the background color. You can select the label with your mouse if you want to read it.
Makes the text either white or black (depending on which is the most legible).
Makes the text the same color as the gradient color (Note: if the background color is also the gradient color, then this setting will do the same thing as Hidden).
Displays a box where you can type in a color manually (in #RRGGBB or #RGB hex format). Every single swatch will have that same text color. This is useful if you want to find a good background for a certain text color.
This selects what color format to use for the labels in each swatch. Note: All numbers are rounded to the nearest integer. This makes the numbers far easier to work with, and the differences are so slight as to be unnoticeable.
Show the color in #RRGGBB hex format (e.g."#ff0000").
Show the color in RGB format (e.g. "255,000,000"). The numbers show respectively: the amount of red (0-255), the amount of green (0-255), and the amount of blue (0-255) in the color.
Show the color in HSL format (e.g. "000,100,050"). The numbers show respectively: the hue (0°-360°), the saturation (0%-100%), and the lightness (0%-100%) of the color.
Show the color in HSV format (e.g. "000,100,100"). The numbers show respectively: the hue (0°-360°), the saturation (0%-100%), and the value (0-100) of the color.
This will display a title above each group of swatches. The grays at the top of the page will be labeled "Grays". The color groups will be labeled with the quality of the color that is the same for all swatches in that group (e.g. in LSH grouping order, the groups would be labeled with the lightness value).
Your browser does not support Javascript or it has been disabled. This page will not function without it.
This utility will allow you to quickly and easily select colors for use in web pages, images, and computer programs. It accepts a range of HSL values as input, and displays colors in Hex, RGB, HSL, and HSV formats. You can always hover over a particular swatch to see it's HSL values. Once you've found a color you like, just select the text inside that box and copy the color value. You can get more information about the individual settings by clicking the help button located in the upper-right corner of this page.
Copyright © 2010 Michael Pitt. All trademarks used are the properties of their respective owners.