Color Wheel
Create perfect palettes with our interactive wheel. Find complementary, analogous, and triadic schemes—export harmonies for design and dev.
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
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 Colors
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.
Square Colors
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.
Color Shades
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
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.
Color Tones
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.
Secondary Colors
Orange, green and purple. Secondary colors are made by mixing two of the primary colors together (e.g. red and yellow to make orange).
Tertiary Colors
Vermilion, amber, chartreuse, teal, violet and magenta. Tertiary colors are the result of mixing a primary and a secondary color.
Explore more tools
Once you have a base palette from the wheel, use our other tools to refine it, pull colors from images, or browse ready-made palettes.