Color Bridge v2.1.0

New utility functions

shiftHue: shift a given hex color by a given force

import colorBridge from "color-bridge";

const { utils } = colorBridge();
const { shiftHue } = utils();

const shifted = shiftHue({ hexColor: '#6376DD', force: 0.2 });

createShiftedHues: create a set of colors shifted from a given color, with optional step and range

import colorBridge from "color-bridge";

const { utils } = colorBridge();
const { createShiftedHues } = utils();

const shiftedColors = createShiftedHues({
  hexColor: '#6376DD',
  step: 0.018, // step is optional. Default: 0.018. The smaller the step, the higher number of returned colors
  range: 0.3, // range is optional. Default: 0.3. The bigger the range, the bigger the shift from the start color
})

Color Bridge v2.0.0

This release changes the way the library is used, to be able to use utility functions separately.

import colorBridge from "color-bridge"; // no change here

const { bridge, utils } = colorBridge();

const { palette, hues, themes } = bridge({ culture: 'chinese' });

const {
  createHues,
  darkenHexColor,
  lightenHexColor,
  textColorForBackground
} = utils();

This constitutes a breaking change from v1, hence the major upgrade.

Color Bridge v1.2.0

New utility function: textColorForBackground

Return a text color for a given background color, to guarantee the perfect contrast ratio following WCAG guidelines.

const { textColorForBackground } = colorBridge({ culture: 'chinese' });

const textColor1 = textColorForBackground('#6376DD') // #000000
const textColor2 = textColorForBackground('#3030FF') // #FFFFFF

The function accepts the following options, to set the dark and light return colors:

const textColor1 = textColorForBackground('#6376DD', { light: '#FAFAFA', dark: '#1A1A1A' }) // #1A1A1A
const textColor2 = textColorForBackground('#3030FF', { light: '#FAFAFA', dark: '#1A1A1A'}) // #FAFAFA

Color Bridge v1.1.2

New features

Themes

Generate color themes for a given culture:

const { themes } = colorBridge({ culture: 'chinese' });

/* Output:
{
  business: {
    backgroundColor: '#fafafa',
    textColor: '#1A1A1A',
    primary: '#c41e3a',
    secondary: '#e3b041';
    tertiary: '#f4F4F4'
  },
  celebration: {...},
  luxury: {...},
  technology: {...},
  minimalist: {...}
}
*/

Utility functions

A set of useful functions to manage colors:

const { createHues, darkenHexColor, lightenHexColor } = colorBridge({ culture: "chinese" });

// Create a set of 16 colors fro light to dark from a hex color
const myHues = createHues({ hexColor: '#6376DD' });

// Darken a hex color by a given force (from 0 to 1)
const darkened = darkenHexColor({ hexColor: '#6376DD', force: 0.2 });

// Lighten a hex color by a given force (from 0 to 1)
const darkened = lightenColor({ hexColor: '#6376DD', force: 0.2 });

Color Bridge v1.0.0