How to use the RGB Color Calculator
- Calculator introduction
- Overview of features
- Picking & choosing colors
- Adjusting the tone of a color (tweaking)
- About HEX codes
- About the RGB system
- About the HSV system
- What about web-safe colors?
Picking colors can be done with a color table, entering color names, entering HEX codes, RGB values, and HSV values. Tweaking colors is done by individually adjusting either the RGB values or the HSV values.
Please refer to the appropriate sections of this help page if you are unfamiliar with any of these terms.
HEX Code Area
In the HEX Code Area, type in a HEX code and hit the Calculate button. The HEX code's color will be displayed in the background and that color's RGB and HSV numbers will be displayed in their corresponding areas.Note: Color names can be entered in the HEX Code Area as long as they correspond to a standard browser-supported color name.
RGB Area
In the RGB Area, enter three RGB numbers and hit Calculate. The resulting color will be displayed in the background and that color's HEX code and HSV numbers will be displayed in their corresponding areas.HSV Area
In the HSV Area, enter three HSV numbers and hit Calculate. The resulting color will be displayed in the background and that color's RGB numbers and HEX code will be displayed in their corresponding areas.Tweaking Area
In the Tweaking Area, you can individually adjust the RGB and HSV values of your color. Simply press the appropriate button. You can also set the increment amount to control how much the color changes when you press the buttons.Note that the hue adjustors (H+ and H-) operate at approx. one half of the increment amount.
Compare
The Compare feature compares the current color to the nearest web-safe color. You then have the option of keeping the current color unchanged or switching to the web-safe color.Samples
The Samples feature displays a long list of color names along with their HEX codes. As you browse through the list, roll your mouse over the names to preview that color. Click on the name to update the calculator to that color. You can tweak the color afterward if it's not to your liking.Random
The Random feature simply outputs a random color. If you are open to ideas for a color, clicking on 'Random' can be a good way to find one. As always, you can tweak that color.Table
The Table feature displays a table containing all 216 web-safe colors. You can visually identify colors this way. Simply click your desired color. Of course, feel free to tweak the color you wind up with, just remember it will most likely no longer be web-safe.Choosing colors using HEX codes
With the RGB Color Calculator, you have several ways of choosing a color. The most straightforward method is to type a HEX code, such as "CCCCFF", into the HEX code area text field.Choosing colors using color names
Another straightforward option is to type in a color name into the HEX code field, such as "red". The color name must correspond to a standard browser supported color name.Choosing colors using RGB numbers
RGB stands for red, green, and blue. To choose a color based on its RGB values type the numbers for red, green, and blue into the three RGB area fields, respectively. These numbers should be between 0 and 255.Choosing colors using HSV numbers
HSV stands for hue, saturation, and value. To choose a color based on its HSV values type the numbers for hue, saturation, and value into the three HSV area fields, respectively. These numbers should be between 0 and 255.Choosing colors by name
To pick a color based on the color name, click 'Samples' in the calculator menu bar. A window containing several color names will appear. Click on one of the color names.Browsing random colors
If you are at a loss, clicking the 'Random' button in the menu can be a good way to browse through an unlimited number of unique colors.Choosing from a color table
Click the 'Table' button in the menu to display a table containing 216 web-safe colors. You can select the color you want by clicking on it.Tweaking RGB values
Locate the plus/minus buttons for red, green, and blue in the tweaking area. Use these buttons to adjust the values up or down. Notice that you have the option to control how much the buttons increment the values.Tweaking HSV values
Locate the plus/minus buttons for hue, saturation, and value in the tweaking area. Use these buttons to adjust the values up or down. Notice that you have the option to control how much the buttons increment the values.What are HEX codes?
HEX codes are used in HTML to define colors. The six characters in a HEX code can be anything between 0-9 and/or A-F. (e.g. 0090FC, CCCCFF) HEX codes are based on the RGB color system.The HEX code CF670D is as good an example as any of a hex code. When you break it down into its sub-parts, you wind up with CF, 67, and 0D. These three components are a numerical reference to the red, green, and blue component values of a color, respectively.
The way this works is this: Our every day decimal system has ten digits, 0-9. A two-digit decimal number has one hundred possibilities, 0-99. In the same way, The hexadecimal system has sixteen digits, 0-F. Therefore a two-digit hexadecimal number has 256 possibilities, 00-FF.
A HEX code, therefore, is simply three two-digit hexadecimal numbers lumped into one six character string. These codes will appear in the source code of a web page preceded by a # symbol. (e.g. <font color="#C0C0F0">) The # symbol lets the browser know that it is dealing with a HEX code.
On web pages, the total range of possible values for any of these components is 0-255. That gives you 1677216 possible colors to choose from. (2563) Using this system, you can create colors of all kinds.
Hue
In order to understand how hue works, visualize a color wheel. As you travel around the wheel's edge you pass through every color of the rainbow until you make a full circle and reach the color you started out with. In order to have a way of measuring hue, you have to decide which point along the wheel is going to be zero, and also what scale you are going to use.Most people agree that pure red is going to be the zero point for hue. No solid convention has developed for the scale, but it doesn't really matter that much. Many people use 0-360, likening it to degrees. The RGB Color Calculator uses a scale of 0-255 to measure hue, so that it is consistent with RGB values.
If you take the color red (hue = 0) and begin to increase its hue, it will transition through a rainbow-like progression of colors until it has gone almost all the way around the color wheel (hue = 255). If you increase its hue to 256, it will actually be 0 again and you will be back to where you started; with pure red.
Saturation
Saturation, sometimes called chroma, refers to the color's colorfulness. For example, flowers and sports cars usually have colors with a high saturation. Meanwhile dirt, rocks, and khaki pants have colors with a low saturation. Colors like gray have zero saturation.Like hue, the scale for measuring this is not always the same. The RGB Color Calculator uses a scale of 0-255 for measuring saturation.
Value
Value, also called brightness, is the lightness or darkness of a color. A bright green color will have a high value, while black has a value of zero. The RGB Color Calculator uses a scale of 0-255 to measure value, but other people often use different scales.The RGB Color Calculator assumes you are somewhat concerned about web-safe colors, but not obsessed with them. It offers a feature called 'Compare' that lets you look at your color alongside the closest web-safe color. This allows you to be aware of what your color will look like on an 8-bit display, and to make an informed decision based upon that information.
My recommendation is to not sweat too much about web-safe colors. Most people have their color displays set high enough that your finely-tweaked precision color will show up fine. Also remember that people who surf the web with low color resolution are probably used to seeing the web that way. I recommend using the 'Compare' feature to make sure your creamy brown doesn't show up as putrid pink.