介绍

我写了关于 chroma.js，一个可以处理颜色的 Javascript 库，所以我写了内容与官方文档相差不大

概述 您可以轻松创建库和颜色图，从而更轻松地使用 Javascript 处理颜色。

文档和主页

Github

许可证似乎有点特别。

包含 Apache2.0 许可的颜色吗？你可能想在这里更小心一点

安装 用于 npm

npm install chroma-js

import chroma from "chroma-js";

CDN 网址

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js

尝试基本功能

根据文档

可以读取各种格式的颜色 颜色分析和处理 将颜色转换为不同的格式 允许在不同颜色空间中进行线性和贝塞尔插值

接着就，随即

一个简单的读/操作/输出链的例子

const col = chroma('pink').darken().saturate(2).hex();
console.log(col);

"#ff6d93"

这是，粉红色，较暗，饱和度约为 2，十六进制命令

它还可以以各种方式使用（例如，) 可以产生漂亮的颜色

接着就，随即

const cols = chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6);
console.log(cols);

["#fafa6e","#9cdf7c","#4abd8c","#00968e","#106e7c","#2a4858"]

这是，在 LCH 颜色空间中创建从 #fafa6e 到 #2A4858 的 6 级色阶命令

关于 LCH

各种色彩空间

顺便说一下，你可以大致指定这样的东西

const output = document.getElementById('output');

const cols = chroma.scale(['blue', 'green', 'yellow', 'red']).mode('lab');
for( var i = 0; i <=1; i = i + 0.1) {
　　output.innerHTML += 
　　　　　　"<div class='color' style='background-color: " + cols(i) + ";'></div>"
}

上面的操场

哪怕只是轻轻一点，也能做各种与颜色有关的事情。

如果你有色彩空间的知识，你就能更好地使用它，所以你需要多学习一点。 . .

我想

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628375.html