Analogous
Complementary
Split Complementary
Triadic
Tetradic
Square
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.
![Color Wheel: Color Harmonies (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=3840&q=60&fm=webp)
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.
![Color Wheel: Complementary Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=3840&q=60&fm=webp)
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.
![Color Wheel: Split-Complementary Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=3840&q=60&fm=webp)
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.
![Color Wheel: Analogous Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=3840&q=60&fm=webp)
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.
![Color Wheel: Triadic Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=3840&q=60&fm=webp)
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.
![Color Wheel: Tetradic Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=3840&q=60&fm=webp)
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 Wheel: Square Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=3840&q=60&fm=webp)
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 Wheel: Color Shades, Tints and Tones (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=3840&q=60&fm=webp)
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).
![Color Wheel: Primary, Secondary and Tertiary Colors (Small) [en]](https://images.ctfassets.net/59e17fdc7mop/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=3840&q=60&fm=webp)
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).
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.