Skip to main content

Color Harmonies with color-core

Color harmonies are combinations of colors that are visually appealing and work well together. They are based on the arrangement of colors on a color wheel. color-core provides methods to easily generate various color harmonies. Let's explore these harmonies and how to create them.

Supported Color Harmonies​

color-core supports the following color harmonies:

  1. Complementary
  2. Analogous
  3. Triadic
  4. Tetradic (Rectangle)
  5. Split-Complementary
  6. Double Split-Complementary
  7. Square
  8. Monochromatic
  9. Shades
  10. Tints
  11. Tones

Let's examine each of these in detail:

Complementary Colors​

Complementary colors are pairs of colors that are opposite each other on the color wheel. They create a high contrast and vibrant look when used together.

const color = new Color('#ff0000');
const [base, complement] = color.complementary();

Choose a base color:

Base: #ff0000

Complement: #00ffff

Analogous Colors​

Analogous colors are groups of three colors that are next to each other on the color wheel. They usually match well and create serene and comfortable designs.

const color = new Color('#ff0000');
const [base, analog1, analog2] = color.analogous();

Choose a base color:

Analogous colors: #ff0000, #ff0080, #ff8000

Triadic Colors​

Triadic colors are three colors equally spaced around the color wheel. They tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.

const color = new Color('#ff0000');
const [base, triad1, triad2] = color.triadic();

Choose a base color:

Triadic colors: #ff0000, #00ff00, #0000ff

Tetradic Colors (Rectangle)​

Tetradic color harmony uses four colors arranged into two complementary pairs. This scheme is rich and offers many possibilities for variation.

const color = new Color('#ff0000');
const [base, tetra1, tetra2, tetra3] = color.tetradic();

Choose a base color:

Tetradic colors: #ff0000, #80ff00, #00ffff, #8000ff

Split-Complementary Colors​

Split-complementary color harmony uses a base color and the two colors adjacent to its complement. This provides high contrast while being more nuanced than a complementary scheme.

const color = new Color('#ff0000');
const [base, split1, split2] = color.splitComplementary();

Choose a base color:

Split-complementary colors: #ff0000, #00ff80, #0080ff

Double Split-Complementary Colors​

Double split-complementary harmony uses four colors: a base color, its complement, and the colors on either side of the complement. This creates a rich, vibrant palette.

const color = new Color('#ff0000');
const [base, doubleSplit1, doubleSplit2, doubleSplit3, doubleSplit4] = color.doubleSplitComplementary();

Choose a base color:

Double split-complementary colors: #ff0000, #00ff80, #0080ff, #ff0080, #ff8000

Square Colors​

Square color harmony uses four colors evenly spaced around the color wheel. This creates a balanced, dynamic color scheme.

const color = new Color('#ff0000');
const [base, square1, square2, square3] = color.square();

Choose a base color:

Square colors: #ff0000, #80ff00, #00ffff, #8000ff

Monochromatic Colors​

Monochromatic color harmony uses variations in lightness and saturation of a single color. This creates a cohesive and sophisticated look.

const color = new Color('#ff0000');
const monochromaticColors = color.monochromatic(5); // generates 5 monochromatic colors

Choose a base color:

Monochromatic colors: #000000, #800000, #ff0000, #ff8080, #ffffff

Shades, Tints, and Tones​

color-core also provides methods to generate shades (darker versions), tints (lighter versions), and tones (less saturated versions) of a color.

const color = new Color('#ff0000');
const shades = color.shades(10);
const tints = color.tints(10);
const tones = color.tones(10);

Choose a base color for shades:

Shades: #ff0000, #e30000, #c60000, #aa0000, #8e0000, #710000, #550000, #390000, #1c0000, #000000

Choose a base color for tints:

Tints: #ff0000, #ff1c1c, #ff3939, #ff5555, #ff7171, #ff8e8e, #ffaaaa, #ffc6c6, #ffe3e3, #ffffff

Choose a base color for tones:

Tones: #ff0000, #f10e0e, #e31c1c, #d52b2b, #c63939, #b84747, #aa5555, #9c6363, #8e7171, #808080

These color harmony methods provide a powerful toolkit for creating visually appealing color schemes in your projects. Experiment with different base colors and harmony types to find the perfect combination for your needs.