颜色色值处理库Color.js

在前端开发中，处理颜色是一个常见且关键的任务。无论是在设计用户界面、创建数据可视化还是实现动态效果时，颜色都扮演着重要的角色。color.js 是一个由 Qix- 维护的 JavaScript 库，它提供了一套强大且灵活的工具来处理颜色的转换和操作。这个库在 GitHub 上的地址是：https://github.com/Qix-/color。

还有一个功能更为全面专业的库（https://colorjs.io/，由 CSS Color 规范的编辑者 Lea Verou 和 Chris Lilley 创建，并由一个小型的维护团队继续开发）、但日常大多场景不太用得到，本文不作更多介绍。

特点

轻量级：库的体积小(产物压缩+gzip后2.3k)，加载速度快，对性能的影响微乎其微。
多种颜色空间支持：支持 RGB、HSL、HSV、CMYK 等多种颜色空间。
链式调用：支持链式操作，使得颜色转换和操作更加流畅。
扩展性：可以通过插件或自定义函数来扩展库的功能。
兼容性：兼容现代浏览器和 Node.js 环境。

安装和使用

安装

通过 npm 安装

1	npm install color

或者在浏览器中直接引入：

1	<script src="https://cdn.jsdelivr.net/npm/color@latest/color.min.js"></script>

使用

color.js 提供了一个简单的 API 来创建和操作颜色对象。

创建颜色对象

你可以使用多种方式来创建颜色对象：

// 通过颜色名
const color = color('blue');

// 通过十六进制
const color = color('#39f');

// 通过 RGB 数组
const color = color.rgb(255, 255, 255); // 或 const color = color.rgb([255, 100, 100]);

// 通过 RGBA 对象
const color = color({r: 255, g: 100, b: 100, a: 0.5});

color.js 允许你设置颜色的各个通道值，包括 alpha、red、green、blue、hue、saturationl (hsl)、saturationv (hsv)、lightness、whiteness、blackness、cyan、magenta、yellow、black 等。

获取颜色值

获取颜色对象

// 获取颜色对象的哈希值
color.object(); // {r: 255, g: 255, b: 255}

// 获取颜色对象的数组表示
color.rgb().array()  // [255, 255, 255]

获取 RGB 数值

1 2	// 获取颜色的 RGB 数值 color.rgbNumber() // 16777215 (0xffffff)

获取十六进制值

// 获取颜色的十六进制值
color.hex() // #ffffff

// 获取颜色的 RGBA 十六进制值
color.hexa() // #ffffffff

获取单个通道值

1 2	// 获取颜色的红色通道值 color.red() // 255

CSS 字符串表示

// 获取颜色的 HSL 字符串表示
color.hsl().string()  // 'hsl(320, 50%, 100%)'

// 调用 .string() 方法并指定小数位数
color.hsl().string(2)  // 'hsl(320.00, 50.00%, 100.00%)'

颜色转换

color.js 支持在不同颜色空间之间转换：

// 转换为 HSL 格式
const hsl = color.hsl().toString();

// 转换为 HSV 格式
const hsv = color.hsv().toString();

// 转换为 CMYK 格式
const cmyk = color.cmyk().toString();

颜色操作

你可以对颜色对象进行各种操作，如调整亮度、饱和度、色调等：

// 增加亮度
const lighter = color.lighten(1);

// 增加饱和度
const moreSaturated = color.saturate(1);

// 旋转色调
const rotated = color.rotate(90);

颜色比较和辅助获取

const color1 = color('red');
const color2 = color('blue');

// 比较两个颜色是否相等
const isEqual = color1.equals(color2); // 返回 false

// 获取颜色的亮度值
const brightness = color1.brightness(); // 返回一个介于 0 到 255 之间的值

// 获取颜色的对比度比（与黑色或白色的对比度）
const contrast = color1.contrast(color2); // 返回一个介于 0 到 1 之间的值

颜色明暗判断

// 判断颜色是否为“亮色”
color.isLight();  // true

// 判断颜色是否为“暗色”
color.isDark();   // false

颜色距离和差异获取

const color1 = color('red');
const color2 = color('green');

// 计算两个颜色在 RGB 空间中的差异
const delta = color1.deltaE(color2); // 返回一个 DeltaE 值

颜色混合

color.js 还允许你混合两种颜色：

1	const mixed = color.mix('red', 0.5);

应用场景

color.js 的应用场景非常广泛，以下是一些典型的用例：

动态主题切换

在需要根据用户偏好或时间（如白天/夜间模式）动态切换主题颜色的应用中，color.js 可以帮助你轻松调整颜色的亮度和对比度，以适应不同的主题。

数据可视化

在数据可视化项目中，color.js 可以帮助你创建颜色渐变，以表示数据的变化趋势或不同类别的数据。

图像处理

在图像处理应用中，color.js 可以用于分析图像中的颜色分布，提取主要颜色，或者根据图像内容自动生成配色方案。

无障碍性检查

color.js 可以帮助开发者检查颜色组合是否符合无障碍性标准，如 WCAG 对比度要求，确保网站对所有用户都友好。

结论

color.js 是一个功能强大、灵活且易于使用的颜色处理库。它为前端开发者提供了一套完整的工具来处理颜色的转换、操作和动态调整，使得在各种项目中实现复杂的颜色需求变得简单。无论是在网页设计、数据可视化还是用户界面开发中，color.js 都是一个值得信赖的选择。

【工具】颜色色值处理库colorjs