Using Adobe Color (Kuler) for Web Design
Update, May 2015: Adobe changed the name of this product from Adobe Kuler to Adobe Color CC.
Adobe Color is a visual tool that lets you create and save color palettes, with up to five colors in each. I like using Adobe Color for web design, especially in the planning stages, because it allows me to build and tweak color palettes that make color theory sense. You can set a base color, and adjust the four secondary colors, or adjust each color individually. You can also change the entire color scheme by adjusting the base color without changing the relationship of the colors to one another.
A Quick Color Theory Lesson
Before discussing color schemes, a few words about how color is mapped. Think of all the visible colors as being points on a 3D cylinder. Around the edge of the cylinder are the hues. This is the rainbow color spectrum, from red to violet, 360 degrees of base colors. As you go from the edge towards the middle of the cylinder, colors get less saturated, towards the edge they get more vivid and saturated. Colors at the bottom of the cylinder have more pure black added to them; colors towards the top have more white added to them. At the mid-point of the cylinder are the pure primary colors. This white/black balance is known as the value. The color cylinder model is known as the Munsell color cylinder, or Hue-Saturation-Value cylinder. The type of color scheme is defined by the relationship of the base color to the other colors in the scheme.
Color Schemes
Adobe Color lets you create swatches based on well-established color scheme types. Here’s a rundown of the main color schemes.
Analogous color schemes are when colors sit next to each other on the color wheel, usually they are equal in saturation.
The Monochromatic schemes involve a single hue on the color wheel, with shade and tint variations of that base color. Shades come from adding black to a color; tints result from adding white to a color. Tones are when gray is added to a color.
A Complementary color scheme is when two colors are opposite each other on the color wheel, such as green and red, or yellow and blue. This scheme can be effective as long as the colors are not at full saturation. Using fully saturated colors in a complementary scheme can be jarring to the viewer.
A Triad color scheme is when there are three equidistant colors on the wheel; for example, green, purple, and yellow. A Split-Complementary scheme is formed from three colors where two colors are close to each other, and the point color is not; for example, orange, magenta, and green. A triadic scheme forms an isosceles triangle; a split-complementary forms an acute triangle. In both of these color schemes, one color usually dominates, and the other two are used as an accent color.
A variation on the Triadic scheme are the Square and Rectangular schemes. This would involve four colors equal distance from each other or pairs opposite each other. Google is a brand that uses this scheme (Red, blue, yellow, and green). Adobe Color doesn’t come with this preset, but it is useful to know.
The Compound scheme preset has two colors in a monochromatic pattern, two in a complementary pattern, and one forms what appears to be an incomplete triad with the base color.
The Shades color scheme is a variation on a single hue, but with different values. Remember that color hues can have tints and shades depending on the amount of black or white added to it.
Finally, the Custom setting lets you create your own color scheme, letting you put all this awesome color theory together on your own.
The Adobe Color Interface
Adobe Color’s interface makes it is easy to see how your colors work together. There are sliders below each individual color that let you adjust (from top to bottom) Red, Green, Blue, and Value. If you are working with the base color in the center, the other four colors in the scheme will be affected. You can adjust the other four colors separately without affecting the base color. If you want to make one of the other colors in the swatch the base color, just hover near the bottom of the swatch and click “Set as base color”. RGB and HEX values are displayed under each color for easy reference.
When you are satisfied with your swatch, save it to My Themes. You can always edit these later, or export the swatch to as an ASE file for use in Photoshop or Illustrator. You can browse swatches made by others, and sort them by Most Popular, Most Used, All Themes, or Random.
In the footer, there is a link to create a color theme from a photo on your hard drive. You can even customize what sort of hues you want to target from the photo: Colorful, Dark, Bright, Muted, or Deep.
Adobe Color is a great tool for web design, especially if you have one or two specific colors to start with. You can create variations on the same scheme, compare them side by side, and make a final decision on branding colors for a website. If you are not already using Adobe Color for your web design process, I recommend you check it out.
What is the purpose of five colors in palette? Means is there any rule that first color will use in heading, second somewhere and third somewhere
Hi Yasir:
There’s no rule that demands you use all five palette colors in your design. The purpose is more to see them side by side and notice how they work together. I also use Adobe Color for constructing theme colors from a base color using mathematics in addition to aesthetics. Having the colors side by side allows me to keep one part of each color (hue, saturation, value, brightness) the same throughout the palette.