THE WORLD'S LARGEST WEB DEVELOPER SITE

Color Schemes


Color Schemes

Color schemes are logical combinations of colors on the color wheel.

The purpose of a color scheme is to create an aesthetic feeling of style and appeal.

Color Weel

Achromatic Color Schemes

The black on white achromatic color scheme is the default color scheme for a web page:

It uses a white background with a black text.

The white on black achromatic color scheme is often preferred for smaller devices:

It uses a white background with a black text.

White on black requires less energy (improves battery life) on most display technologies.

Monochromatic Color Schemes

Monochromatic color schemes are easy to create because the use only one color.

Monochromatic schemes use different tones from the same angle on the color wheel (the same hue):

Monochromatic Color Scheme

Using different shades and tints from the same hue makes it easy to design good looking color schemes:

#fdf3f3 #eb8c83 #dd4132 #6e1a12 #420f0b

Hue is another word for color. It is often used in color theory.

#e7fff9 #afffea #005e51 #004f3a #003829

Monochromatic color schemes are guaranteed to suit each other because they all are from the same family.

You can experiment with lightness, darkness, and saturation values for the same hue using our Color Picker.



Analogous Color Schemes

Analogous color schemes are also easy to create.

Analogous color schemes are created by using colors that are next to each other on the color wheel:

Analogous Color Scheme

Using only different hues makes it easy to design good looking color schemes:

#6666ff #66b3ff #66ffff #66ffb3 #66ff8c

If an analogous color scheme does not have enough contrast between the colors (for an nice website design), it can be adjusted to give it more variety:

#b3d9ff #0066cc #80bfff #ccffe6 #134d00

You can experiment with lightness, darkness, and saturation adjustment using our Color Picker.


Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel:

Complementary Color Scheme

Most of these schemes consist of two complementary colors expanded with grey tones, tints, and shades.

This scheme consists of complementary red and green:

#c2c2b2 #ff666a #ff0f15 #0bb238 #9affb5

This scheme consists of complementary orange and blue:

#b2c2c2 #ffdaa1 #ffa111 #0c69b2 #7bc5ff

To avoid simple complementary color schemes add lightness, darkness, or saturation:

#e2e9e9 #ffebcc #ffb84d #40a5f2 #cce9ff
#7e9a9a #f6d8ac #db9833 #2a6592 #8ec3eb

You can experiment with lightness, darkness, and saturation values using our Color Picker.


Compound (aka Split Complementary)

Compound Color Scheme

Compound schemes are almost the same as complementary schemes.

Instead of using colors that are opposites, it uses colors on both sides of the opposite hue:

#cc5520 #997463 #ff4441 #81ff85 #55cc20

Triadic

Triadic Color Scheme

Triadic schemes are made up of hues equally spaced around color wheel:

#b2312f #ff5f5c #ffff77 #7aaacc #3c81b2

A very dark or very pale version of one color in the triad, can make this single color stand out in the scheme:

#5eccc0 #11b2a2 #ffd736 #b200a4 #ff6df3
#5eccc0 #11b2a2 #ffeb99 #b200a4 #ff6df3
#5eccc0 #11b2a2 #806600 #b200a4 #ff6df3