npm 包 colorx 使用教程

简介

colorx 是一款基于 Node.js 的颜色处理工具，它提供了丰富的 API，方便开发者在前端界面中对颜色进行处理和操作。它支持多种颜色格式转换，比如 RGB、HSL、HSV、CMYK 等，也支持对颜色进行调整和生成新的色彩。在使用 colorx 之前，需要先安装 Node.js 环境。

安装

使用 npm 安装 colorx：

npm i colorx

基本使用

使用 require 引入 colorx：

const Color = require('colorx');

创建颜色对象

• 通过颜色字符串创建颜色对象

const colorStr = '#ff0000';
const color = new Color(colorStr);

• 通过 RGB 模式创建颜色对象

const r = 255, g = 0, b = 0;
const color = new Color(r, g, b);

• 通过 RGBA 模式创建颜色对象

const r = 255, g = 0, b = 0, a = 0.5;
const color = new Color(r, g, b, a);

• 通过 HSL 模式创建颜色对象

const h = 0, s = 100, l = 50;
const color = new Color(h, s, l, 'hsl');

• 通过 HSV 模式创建颜色对象

const h = 0, s = 100, v = 100;
const color = new Color(h, s, v, 'hsv');

• 通过 CMYK 模式创建颜色对象

const c = 0, m = 100, y = 100, k = 0;
const color = new Color(c, m, y, k, 'cmyk');

获取颜色对象属性

• 获取 RGB 属性

const color = new Color('#ff0000');
console.log(color.rgb());

输出结果：

{ r: 255, g: 0, b: 0 }

• 获取 RGBA 属性

const color = new Color('#ff0000');
console.log(color.rgba());

输出结果：

{ r: 255, g: 0, b: 0, a: 1 }

• 获取 HSL 属性

const color = new Color('#ff0000');
console.log(color.hsl());

输出结果：

{ h: 0, s: 100, l: 50 }

• 获取 HSV 属性

const color = new Color('#ff0000');
console.log(color.hsv());

输出结果：

{ h: 0, s: 100, v: 100 }

• 获取 CMYK 属性

const color = new Color('#ff0000');
console.log(color.cmyk());

输出结果：

{ c: 0, m: 100, y: 100, k: 0 }

调整颜色对象属性

• 调整亮度

const color = new Color('#ff0000');
console.log(color.lighten(0.2).hex());

输出结果：

#ff4d4d

• 调整暗度

const color = new Color('#ff0000');
console.log(color.darken(0.2).hex());

输出结果：

#990000

• 调整饱和度

const color = new Color('#ff0000');
console.log(color.saturate(0.2).hex());

输出结果：

#ff1a1a

• 调整灰度度

const color = new Color('#ff0000');
console.log(color.grayscale().hex());

输出结果：

#808080

• 反转颜色

const color = new Color('#ff0000');
console.log(color.invert().hex());

输出结果：

#00ffff

转换颜色格式

• 转换 RGB 格式到 HSL 格式

const color = new Color('#ff0000');
console.log(color.rgb2hsl());

输出结果：

{ h: 0, s: 100, l: 50 }

• 转换 HSL 格式到 RGB 格式

const color = new Color('hsl(0, 100%, 50%)');
console.log(color.hsl2rgb());

输出结果：

{ r: 255, g: 0, b: 0 }

示例

使用 colorx 实现以下效果：

• 获取按钮背景色并反转颜色
• 将背景色转为灰度
• 调整透明度到 0.2
• 输出新的颜色

const btn = document.querySelector('.btn');
const color = new Color(getComputedStyle(btn).backgroundColor);
const newColor = color.invert().grayscale().alpha(0.2).hex();
console.log(newColor);

总结

colorx 是一款非常实用的颜色处理工具，它提供了多种颜色格式转换和调整功能，可以帮助开发者在前端界面中更精细地处理颜色。在使用时，开发者需要先安装 Node.js 环境，并使用 npm 安装 colorx。同时，开发者也需要了解颜色基础知识，以便更好地使用 colorx 进行颜色操作和处理。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef1bb338c4ce90ee4ca3b26