named-color

一个功能完善的命名颜色库，支持148种CSS标准命名色，提供直接访问、中英文查询及多格式转换功能。支持ESM、CJS和IIFE多种模块格式，适用于浏览器和Node.js环境。

特性

• 包含148种CSSCSS标准命名色的完整信息（中英文名称、HEX、RGB、HSL）
• 支持通过英文名称直接访问（如 namedColor.red）
• 灵活的查询功能：支持中英文名称、HEX值、RGB对象及关键词模糊查询
• 提供多种格式转换：内置HEX→RGB、RGB→HSL转换逻辑
• 多模块支持：同时提供ESM、CJS和IIFE格式，适配各种使用场景

安装

npm install named-color
# 或
yarn add named-color

模块支持

• ESM：import { namedColor, queryColor } from 'named-color'
• CJS：const { namedColor, queryColor } = require('named-color')
• IIFE：通过script标签引入，暴露全局变量 namedcolor（注意小写）

<script src="https://unpkg.com/named-color/dist/index.global.js"></script>
<script>
  console.log(namedcolor.namedColor.red);
</script>

类型定义

库内置TypeScript类型定义，使用时将获得完整的类型提示。

// 颜色分量类型
interface RGB {
  r: number; // 0-255
  g: number; // 0-255
  b: number; // 0-255
  a?: number; // 0-1 可选透明度
}

interface HSL {
  h: number; // 0-360 色相
  s: number; // 0-100 饱和度（百分比）
  l: number; // 0-100 亮度（百分比）
  a?: number; // 0-1 可选透明度
}

// 完整颜色信息
interface ColorInfo {
  name: string; // 英文名称
  chinese: string; // 中文名称
  hex: string; // 十六进制值（如 '#ff0000'）
  rgb: RGB; // RGB颜色对象
  hsl: HSL; // HSL颜色对象
}

使用示例

1. 直接访问颜色

通过英文名称直接获取颜色完整信息：

import { namedColor } from 'named-color';

// 获取红色信息
console.log(namedColor.red);
// 输出：
// {
//   name: 'red',
//   chinese: '红色',
//   hex: '#ff0000',
//   rgb: { r: 255, g: 0, b: 0 },
//   hsl: { h: 0, s: 100, l: 50 }
// }

// 获取蓝色的十六进制值
console.log(namedColor.blue.hex); // '#0000ff'

// 获取绿色的RGB值
console.log(namedColor.green.rgb); // { r: 0, g: 128, b: 0 }

2. 查询颜色

使用 queryColor 函数进行灵活查询：

import { queryColor } from 'named-color';

// 1. 中文名称查询
const result1 = queryColor('红色');
console.log(result1[0].hex); // '#ff0000'

// 2. 英文名称查询
const result2 = queryColor('blue');
console.log(result2[0].chinese); // '蓝色'

// 3. 十六进制查询（带#或不带均可）
const result3 = queryColor('#ffff00');
console.log(result3[0].name); // 'yellow'

// 4. RGB对象查询（模糊匹配，默认误差10）
const result4 = queryColor({ r: 250, g: 0, b: 0 }, 10);
console.log(result4[0].name); // 'red'（因为250与255的差在10以内）

// 5. 关键词模糊查询
const result5 = queryColor('浅');
console.log(result5.map(c => c.chinese)); // 所有中文名称包含"浅"的颜色

3. 获取所有颜色

import { getAllColors } from 'named-color';

// 获取所有148种颜色的列表
const allColors = getAllColors();
console.log(allColors.length); // 148

浏览器环境使用（IIFE）

<script src="https://unpkg.com/named-color/dist/index.global.js"></script>
<script>
  // 全局变量为 namedcolor（小写）
  console.log(namedcolor.namedColor.pink.hex); // '#ffc0cb'
  
  const greens = namedcolor.queryColor('绿');
  console.log(greens.map(c => c.name)); // 所有包含"绿"的颜色英文名称
</script>

许可证

MIT