Intro to Color Theory Don’t let the title scare you, color theory is rather fun, and our interactive color wheel makes it a breeze. Color theory lets us understand how different colors work together —think of it as a cheat code for picking visually pleasing sets of colors. The color wheel—dating back to Isaac Newton’s book “ Opticks ”—presents color hues arranged in a circle, visually displaying the relationships between primary, secondary and tertiary colors . When creating a design, finding colors that mesh well visually can be difficult for the untrained eye, and that’s where color harmonies , or combinations of colors on the color wheel, come in handy. Using the Color Wheel So how do you generate these harmonies? Using an RGB color wheel like the one above makes it incredibly easy—get started by selecting a harmony from the dropdown. Clicking and dragging your cursor on any of the white circles (or anywhere on the color canvas) will change the hue; the further towards the center the more de-saturated the color. Use the lightness wheel around the main color area to make your selected color lighter or darker; you can also paste in an initial hex color code to create harmonies. Color Harmonies Color harmonies are particularly pleasing combinations of two or more colors derived from their relationship on a color wheel. Also known as color chords, color harmonies are useful when exploring a possible color palette, or can be used as a standalone color scheme. Complementary colors Colors that are directly opposite one another on the color wheel are known as complementary colors. Complementary colors have a high contrast and can be very effective as accent colors when paired with a more neutral palette. Split-Complementary Colors A split-complementary harmony is made up of a base color and the two adjacent colors on either side of its complement. Split-complementary schemes are lower contrast and can be better for brand palettes. Analogous Colors Analogous harmonies are created by selecting the colors directly adjacent to a chosen color. Frequently found in web design, analogous schemes, when paired with a complementary color for contrast , can offer great versatility. Triadic harmonies consist of three colors equidistant from one another on the color wheel. Like complementary colors, triadic schemes tend to be very bright with a high contrast and work best when one color dominates. Tetradic Colors

Tetradic color harmonies are formed by two sets of complementary colors 60 degrees apart on the color wheel. Tetradic schemes are an excellent starting point for creating color palettes; fine tune them using color shades, tints and tones. Similar to tetradic harmonies, square color schemes consist of four colors, but set equidistant from one another on the color wheel. Likewise square harmonies are great beginnings of a brand or website color palette. Color Shades, Tints and Tones Color shades, tints and tones are created by adding black, white and gray respectively to a chosen color. They can be very useful in web design for backgrounds and typography, and are often paired with a complementary color for contrast. Adding black in varying levels to a color produces gradually darker variants, or “shades,” of that particular color. Shades work well for link hover effects, or as footer and header backgrounds. Color tints are made by adding white to a color , resulting in increasingly lighter versions. Tints can also be used for CSS hover effects , and perform nicely as modal backgrounds. Tones are created by adding gray to a color , and produces an almost endless variety of colors depending on what level of gray is used. Less common in web design, tones could be useful for typographic elements like comments, quotes or highlights. Primary, Secondary and Tertiary Colors The color wheel is made up of 12 distinct colors, which are subsequently divided into the following three groups: primary colors (3), secondary colors (3) and tertiary colors (6). Primary colors : red, yellow and blue. These are the base colors of the wheel, and every other color contains at least one of the primary colors. Primary colors : red, yellow and blue. These are the base colors of the wheel, and every other color contains at least one of the primary colors. Secondary colors : orange, green and purple. Secondary colors are made by mixing two of the primary colors together (i.e. red and yellow to make orange). Secondary colors : orange, green and purple. Secondary colors are made by mixing two of the primary colors together (i.e. red and yellow to make orange). Tertiary colors : vermilion (red-orange), amber (yellow-orange), chartreuse (yellow-green), teal (blue-green), violet (blue-purple) and magenta (red-purple). Tertiary colors are the result of mixing a primary and a secondary color. Tertiary colors : vermilion (red-orange), amber (yellow-orange), chartreuse (yellow-green), teal (blue-green), violet (blue-purple) and magenta (red-purple). Tertiary colors are the result of mixing a primary and a secondary color. Creating Your Color Scheme Armed with the power of the color wheel, creating your own color palette should be far easier than starting from scratch. But if you’re still at a loss, perhaps one of our other tools might suffice. Have an image you’d like extract a palette from? Try our image color picker instead. Or maybe you just need a regular old color picker ? And be sure to checkout our color library for additional inspiration.