Skip to content

Latest commit

 

History

History
170 lines (136 loc) · 4.04 KB

README.md

File metadata and controls

170 lines (136 loc) · 4.04 KB

color-bridge

npm License GitHub issues npm

A tool to generate region-specific color palettes, based on cultural contexts.

Documentation website

npm i color-bridge

import colorBridge from "color-bridge";

const { bridge, utils } = colorBridge();

const { palette, hue, themes } = bridge({ culture: "chinese" });

/**
 * palette: {
    caution: "#FFEE00",
    danger: "#1A1A1A",
    energy: "#FF3000",
    error: "#1A1A1A",
    growth: "#EFBF04",
    happiness: "#FF3000",
    innovation: "#FF3000",
    luck: "#FF3000",
    mourning: "#FAFAFA",
    neutrality: "#888888",
    optimism: "#EFBF04",
    sadness: "#FAFAFA",
    stability: "#3030FF",
    success: "#FF3000",
    urgency: "#FF7900"
}
 * hues: {
    caution: [
        "#fffccc",
        "#fffab3",
        "#fff899",
        "#fff780",
        "#fff566",
        "#fff34d",
        "#fff133",
        "#fff01a",
        "#ffee00",
        "#e6d600",
        "#ccbe00",
        "#b3a700",
        "#998f00",
        "#807700",
        "#665f00",
        "#4d4700",
        "#333000"
    ],
    danger: [...],
    ... and so on
 } 
 */

Available cultures:

  • african:
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "african" });
  • chinese
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "chinese" });
  • indian
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "indian" });
  • japanese
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "japanese" });
  • latinAmerican
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "latinAmerican" });
  • middleEastern
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "middleEastern" });
  • southeastAsian
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "southeastAsian" });
  • western
const { bridge } = colorBridge();
const { palette, hues, themes } = bridge({ culture: "western" });

Utility functions

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

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

// Create a set of colors shifted from a hex color
const myShiftedHues = 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
});

// 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 });

// Shift a color by a given force
const shifted = shiftHue({ hexColor: "#6376DD", force: 0.2 });

// Return a text color for a given background, for a perfect contrast
const textColor1 = textColorForBackground("#6376DD"); // #000000
const textColor2 = textColorForBackground("#887123"); // #FFFFFF

// Return a text color for a given background, with options for dark or light return color
const textColor3 = textColorForBackground("#6376DD", {
  light: "#FAFAFA",
  dark: "#1A1A1A",
}); // #1A1A1A
const textColor4 = textColorForBackground("#887123", {
  light: "#FAFAFA",
  dark: "#1A1A1A",
}); // #FAFAFA