introduction Color synthAxis is a free online tool designed to simplify the nightmare of color scheme selection. It looks complex, but after a few minutes you won't be able to live without it. Special thanks to Bill Mill and rafa_piltrafa, synthAxis users who helped me to translate this tutorial from spanish. the color object Every square in your screen is a color object. You can drag it with your mouse or click on it: Drag in order to move it. Click on it to show/hide the border, its HTML color code and the show menu button. The show menu button shows/hides the operators. Drag the show menu button align the object in an invisible grid. Double click the square to destroy it. operators These are the elements that will let you modify your color or interact with other colors. Let's take a closer look at every operator. sliders They allow two distinct parametric adjustments. Assign RGB values in the [0,255] interval. RGB is an acronym for Red, Green, and Blue, the three primary colors. This is the most common color coding in Computer Science, but there are others such as YUV, YIQ, and XYZ. RGB color is capable of reproducing almost every color the eye can see. It is not very intuitive, but it works well because monitors use RGB internally. The HSV standard defines a color using three characteristics: Hue = Shade. the name of the color. It's circular, so if you put it at the top it reverts automatically to zero. Saturation. The higher this number is, the more intense the color is. The lower it is, the closer to black and white. Value = Intensity. The higher this number is, the brighter the color is. V = 0 is black. This system is far more intuitive than RGB, but it is NOT a real standard. There are a lot of different algorithms for HSV conversion, so I didn't put boxes in the sliders. Since every program has a different HSV interval, they're not as useful as RGB. The star buttons at the right have a function which I will explain later. For SynthAxis i designed a custom algorithm based on the incorrect Foley and van Dam algorithm. Although it's ugly, I've used it because almost every commercial program, including Windows, uses it. boxes These are the numeric interfaces to the colors. You can use Windows copy & paste to copy the values from them. HTML and many software apps use a 6-character code to define colors. SynthAxis is compatible with them due to this box. The value of this character code is obtained using hexadecimal coding of the RGB values, 2 characters each. You can do it manually or with a scientific calculator. For those few times when you can't use the HTML color value, you can simply copy the values individually. color creation Every time you drag one of the following buttons, an arrow will appear pointing to the destination of the new color. Create Copy: duplicates current color. Create Negative Creates a photographic negative: a dark complementary color if the original one is light, or light if it is dark. Create Complementary The result will not be the same as a photographic negative; light colors produce light colors and dark colors produce dark colors. Create Spectrum: synthAxis will generate a spectrum of colors based on the current color. The number of colors is based on the object control button, explained later. Try to create the spectrum on the left side of your screen, or you will lose it off the right edge. These colors were created using the Spectrum Tool. They all share a similar value and saturation. object control When you create a spectrum or a transition, this box determines how many new colors are created. Use + and - to increase or decrease this value. The value ranges from 1 to 9, with a default of 3. Modification in a single color will affect ALL colors. transitions These are some of the most powerful tools in SynthAxis. Click and drag on the appropriate button of the start color and release the mouse over the destination color. As many new colors as are indicated in Object Control will be created. These colors interpolate between the start color and the destination color. Create Hue-Up Transition: a red-to-violet transition. Create Hue-Down Transition: violet-to-red. The transition will be softer or harder depending on distance between colors and object control number specified. Create RGB Transition: merges selected colors while ignoring their position in the spectrum. If you put the Object Control at 1, you will get an equal RGB mix of the origin colors. Transition Examples: assignments Many times it's very useful to copy a color property from one color to another. SynthAxis has Assignment Buttons for this. Just drag from one of these buttons on the destination color. at assigns hue. at assigns saturation. at assigns value. trick: how to combine difficult colors Just equal their saturation. If you have an intense, electric color and a soft one, make both electric or both soft. Simply assign the saturation of the color you want to keep. If your client gives you a horrendous color palette (and you MUST use it in their website) try to fix it using this method. Another powerful assignment tool is the Light Operator. Use it like the previous ones. Light: it projects a current-color light on destination color. This function ALWAYS DARKENS the destination color. It works internally by making a geometric mean of every RGB component. trick: how to make a coherent color range If you want to create a warm or cold color range, try to illuminate a whole spectrum using the same color. Using the previous spectrum... After applying a yellow light #FFF843 (for example) to each square, we obtain Blue colors disappeared and we got a warm color range. If we use a blue light, like #30D0FF, reddish colors will disappear, leaving a cold spectrum. Remember to use always a light color or you will get only very dark colors. My favourite tool is the following. Luminosity: Like the previous tools, you drag it from the source color to the destination color. It assigns the luminosity of the source color to the destination color. Every RGB component has a different luminosity. Blue is 5 times less luminous than green. This button has a double function. It moves itself like a slider showing you the amount of light in every color. The algorithm is standard and assumes a gamma 2.2. That is, L=R*0.299+G*0.587+B*.114. trick: obtaining a range of equivalent colors Many times when designing web sites, we need a range of colors where no color dominates the rest. This apparently silly problem is actually quite difficult with more than 3 colors. With lighter colors, it becomes a real nightmare. We are going to use SynthAxis to make TWENTY light equivalent colors. In this case, a slightly-coloured gray range. To get one of these colors, simply lower and raise . Let's take this: I find its opposite with Create Complementary. And now, between them, two hue transitions, up: and down . We get the following colors. You can notice the huge luminosity gap amongst blues and yellows. Making a gray conversion in photoshop i obtain a result like this: the luminosity differences are remarkable. Now i'm going to give them the same luminosity. I'll drag and drop the Luminosity button of the bottom-left color over every other color. As you can see, the result is a range of very even colors. You can barely distinguish one from another. The result is not perfect, however. And it will depend on the software used, the monitor and even your eyes! But this result is more balanced that the previous gray conversion. And if we want to give a high luminosity to a blue, we need to modify drastically its saturation, not only its value. Now you only need to choose the colors you want. The following palette were obtained using this method. update: version 2.000 I added a new button / at the right of . Now we can choose between two different hue distributions.   Artistic Palette RYB This it the one you were taught in school. Primary colors are Red, Yellow and Blue. Secondary ones are Green, Violet and Orange. It's an incorrect system: Opposite colors don't make grays, but new colors. But this is good for mixing if you have an artist's brain: yellow and blue give green. Warm and cold colors have a more balanced distribution. This is the default palette.   Scientific Palette RGB Technically correct: opposite colors generate grays. Cold colors predominate over warm ones, which an artist is not likely to prefer. Opposite colors are red-turquoise, green-violet and blue-yellow. This was the first palette SynthAxis used, and now is optional. Thanks to Karramarro and his constructive criticism, which pushed me to introduce this improvement. The hue conversion between the two systems is a non-linear operation. This is not exactly a RYB system, because the RYB blue is more like CIE-210º than CIE-240º i chose. I think this blue is better.Your choice of palette will fundamentally affect the following functions: Hue Down Transition Hue Up Transition Create Complementary Create Spectrum ¿do you like colorSynthAxis? Send me mail or sign my guestbook. Put a link to http://color.cranf.net If you are a design professional, send me your URL and i'll put it here. colorSynthAxis is used by (alphabetical order)... special mention to bizarre and smart basque design AlixLoop azul9 Bcareful catenaria designerslife* ePlastiq hartum m69s mdem piensaenpixels processblack smile is life the orange side