css-color-keywords-better

An ESM-only type-annotated list of all CSS color keywords.

This list contains all CSS color keywords specified in:

• CSS Level 1
• CSS Level 2 (Revision 1)
• CSS Color Module Level 3
• CSS Color Module Level 4

See MDN reference on color keywords.

Installation

npm i css-color-keywords-better
pnpm add css-color-keywords-better
yarn add css-color-keywords-better

Usage

import { colorsByName, colorsByHex } from 'css-color-keywords-better';

This package has no default export. It provides two typed objects containing the colors and keywords, colorsByHex and colorsByName.

console.log(colorsByHex); //  { '#f0f8ff': [ 'aliceblue' ], ... }
console.log(colorsByName); // { aliceblue: '#f0f8ff', ... }

You can also grab two helper functions, getHexForName and getNamesForHex, for better case-insensitivity:

import {
	colorsByName,
	colorsByHex,
	getHexForName,
	getNamesForHex,
} from 'css-color-keywords-better';

// ✅ Case-insensitive with helper functions:
getHexForName('aLiCeBlUe'); // #f0f8ff
getNamesForHex('#A9A9A9'); // [ 'darkgray', 'darkgrey' ]

// ✅ Graceful handling of misspellings or invalid inputs:
getHexForName('fakecolor'); // null
getNamesForHex('#NotAColor'); // []

// ⚠️ Case-sensitive bracket/dot notation (must be lowercase):
colorsByName['aliceblue']; // #f0f8ff
colorsByName.aliceblue; // #f0f8ff
colorsByHex['#a9a9a9']; // [ 'darkgray', 'darkgrey' ]

// ⚠️ No handling of misspellings or invalid inputs (undefined!):
colorsByName['fakecolor']; // undefined
colorsByName.fakecolor; // undefined
colorsByHex['#NotAColor']; // undefined

License

MIT