Color Tools Guide

Welcome to our Color Tools! We hope you find it useful, despite the rather "simple" things it does. To use it, you need at least Internet Explorer 5 for the JavaScript to work properly. Netscape should work fine too since it supports even more things than IE does. But that's life and anyway, that reminds me you're here to learn more about the tools and to be told in a didatic way about every single character that's been put on that interface with blood sweat and tears..;-) Let's get on with it then:

We have divided the interface into 4 different tools, called modules: the Color Converter, Color Mapper, Color Forge and Color Obtainer.

• Color Converter: use it to convert a HEX color into decimal (DEC) RGB and vice-versa. There are separate fields and conversion buttons for each one.
• Color Mapper: this tool should help you match colors for various purposes. You type in four colors and it will open up a new window with all of them in a side-by-side layout with text inside for you to see how they get along together. Black and white borders are also included for reference.
• Color Forge: here you can mix colors to create a new one. It uses a color that serves as the base for adding the others. There are some different calculations to mix the colors that you can choose from, and the mix can be controlled by percentage values for the colors.
• Color Obtainer: the simplest of all, can generate a completely random color within the given choices (you may choose to generate only reds, grays, etc.) and we've included a list of the most common colors for you to pick up and transfer through the "Copy" button to another module for further messing around with.

Most of the parts composing each module have short tooltips explaining in less detail their own function. Just hover the mouse pointer over them and wait a while for the tip to come up. Unfortunatelly, it doesn't stay there for long, so you may have to move the mouse pointer in and out more than once to continue reading. That's the main reason why we tried to make them as short as possible. Another catch is that the drop-down lists do not have tooltips, so the help has been inserted in the text to its left (in most cases).
Each module also has a preview box on its right. It is updated as soon as you deselect a color input field you're working on, use the "+" and "-" buttons or perform a "final operation" (like converting or combining colors).

Below is a detailed description of each module.

Jump to: Converter | Mapper | Forge | Obtainer | Top

Color Converter

How to convert the colors:

From HEX to decimal (DEC):

• Type the HEX color, without a leading "#", in the first text field (entitled "HEX").
• After you type the color, click anywhere outside the text field to preview the color on the upper part of the "Preview Box" (the inset square on the right side of the module).
• Click the button to the far right entitled "to DEC".
• The color is converted to DEC and is shown on the "Results" box at the bottom of the module (right before a separating line) in the Red, Green & Blue formats.
• If you'd like to copy the results to the clipboard, click on the "Select" button near it and press CTRL+C.
• You may copy the results to another module in this page via the "Copy to" button. Choose the destination and press the button. The color will be converted back to HEX, as decimal colors are NOT used anywhere in the Color Tools.

From DEC to HEX:

• Enter separately the Red, Green and Blue components of the color in the R, G and B fields, respectively.
• Whenever you click anywhere outside the text field the changes made to the color as a whole (all R,G,B components) will be previewed in the lower part of the "Preview Box" (the inset square on the right side of the module).
• Click the "to HEX" button on the far right, after the "B" field.
• The three components are converted to a single HEX color that shows on the "Results" box at the bottom of this module.
• If you'd like to copy the results to the clipboard, click on the "Select" button near it and press CTRL+C.
• You may copy the results to another module on this page via the "Copy to" button. Choose the destination and press the button. The color will be copied without the leading "#".

Description of each piece of this module:

• Increment field: The buttons with "+" and "-" in the whole page (all modules) will be changed. They will increase/decrease colors by this number. The default is 1.
• HEX field: The HEX color you wish to convert. The default is 000000; or black.
• + and - buttons: Will increase/decrease respectively the RGB components of the HEX color by the increment value set above. The component they will change is of the same color as the buttons. The values for each component cannot go above 255 nor below 0.
• to DEC button: Converts the color typed in the HEX field to a DEC (decimal) color and shows the result on the "Results" box. The output color is in R,G,B format.
• Preview box: The upper part previews the current HEX color and the lower part the current decimal color (all R,G,B fields).
• R, G, and B fields: The three components of the decimal RGB color you wish to convert to HEX. Typed values above 255 become 255. The default for each field is 255; or white.
• + and - buttons: They will increase/decrease respectively the closest field to their left by the amount set on the increment field.
• to HEX button: Converts the values of all R, G and B fields to a single HEX color with a leading "#" and shows the result on the "Results" box.
• Results box: Displays the results of the last conversion only. These results cannot be modified in here. Starts blank.
• Select button: Simply selects the results, if there are any. It WON'T copy them to the clipboard.
• Copy to button / destination list: Copies the results to another field in another module selected beside it in the drop-down list. The results are copied always as HEX colors (they will be converted if necessary). The dafault destination is "Mapper: Color 1".
• Reset button: Restores the default values and options for everything in this module only.

Chapter | Top  

Color Mapper

How to use:

• Enter four (prefferably different) colors in the four text fields entitled "Color 1" through "Color 4" in HEX, without a leading "#".
• Click the "Map it!" button at the bottom of this module.
• A window will pop-up with the colors side-by-side for you to test how well they get along together. There will be black and white borders for reference around the center, where there'll be four squares, each with one of the colors and text of the other three colors inside them.

Description of each piece of this module:

• Color 1 through Color 4 fields: Specifies one HEX color to be part of the layout test. Enter them without a leading "#". The defaults are red, green, blue and yellow.
• + and - buttons: Will increase/decrease the RGB component of the same type as the button's color of the chosen color field by the increment value specified in the Color Converter module.
• Modify list: Which of the fields in this module the + and - buttons (also in this module only) will affect. By default "Color 1" is selected.
• Preview box: Previews the entered colors in this module in the following order: upper part displays colors 1 and 2; lower part displays colors 3 and 4.
• Map it! button: Will pop-up a window with a layout using all four colors entered in this module.
• Copy button / source and destination lists: Copies the chosen color from this module in the first list to the chosen field in another module selected in the second list. By default the source is "Color 1" and the destination "Converter: HEX".
• Reset button: Restores the default values and options for everything in this module only.

Chapter | Top  

Color Forge

How to use:

• Enter the "Base color". It is the color you wish to serve as the 'base tone' or 'paper color'. Other colors will affect this one.
• Enter the first color to influence the base on the "Color 1" field. The degree of influence is set in the percentage field to its right.
• If you'd like, enter a second color and set its percentage of influence on the right side of the "Color 2" field.
• To not use color 1 or 2, set its percentage to 0.
• You may want to change the "Combining Method" on the drop-down list if you know what each option does (read the detailed description below for this).
• If you want to invert the colors in the operation, just check the "Invert" option.
• Click the "Combine" button.
• The resulting color appears on the "Results" box below and is previewed in the largest area of the "Preview Box".

Different settings:

To darken or lighten a color:

• Enter the base color - it's the color you wish to darken or lighten.
• Enter in "Color 1" pure black (000000) or white (FFFFFF) to darken / lighten respectively the base color.
• Set the first color's percentage to how much you want to darken or lighten the base.
• Set the percentage of the second color to 0.
• Choose the "Multiply" combining method.
• Press "Combine".

To just invert a color:

• Enter the base color - it's the color you wish to invert.
• Set the percentage of the first and second colors to 0.
• Check the "Invert" option.
• Press "Combine".

To make transparencies:

• Enter the base color - it's the color for the 'background'.
• Enter in "Color 1" the color you wish to be transparent.
• The first color's percentage is its opacity.
• Set the percentage of the second color to 0.
• Choose the "Logical" combining method.
• Press "Combine".

Description of each piece of this module:

• % Increment field: Individual increment option for the "+" and "-" buttons that modify percentage values (gray buttons). They will increase/decrease the % by this setting. The default is 5.
• Base Color field: A basic color for the combining. It cannot have a percentage value. The other two colors modify this one. The default is FF0000; red.
• Color 1 and 2 fields: The two colors to be combined with the base color. The defaults are 00FF00 and 0000FF; green and blue.
• % fields: How much of the colors to their left will affect the base. Setting any one to 0 will remove that color from the mix. The default is 50 for both.
• + and - buttons: Will increase/decrease the RGB component of the same type as the button's color of the chosen color field by the increment value specified in the Color Converter module.
• Modify list: Which of the fields in this module the + and - buttons (also in this module only) will affect. By default the "Base Color" is selected.
• Preview box: Previews the entered colors in this module in the following order: upper part displays the base color and colors 1 and 2; the lower part displays the resulting color of the combination, once you've done it.
• Combine button: Finishes the operation, combining all colors with the specified settings to generate a fourth color, that will appear on the "Results" box and previewed in the largest area of the "Preview Box".
• Method list: The calculation the program will perform to combine the colors. All of them take into account the percentage you've chosen for them. By default "Colorize" is selected.
  • Logical: Compares the R, G and B of each color with the base's RGB individually, and decides whether it should add or subtract them to approximate the colors. If, for example, the R value of Color 1 is greater than the base's R, it will add the difference (multiplied by the %) to the base's R. Otherwise it subtracts it.
    This is a purely mathematical method, and results may vary from what you'd expect by looking at the colors.
  • Colorize: Tries to get results more according to what you see. It checks the proportions in which each RGB component is found in a color (the lowest of the RGB becomes 0, and the other two go up from that point) to add/subtract to/from the base color using the same criteria as for the "Logical" method.
    Another thing about this method, is that it reacts in a different way to black, white and grayscale. These tones will make the base color proportionally darker or lighter better than when you're using colors to do so.
    Example: a color whose decimal values are 255,150,20 has a proportion of 235,130,0. The program does the same checking as with the "Logical" method to determine whether to add or subtract these values from the base color. It uses the original RGB values to determine that, just like the "Logical" method. Then, when adding/subtracting, it will use the proportions, plus the %.
  • Multiply: This one will not result in a completely new color, but rather in a brightness variation of the base color. It uses a luminosity propriety (R+G+B divided by 3) of each color to compare them and determine if to add/subtract the colors.
    Example: if Color 1 is darker than the base, it will make the base color darker.
  • Add / Subtract: Does a simple mathematical addition / subtraction of values, without discerning anything. It's like "Logical" without deciding which one to do.
  • Oppose: The reverse of the "Logical" method: instead of approximating colors, it will divert them. May have some strange results, especially if you invert the colors too!
• Invert option: When you combine the colors, they will be mathematically inverted (if one color had, for example, 100 red counting from 0, it will have 100 red counting from 255; that's 255-100 = 155). You will not see that in the preview of the original colors.
• Results box: The resulting color from the combining. Starts with no color.
• Select button: Selects the results. It will not copy them to the clipboard.
• Copy to button / destination list: Copies the results to the chosen destination in another module. The default destination is "Mapper: Color 1".
• Reset button: Restores the default values and options for everything in this module only.

Chapter | Top  

Color Obtainer

How to use:

Generating a random color:

• Choose in the first drop-down list if you want a random color of any type ("Color"), or of a specific type (all the others).
• Press the "Get" button.
• The color will appear on the first box to the far right and will show on the "Preview Box".
• To use it somewhere, click on the "Select" button beside the generated color, select a destination in the drop-down list at the bottom of the module (sorry, no clipboard, you'll have to do it manualy), and hit the "Copy" button.

How to pick up a predefined color:

• Choose in the second drop-down list the color you want. We've included the most relevant colors, according to our own criteria.
• As soon as you choose it, it will appear on the lower box to the far right and will show up on the "Preview Box".
• To use it somewhere, click on the "Select" button beside the chosen color, select a destination in the drop-down list at the bottom of the module (sorry, no clipboard, you'll have to do it manualy), and hit the "Copy" button.

Description of each piece of this module:

• Get button: Generates a random color of the chosen type and puts it in the topmost box to the far right of this module.
• random list: What type of random color you want. Comes with "Color" selected by default.
  • Color: Any color; all RGB components random.
  • Red / Green / Blue / Yellow: Only generates pure red / green / blue / yellow colors.
    Example: A red color uses only the R component. The value for it is random, and for G and B the value is 0 (00 in HEX).
  • Gray: A color whose RGB values are all equal. It generates a random number, and uses it for all components of the color.
• Select buttons: Selects the color to its left, if there is any, and previews it in the "Preview Box". Though you can do it in a different way, clicking this will also select this color for copying below.
• Get a predefined list: A list of common colors, most of them using standard values (for example, the "Pink" color is what has been agreed to be pink in informatics). Just select one and you have it already on the box to its right. "Black" comes selected by default.
• Preview box: Displays only the last color you've chosen / selected / generated.
• Copy button / source and destination lists: Copies the chosen color from this module in the first list to the chosen field in another module selected in the second list. By default the source is the "Predefined" color and the destination "Mapper: Color 1".

Chapter | Top