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.

C OMPL EMEN TA R Y C OLOR S

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.

T R IA D IC C OLOR S

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.
T E T R AD I C C OLORS

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.

A NA L OGOU S C OLORS

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.

N E U TR A L C OLOR S

Neutral schemes, like analogous harmonies, are formed by taking the colors on either side of
a chosen color but at half the distance. While analogous schemes typically use colors 30
degrees apart, neutral harmonies use colors 15 degrees apart.
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. Try them with your own color using the dropdown menu
below the color picker.

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.
HEX
#f57171
#b3f571
#71f5f5
#b371f5

HEX
#ffb469
#69ff69
#69b4ff
#ff69ff

HEX
#f8da5d
#5df88d
#5d7bf8
#f85dc8
HEX
#bdf548
#48f5d6
#8048f5
#f54867

HEX
#5ce799
#5c65e7
#e75caa
#e7de5c

HEX
#5ce7cb
#855ce7
#e75c78
#bee75c

HEX
#6ee0eb
#b76eeb
#eb796e
#a2eb6e

HEX
#6076f8
#f860c2
#f8e260
#60f896
HEX
#7c63ee
#ee6390
#d5ee63
#63eec2

HEX
#b76af3
#f3736a
#a6f36a
#6aebf3

HEX
#e96af3
#f3a56a
#74f36a
#6ab8f3

HEX
#f188cf
#f1de88
#88f1aa
#889bf1

HEX
#f3738f
#cff373
#73f3d7
#9773f3
HEX
#f48a89
#89f48a
#8a89f4

HEX
#f49967
#67f499
#9967f4

HEX
#f0b152
#52f0b1
#b152f0
HEX
#ecce51
#51ecce
#ce51ec

HEX
#ebe962
#62ebe9
#e962eb

HEX
#c5ee56
#56c5ee
#ee56c5
HEX
#a1ec5b
#5ba1ec
#ec5ba1

HEX
#78e669
#6978e6
#e66978

HEX
#73e792
#9273e7
#e79273
HEX
#67e5b1
#b167e5
#e5b167

HEX
#67e5d4
#d467e5
#e5d467

HEX
#6adcee
#ee6adc
#dcee6a
HEX
#66a7f1
#f166a7
#a7f166

HEX
#6670f1
#f16670
#70f166

HEX
#806df0
#f0806d
#6df080
HEX
#a466ee
#eea466
#66eea4

HEX
#cc66ee
#eecc66
#66eecc

HEX
#ed76e8
#e8ed76
#76e8ed
HEX
#ed76c1
#c1ed76
#76c1ed

HEX
#ed6b7b
#7bed6b
#6b7bed