Color-Description is a class that turns a technical color representation into a human readable description.
npm install color-description
import ColorDescription from "color-description/dist/index.esm";
console.log(ColorDescription);
const cd = new ColorDescription("#ffffff");
console.log(cd.getDescriptiveList());
/**
* pale, light, faded, delicate, glistening, bleached, neutral colorless, bright, briliant and high
**/
console.log(cd.meanings);
console.log(cd.effects);
console.log(cd.usage);
cd.color = "red";
console.log(cd.getDescriptiveList());
/**
* saturated, strong, lush, ablaze, beaming, bold, brilliant, flamboyant, vibrant, vivid, loud, very saturated, warm, mellow, red and reddish
**/
console.log(cd.meanings);
/**
* ["excitement", "energy", "passion", ...]
**/
console.log(cd.effects);
/**
* ["stimulate", "create urgency", "draw attention", ...]
**/
console.log(cd.usage);
/**
* ["caution", "food industry", "sports", ...]
**/The default dataset is written in English, and its meanings, effects, and usage labels are subjective and written from a western perspective: English dataset
Interpretation model used by the dataset:
meaningsare symbolic associationseffectsare perceptual or behavioral effectsusageis contextual fit such as industries, themes, and applications
const cd = new ColorDescription(color);color(string | object): A color representation (hex, rgb, hsl, or similar)
getDescriptiveList(): Returns an array of descriptive words for the colorgetColorFamily(): Returns the color family/category (e.g., "red", "blue")
color: Get or set the current colormeanings: Symbolic or emotional associationseffects: Typical effects or signals the color can createusage: Contexts, industries, themes, or applications where the color fits
This package supports multiple module formats:
- ESM (modern):
dist/index.esm.js - CommonJS (Node.js):
dist/index.js - IIFE (browser):
dist/index.iife.js
# Build all formats
npm run build
# Run tests
npm run test
# Development with watch mode
npm run devAll color matching is performed in OKLCH color space, which provides perceptually uniform lightness, chroma, and hue — unlike HSL where identical saturation/lightness values can look dramatically different across hues.
Hue name boundaries are empirically grounded using data from ~49,000 English-language color naming responses collected via the Many Languages, Many Colors project. Boundaries are placed at midpoints between adjacent survey-term centroids in OKLCH hue space, ensuring that each color is labeled with the name most English speakers would use.
Kim, Y., Thayer, K., Gorsky, G. S., & Heer, J. (2019). Color Names Across Languages: Salient Colors and Term Translation in Multilingual Color Naming Models. EuroVis 2019. Project repository
MIT