Skip to main content

Color Schemes for Branding

A well-designed color scheme is crucial for establishing a strong brand identity. It helps in creating recognition, conveying the right message, and ensuring consistency across various platforms and mediums. This guide will show you how to use color-core to create and maintain effective color schemes for branding.

Creating a Brand Color Palette​

Let's walk through the process of creating a brand color palette using color-core:

1. Choosing Primary Colors​

Start by selecting your primary brand color. This could be based on your logo or other existing brand elements:

import { Color } from 'color-core';

const primaryColor = new Color('#3498db');  // A vibrant blue
console.log(primaryColor.toHex());  // '#3498db'

Here's an interactive example to choose and display your primary color:

#3498db

2. Generating Complementary Colors​

Use color-core's harmony functions to generate complementary colors:

const primaryColor = new Color('#3498db');
const [complement] = primaryColor.complementary();
console.log(`Complementary color: ${complement.toHex()}`);

Here's an interactive example to generate and display complementary colors:

Primary: #3498db
Complement: #3498db

3. Creating a Color Scheme​

Let's create an analogous color scheme to expand our palette:

const primaryColor = new Color('#3498db');
const [analogous1, analogous2] = primaryColor.analogous();
console.log(`Analogous colors: ${analogous1.toHex()}, ${analogous2.toHex()}`);

Here's an interactive example to generate and display an analogous color scheme:

Analogous 1: #33dbca
Primary: #3498db
Analogous 2: #3498db

4. Generating Accent Colors​

For accent colors, we can use the split-complementary harmony:

const primaryColor = new Color('#3498db');
const [splitComplement1, splitComplement2] = primaryColor.splitComplementary();
console.log(`Accent colors: ${splitComplement1.toHex()}, ${splitComplement2.toHex()}`);

Here's an interactive example to generate and display split-complementary colors:

Split Complement 1: #3498db
Primary: #3498db
Split Complement 2: #db3344

5. Creating Color Variations​

For each of your brand colors, you might want to create lighter and darker variations:

const primaryColor = new Color('#3498db');
const darkerShade = primaryColor.adjustLightness(-15);
const lighterTint = primaryColor.adjustLightness(15);

console.log(`Darker shade: ${darkerShade.toHex()}`);
console.log(`Primary color: ${primaryColor.toHex()}`);
console.log(`Lighter tint: ${lighterTint.toHex()}`);

Here's an interactive example to generate and display color variations:

Darker: #1d6ea5
Primary: #3498db
Lighter: #74b9e7

Ensuring Color Consistency​

To maintain brand consistency, it's important to be able to represent your colors accurately across different color spaces and mediums.

Converting Between Color Spaces​

color-core allows easy conversion between different color spaces:

const primaryColor = new Color('#3498db');
const rgb = primaryColor.toRgb();
const hsl = primaryColor.toHsl();
const cmyk = primaryColor.toCmyk();

console.log('Primary color in different formats:');
console.log(`RGB: ${JSON.stringify(rgb)}`);
console.log(`HSL: ${JSON.stringify(hsl)}`);
console.log(`CMYK: ${JSON.stringify(cmyk)}`);

Here's an interactive example to display a color in different formats:

HEX: #3498db
RGB: {"r":52,"g":152,"b":219,"a":1}
HSL: {"h":204,"s":70,"l":53}
CMYK: {"c":76,"m":31,"y":0,"k":14}

Practical Example: Creating a Full Brand Color Scheme​

Let's put it all together to create a comprehensive brand color scheme:

import { Color } from 'color-core';

function createBrandColorScheme(primaryColor: Color) {
  const [complement] = primaryColor.complementary();
  const [analogous1, analogous2] = primaryColor.analogous();
  const [accent1, accent2] = primaryColor.splitComplementary();

  return {
    primary: {
      main: primaryColor,
      light: primaryColor.adjustLightness(15),
      dark: primaryColor.adjustLightness(-15),
    },
    secondary: complement,
    tertiary1: analogous1,
    tertiary2: analogous2,
    accent1: accent1,
    accent2: accent2,
  };
}

const brandColors = createBrandColorScheme(new Color('#3498db'));

Object.entries(brandColors).forEach(([key, value]) => {
  if (value instanceof Color) {
    console.log(`${key}: ${value.toHex()}`);
  } else {
    console.log(`${key}:`);
    Object.entries(value).forEach(([subKey, subValue]) => {
      console.log(`  ${subKey}: ${(subValue as Color).toHex()}`);
    });
  }
});

Here's an interactive example to generate and display a full brand color scheme:

primary:
  main: #3498db
  light: #74b9e7
  dark: #1d6ea5
secondary: #3498db
tertiary1: #33dbca
tertiary2: #3498db
accent1: #3498db
accent2: #db3344

By using color-core's various functions, you can create sophisticated, consistent color schemes for your brand. Remember to test your color scheme in different contexts and mediums to ensure it maintains its impact and readability across all use cases.