CSS Color Scheme Generator

Enter a color to see suitable color combinations based on the triad, tetrad, monochromatic, analogous, and split complements color schemes.

Select a base color or enter one

Color Schemes & Combinations

Here are some basic techniques used in color theory for combining colors. These are all based on your selected color.

Complementary Complementary color schemes use colors at opposite sides of the color wheel.
Split Complements Similar to the complementary color scheme, however, instead of using the complementary color, a split-complement color scheme uses the two complementary colors on either side of the complement color.
Triad A triadic color scheme uses colors that are evenly spaced around the color wheel.
Tetrad The tetradic color scheme (also known as a rectangle color scheme) uses four colors arranged into two complementary pairs.
Monochromatic A monochromatic scheme takes the base hue, then repeats it in various shades, tints, and tones.
Analogous Analogous color schemes use colors that are next to each other on the color wheel.