color-namer

Give any HEX, RGB, or HSL color a human name. Returns the color name, family, shade, mood tags, and closest CSS color — zero dependencies.

Installation

npm install color-namer

Usage

import { ColorNamer } from 'color-namer';

const namer = new ColorNamer();

namer.name('#FF5733');
namer.name('rgb(255, 87, 51)');
namer.name('hsl(14, 100%, 60%)');

Result

{
  name:    'Tomato Red',
  family:  'Red',
  shade:   'vivid',
  moods:   ['passionate', 'warm', 'energetic'],
  css:     'orangered',
  hex:     '#ff5733',
  rgb:     { r: 255, g: 87, b: 51 },
  hsl:     { h: 14, s: 100, l: 60 },
  closest: {
    curated: { name: 'Tomato Red',  hex: '#FF6347', distance: 12 },
    css:     { name: 'orangered',   hex: '#FF4500', distance: 18 },
  }
}

API

namer.name(input) → ColorResult

Name a single color.

namer.nameAll(inputs[]) → ColorResult[]

Name multiple colors at once.

namer.palette(family) → { name, hex }[]

Get all curated colors in a family.

namer.palette('Blue')  // → [{ name: 'Sky Blue', hex: '#87CEEB' }, ...]

namer.byMood(mood) → { name, hex, moods }[]

Get colors matching a mood tag.

namer.byMood('calm')       // → soft blues, grays
namer.byMood('energetic')  // → vivid reds, oranges

namer.isSimilar(colorA, colorB, threshold?) → boolean

Check if two colors are visually similar.

namer.isSimilar('#FF0000', '#FF1111')        // → true
namer.isSimilar('#FF0000', '#0000FF')        // → false
namer.isSimilar('#FF0000', '#FF3333', 50)    // custom threshold

Utilities (tree-shakeable)

import { getFamily, getShade, getMood, rgbToHsl, parseColor } from 'color-namer';

Color Families

Red · Orange · Yellow · Yellow-Green · Green · Teal · Cyan · Blue · Indigo · Violet · Pink · Rose · Gray · White · Black

Mood Tags

calm · neutral · energetic · vibrant · warm · passionate · creative · natural · fresh · balanced · trustworthy · serene · imaginative · luxurious · romantic · airy · mysterious · cheerful

License

MIT