Color Horse

The automatic color scheme generator

Color Horse generates a harmonious color scheme from any two colors. It uses modern color science to select complimentary colors that maintain a sense of perceptual uniformity.

To begin, try choosing your own colors below.

How it works

Color Horse uses a color space called “OKLCH” to generate palettes. OKLCH emphasizes perceptual uniformity between different color shades. That means you can choose a red and a blue (or any two colors) that have a similar feeling of richness or lightness.

To begin, Color Horse extracts the hue from each of your colors. These two hues can be placed on a circle.

Next, Color Horse extracts the lightness from each of your input colors. This gives us two starting points to create a gradient of shades from light to dark. Color palettes typically use different shades for different elements — backgrounds, buttons, text, headings.

After hue and lightness, OKLCH uses one more property to identify each color: saturation, or “chroma.” Chroma is just as important as hue in defining a color. Chroma is the difference between brown and red, beige and yellow, grey and blue.

When we place our colors on a circle by hue, we can also represent their saturation as their position on the circle’s radius, where the center of the circle is grey (the same for all colors) and the circumference of the circle is a fully-saturated rainbow.

Color palettes typically lower the saturation of the lightest and darkest colors of the palette. This makes the mid-range colors the most vibrant while the colors used for text and backgrounds are softer.

These three properties (lightness, chroma, and hue) can describe virtually any color (including many that your computer can’t even display accurately). By choosing colors that have harmonious relationships between these three variables, we create a set of colors that have a sense of perceptual uniformity, which can be very pleasing to the eye. We can actually visualize this process in three dimensions.

For a website, a simple color palette scheme a few hues for brand colors and a few hues for “semantic” colors that have generic meanings (like red for “danger”). Color Horse automatically chooses these colors for you:

• Primary (your first input)
• Secondary (your second input)
• Tertiary (symmetrical hue of second input)
• Accent (opposite hue of first input)
• Info (a blue)
• Success (a green)
• Warning (a yellow or orange)
• Danger (a red)

The result is a simple, cohesive color scheme.

The full palette includes four more hues not included in the color scheme. You could use these hues if you like, but for most color schemes eight colors is more than enough.

Showcase

Looking for inspiration? Try out some iconic color combinations from famous brands.

Integrations

To use this palette, you can copy paste the variables directly into your website’s CSS:

Copy:root {
  --primary-01: #050303;
  --primary-02: #2b1e22;
  --primary-03: #574047;
  --primary-04: #84636d;
  --primary-05: #ad8691;
  --primary-06: #c4abb2;
  --primary-07: #cccccc;
  --primary-08: #e4dadd;
  --primary-09: #efeaeb;
  --primary-10: #faf8f8;
  --secondary-01: #050303;
  --secondary-02: #2b1e22;
  --secondary-03: #574047;
  --secondary-04: #84636d;
  --secondary-05: #ad8691;
  --secondary-06: #c4abb2;
  --secondary-07: #d7c7cc;
  --secondary-08: #dddddd;
  --secondary-09: #efeaeb;
  --secondary-10: #faf8f8;
  --tertiary-01: #050303;
  --tertiary-02: #2b1e1f;
  --tertiary-03: #574142;
  --tertiary-04: #856466;
  --tertiary-05: #ad878a;
  --tertiary-06: #c4acad;
  --tertiary-07: #d7c8c9;
  --tertiary-08: #e4dadb;
  --tertiary-09: #efeaea;
  --tertiary-10: #faf8f8;
  --accent-01: #030404;
  --accent-02: #1d2324;
  --accent-03: #3f4a4b;
  --accent-04: #627172;
  --accent-05: #839798;
  --accent-06: #a0b8ba;
  --accent-07: #b7d2d4;
  --accent-08: #cce2e4;
  --accent-09: #e2eeef;
  --accent-10: #f5f9fa;
  --tip-01: #030403;
  --tip-02: #1e2420;
  --tip-03: #3f4b43;
  --tip-04: #627268;
  --tip-05: #83988b;
  --tip-06: #a0baaa;
  --tip-07: #b8d5c2;
  --tip-08: #cbe5d4;
  --tip-09: #e2efe7;
  --tip-10: #f5faf7;
  --info-01: #030304;
  --info-02: #1d2328;
  --info-03: #3f4952;
  --info-04: #61707d;
  --info-05: #8295a7;
  --info-06: #a6b4c2;
  --info-07: #c4cdd6;
  --info-08: #d8dee4;
  --info-09: #e8ecef;
  --info-10: #f7f8fa;
  --warning-01: #030302;
  --warning-02: #22231d;
  --warning-03: #47493e;
  --warning-04: #6d6f60;
  --warning-05: #929480;
  --warning-06: #b2b59d;
  --warning-07: #cccfb4;
  --warning-08: #dde1c3;
  --warning-09: #ebefcf;
  --warning-10: #f8faee;
  --danger-01: #050302;
  --danger-02: #29201c;
  --danger-03: #54433d;
  --danger-04: #80675f;
  --danger-05: #aa8a7f;
  --danger-06: #c4ada5;
  --danger-07: #d7c9c4;
  --danger-08: #e4dbd8;
  --danger-09: #efeae8;
  --danger-10: #faf8f7;
}

To use the variables in an app, copy-paste the following JavaScript object:

Copy{
  primary: [
    "#050303",
    "#2b1e22",
    "#574047",
    "#84636d",
    "#ad8691",
    "#c4abb2",
    "#cccccc",
    "#e4dadd",
    "#efeaeb",
    "#faf8f8"
  ],
  secondary: [
    "#050303",
    "#2b1e22",
    "#574047",
    "#84636d",
    "#ad8691",
    "#c4abb2",
    "#d7c7cc",
    "#dddddd",
    "#efeaeb",
    "#faf8f8"
  ],
  tertiary: [
    "#050303",
    "#2b1e1f",
    "#574142",
    "#856466",
    "#ad878a",
    "#c4acad",
    "#d7c8c9",
    "#e4dadb",
    "#efeaea",
    "#faf8f8"
  ],
  accent: [
    "#030404",
    "#1d2324",
    "#3f4a4b",
    "#627172",
    "#839798",
    "#a0b8ba",
    "#b7d2d4",
    "#cce2e4",
    "#e2eeef",
    "#f5f9fa"
  ],
  tip: [
    "#030403",
    "#1e2420",
    "#3f4b43",
    "#627268",
    "#83988b",
    "#a0baaa",
    "#b8d5c2",
    "#cbe5d4",
    "#e2efe7",
    "#f5faf7"
  ],
  info: [
    "#030304",
    "#1d2328",
    "#3f4952",
    "#61707d",
    "#8295a7",
    "#a6b4c2",
    "#c4cdd6",
    "#d8dee4",
    "#e8ecef",
    "#f7f8fa"
  ],
  warning: [
    "#030302",
    "#22231d",
    "#47493e",
    "#6d6f60",
    "#929480",
    "#b2b59d",
    "#cccfb4",
    "#dde1c3",
    "#ebefcf",
    "#f8faee"
  ],
  danger: [
    "#050302",
    "#29201c",
    "#54433d",
    "#80675f",
    "#aa8a7f",
    "#c4ada5",
    "#d7c9c4",
    "#e4dbd8",
    "#efeae8",
    "#faf8f7"
  ],
}

Working in a design tool instead? Download the palette as an Adobe Swatch Exchange file, importable into Photoshop, Illustrator, InDesign, Affinity, and Figma or Sketch via a plugin:

Color Horse also exists as a zero-dependency npm package called colorhorse. Install the package to use colorhorse to programmatically generate color schemes.

npm install colorhorse

Pass two colors to the utility function.

import { getScheme } from "colorhorse";

getScheme(colorOne, colorTwo);

Creator