Chroma
chroma
chroma(color)
要使用 chroma-js，第一步是将你的颜色放入构造函数 chroma() 中。该函数尝试为你猜测输入颜色的格式。例如，它将识别 W3CX11 规范中的任何命名颜色：
chroma('hotpink')注意
chroma() 构造函数将返回一个 chroma 颜色对象。当需要自动类型转换时，该对象会默认返回对应颜色的十六进制字符串（即该对象的 valueOf 方法的默认返回值）。
如果没有匹配的命名颜色，chroma.js 则会检查十六进制字符串。它忽略大小写，# 符号是可选的，并能识别较短的三个字母格式。因此，诸如 #ff3399、ff3399、f39 等都是有效的十六进制表示形式。
chroma('#ff3399')
chroma('f39')除了十六进制字符串之外，十六进制数（事实上，任何介于 0 到 16777215 之间的数）都将被识别。
chroma(0xff3399)你可以单独传递 RGB 值。每个参数必须在 0 到 255 之间。你可以将数字作为单独的参数或作为数组传递。
chroma(0xff, 0x33, 0x99)
chroma(255, 51, 153)
chroma([255, 51, 153])你也可以通过将色彩空间的名称作为最后一个参数，构造来自不同色彩空间的颜色。在这里，我们通过传递色调度数（0 ~ 360）、饱和度和亮度的百分比来定义 HSL 中的颜色：
chroma(338, 1, 0.6, 'hsl')你还可以通过传递一个普通的 js 对象来构造颜色，该对象的属性对应于 chroma.js 支持的色彩空间：
chroma({ h: 120, s: 1, l: 0.75 })
chroma({ l: 80, c: 25, h: 200 })
chroma({ c: 1, m: 0.5, y: 0, k: 0.2 })chroma.valid
你可以使用 chroma.valid 来判断是否可以通过 chroma.js 正确解析某个颜色参数。该函数接受一个字符串作为参数，并返回布尔值。
chroma.valid('red') // true
chroma.valid('bread') // false
chroma.valid('#F0000D') // true
chroma.valid('#FOOOOD') // falsechroma.hsl
chroma.hsl(hue, saturation, lightness)
每个色彩空间在 chroma 命名空间下都有自己的构造函数。
chroma.hsl(330, 1, 0.6)chroma.lab
chroma.lab(lightness, a, b)
CIELAB 色彩空间。
chroma.lab(40, -20, 50)
chroma.lab(50, -20, 50)
chroma.lab(80, -20, 50)chroma.oklab
chroma.oklab(lightness, a, b)
OKLAB 色彩空间。
chroma.oklab(0.4, -0.2, 0.5)
chroma.oklab(0.5, -0.2, 0.5)
chroma.oklab(0.8, -0.2, 0.5)chroma.lch
chroma.lch(lightness, chroma, hue)
l 和 c 的范围取决于色调，大致范围在 0 ~ 100 和 0 ~ 150 之间，h 的范围在 0 ~ 360。
chroma.lch(80, 40, 130)
chroma(80, 40, 130, 'lch')chroma.hcl
chroma.lch(hue, lightness, chroma)
你可以使用 hcl 代替 lch。亮度和色相通道被切换为与 HSL 更一致。
chroma.hcl(130, 40, 80)
chroma(130, 40, 80, 'hcl')chroma.oklch
chroma.oklch(lightness, chroma, hue)
chroma.oklch(0.5, 0.2, 240)
chroma(0.8, 0.12, 60, 'oklch')chroma.cmyk
chroma.cmyk(cyan, magenta, yellow, black)
每个值介于 0 ~ 1 之间。
chroma.cmyk(0.2, 0.8, 0, 0)
chroma(0.2, 0.8, 0, 0, 'cmyk')chroma.gl
chroma.gl(red, green, blue, [alpha])
GL 是 RGB(A) 的变体，唯一的区别是每个值的范围在 0 ~ 1 之间。
chroma.gl(0.6, 0, 0.8)
chroma.gl(0.6, 0, 0.8, 0.5)
chroma(0.6, 0, 0.8, 'gl')chroma.temperature
chroma.temperature(K)
从色温可读返回颜色。K 的有效范围在 0 ~ 30000 开尔文左右。
chroma.temperature(2000) // candle light
chroma.temperature(3500) // sunset
chroma.temperature(6500) // daylightchroma.mix
chroma.mix(color1, color2, ratio = 0.5, mode = 'lrgb')
混合两种颜色。混合比是一个介于 0 ~ 1 之间的值，默认为 0.5。
chroma.mix('red', 'blue')
chroma.mix('red', 'blue', 0.25)
chroma.mix('red', 'blue', 0.75)颜色混合会根据色彩空间不同而产生不同的结果，默认的色彩空间为 LRGB。
chroma.mix('red', 'blue', 0.5, 'rgb')
chroma.mix('red', 'blue', 0.5, 'hsl')
chroma.mix('red', 'blue', 0.5, 'lab')
chroma.mix('red', 'blue', 0.5, 'lch')
chroma.mix('red', 'blue', 0.5, 'lrgb')chroma.average
chroma.average(colors, mode='lrgb', weights=[])
类似于 chroma.mix，但接受两种以上的颜色，是 R、G、B 分量和 alpha 通道的简单平均。默认色彩空间为 LRGB。
colors = ['#ddd', 'yellow', 'red', 'teal']
chroma.average(colors) // lrgb
chroma.average(colors, 'rgb')
chroma.average(colors, 'lab')
chroma.average(colors, 'lch')也适用于 alpha 通道。
chroma.average(['red', 'rgba(0, 0, 0, 0.5)']).css()从 2.1 版本开始，你还可以提供一个 weights 数组来计算颜色的加权平均值。
colors = ['#ddd', 'yellow', 'red', 'teal']
chroma.average(colors, 'lch') // unweighted
chroma.average(colors, 'lch', [1, 1, 2, 1])
chroma.average(colors, 'lch', [1.5, 0.5, 1, 2.3])chroma.blend
chroma.blend(color1, color2, mode)
使用 RGB 通道混合函数来混合两种颜色。有效的混合模式有 multiply、darken、lighten、screen、overlay、burn 和 dodge。
chroma.blend('4CBBFC', 'EEEE22', 'multiply')
chroma.blend('4CBBFC', 'EEEE22', 'darken')
chroma.blend('4CBBFC', 'EEEE22', 'lighten')chroma.random
通过生成随机十六进制字符串来创建随机颜色。
chroma.random()
chroma.random()
chroma.random()chroma.contrast
chroma.contrast(color1, color2)
计算两种颜色之间的 WCAG 对比度。建议最低对比度为 4.5:1，以确保文本在背景色下仍可读。
// contrast smaller than 4.5 = too low
chroma.contrast('pink', 'hotpink') // 1.721
// contrast greater than 4.5 = high enough
chroma.contrast('pink', 'purple') // 6.124chroma.distance
chroma.distance(color1, color2, mode='lab')
计算给定色彩空间（默认为 Lab）中两种颜色之间的欧几里得距离。
chroma.distance('#fff', '#ff0', 'rgb') // 255
chroma.distance('#fff', '#f0f', 'rgb') // 255
chroma.distance('#fff', '#ff0') // 96.948
chroma.distance('#fff', '#f0f') // 122.163chroma.deltaE
chroma.deltaE(color1, color2, Kl=1, Kc=1, Kh=1)
计算国际照明委员会（CIE）在 2000 年开发的色彩差异。该实现基于 Bruce Lindbloom 公式。结果值的范围从 0（无差异）到 100（最大差异），是衡量人眼感知色差的指标。可选参数 Kl、Kc 和 Kh 可用于调整亮度、色度和色相的权重。
chroma.deltaE('#ededee', '#ededee') // 0
chroma.deltaE('#ededee', '#edeeed') // 1.321
chroma.deltaE('#ececee', '#eceeec') // 2.602
chroma.deltaE('#e9e9ee', '#e9eee9') // 6.221
chroma.deltaE('#e4e4ee', '#e4eee4') // 11.598
chroma.deltaE('#e0e0ee', '#e0eee0') // 15.391
chroma.deltaE('#000000', '#ffffff') // 100chroma.brewer
chroma.brewer 是 ColorBrewer 规范的映射，为方便起见，它以对象格式包含在 chroma.js 中，该对象的每个属性都返回一个对应颜色数组。。
chroma.brewer.OrRd
// => ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000']Colors of chroma.brewer
chroma.brewer.OrRd
chroma.brewer.PuBu
chroma.brewer.BuPu
chroma.brewer.Oranges
chroma.brewer.BuGn
chroma.brewer.YlOrBr
chroma.brewer.YlGn
chroma.brewer.Reds
chroma.brewer.RdPu
chroma.brewer.Greens
chroma.brewer.YlGnBu
chroma.brewer.Purples
chroma.brewer.GnBu
chroma.brewer.Greys
chroma.brewer.YlOrRd
chroma.brewer.PuRd
chroma.brewer.Blues
chroma.brewer.PuBuGn
chroma.brewer.Viridis
chroma.brewer.Spectral
chroma.brewer.RdYlGn
chroma.brewer.RdBu
chroma.brewer.PiYG
chroma.brewer.PRGn
chroma.brewer.RdYlBu
chroma.brewer.BrBG
chroma.brewer.RdGy
chroma.brewer.PuOr
chroma.brewer.Set2
chroma.brewer.Accent
chroma.brewer.Set1
chroma.brewer.Set3
chroma.brewer.Dark2
chroma.brewer.Paired
chroma.brewer.Pastel2
chroma.brewer.Pastel1