tl; dr
ð
自从我对颜色及其数学性质的浓厚兴趣兴趣以来已经过去了将近两年。我不是数学书呆子(不要误会我的意思),但是通过将特定值范围应用于负责实现所需效果的渠道,我对某种外观的颜色感到惊讶。
大部分的工作都受到了我从开源社区刮擦的材料的启发。我站在巨人的肩膀上。
颜色具有一组属性或属性,我们可以用来将其描述到计算机上,应该看起来像某种颜色。这些特性(在这种情况下)为 hue,饱和度,轻度和不透明度。当我们在代码中与它们打交道时,我们将它们称为渠道。
如果我们对其值进行故意的更改,这些属性会产生不同的效果。例如,在轻质通道上价值低的颜色看起来会更暗(当然,这并不奇怪)。通过保持轻度通道的夹紧,同时调整色调和饱和通道的值,我们可以通过一定的外观来实现颜色。例如,粉彩具有高饱和度和低值,并且在HSV颜色空间中很容易复制。
在Huetiful-Js中,有一个pastel()
实用程序,它可以从负责任的频道中从随机范围中返回颜色的柔和版本,我们可以获得柔和的颜色:
import { pastel } from "huetiful-js"
let myPastelBlue = pastel("blue")
console.log(myPastelBlue)
// "#030361ff"
您甚至可以将其传递给Array.map
,并在颜色的集合中迭代它,并获得柔和版本的数组:
let sample = [
"#00ffdc",
"#00ff78",
"#00c000",
"#007e00",
"#164100",
"#ffff00",
"#310000",
"#3e0000",
"#4e0000",
"#600000",
"#720000",
];
let samplePastels = sample.map(pastel)
好吧,但是如果我们想要一定色调范围的颜色怎么办?
import { filterByHue } from "huetiful-js"
let sample = [
"#00ffdc",
"#00ff78",
"#00c000",
"#007e00",
"#164100",
"#ffff00",
"#310000",
"#3e0000",
"#4e0000",
"#600000",
"#720000",
];
let filteredColors = filterByHue(sample,30,120)
但是我们的客户很挑剔,希望按顺序按色调排序的颜色:
import { sortByHue,filterByHue } from "huetiful-js"
let sample = [
"#00ffdc",
"#00ff78",
"#00c000",
"#007e00",
"#164100",
"#ffff00",
"#310000",
"#3e0000",
"#4e0000",
"#600000",
"#720000",
];
let filteredColors = filterByHue(sample,30,120)
let sortedColors = sortByHue(filteredColors)
//
亮度,亮度,饱和度和(偶数)温度如何?是的,您也可以将这些以及更多用作过滤和排序标准
我想您可以看到我要去哪里(希望如此)。通过封装功能内部颜色的属性,我们可以创建灵活的调色板,可以使用实用程序进行微调。
甚至有一个函数可以判断颜色是否是灰度(如果您认为我在说谎的话,请对其进行测试。如果失败,请执行PR)。
您可以查看the repository on GitHub here或package on npm
或只是放下一个email,让我知道您的想法。甚至简单的你好。
愿福斯与您在一起。