Qix- / color 转换 CSS 颜色字符串的 JavaScript 插件

发布于 2020-10-14 12:49:21 字数 3957 浏览 1345 评论 0

支持 CSS 颜色字符串的不可变颜色转换和操作的 JavaScript 库。

var color = Color('#7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string());  // 'hsla(262, 59%, 81%, 0.5)'

console.log(color.cmyk().round().array());  // [ 16, 25, 0, 8, 0.5 ]

console.log(color.ansi256().object());  // { ansi256: 183, alpha: 0.5 }

安装

$ npm install color

使用

var Color = require('color');

初始化

var color = Color('rgb(255, 255, 255)')
var color = Color({r: 255, g: 255, b: 255})
var color = Color.rgb(255, 255, 255)
var color = Color.rgb([255, 255, 255])

设置单个通道的值。alpha, red, green, blue, hue, saturationl(HSL),saturationv(HSV),lightness, whiteness, blackness, cyan, magenta, yellow, black

字符串构造函数由 color-string 提供。

颜色转换

color.hsl();

将颜色转换为不同的空间(hsl(), cmyk()等等)。

color.object(); // {r: 255, g: 255, b: 255}

获取颜色值的散列。反映颜色的当前模式(见上文)。

color.rgb().array()  // [255, 255, 255]

获取值的数组。array()。反映颜色的当前模式(见上文)。

color.rgbNumber() // 16777215 (0xffffff)

获取RGB数字值。

color.hex() // #ffffff

得到十六进制值。

color.red() // 255

获取单个通道的值。

CSS 颜色值字符串

color.hsl().string()  // 'hsl(320, 50%, 100%)'

调用 .string() 用一个数字将数字舍入小数位。默认为 1。

Luminosity

color.luminosity();  // 0.412

这个 WCAG光度 颜色。0是黑色,1是白色。

color.contrast(Color("blue"))  // 12

这个 WCAG对比度 另一种颜色,从1(相同颜色)到21(对比b/w白色和黑色)。

color.isLight();  // true
color.isDark();   // false

获取颜色是浅还是暗,这对于决定文本颜色很有用。

转换颜色

color.negate()         // rgb(0, 100, 255) -> rgb(255, 155, 0)

color.lighten(0.5)     // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
color.lighten(0.5)     // hsl(100, 50%, 0)   -> hsl(100, 50%, 0)
color.darken(0.5)      // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color.darken(0.5)      // hsl(100, 50%, 0)   -> hsl(100, 50%, 0)

color.lightness(50)    // hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)

color.saturate(0.5)    // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color.desaturate(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
color.grayscale()      // #5CBF54 -> #969696

color.whiten(0.5)      // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5)     // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)

color.fade(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.opaquer(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)

color.rotate(180)      // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color.rotate(-90)      // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)

color.mix(Color("yellow"))        // cyan -> rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3)   // cyan -> rgb(77, 255, 179)

// chaining
color.green(100).grayscale().lighten(0.6)

资源

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。