README
@tinyfe/colors
TODO: description
Usage
方法
import { isColor, isHex, isRgb, isRgba, isHsl, isHsla, isHsv, isHsva } from '@tinyfe/colors';
isColor('#00bfff'); // true
isColor('#rain120'); // false
isHex('#00bfff'); // true
isRgb('rgb(0, 191, 255)'); // true
isRgba('rgba(0, 191, 255, 1)'); // true
isHsl('hsl(195, 100%, 50%)'); // true
isHsla('hsla(195, 100%, 50%, 100%)'); // true
isHsv('hsv(195, 100%, 50%)'); // true
isHsva('hsva(195, 100%, 50%, 100%)'); // true
实例方法
import awesomeColor from '@tinyfe/colors';
const color = awesomeColor('#00bfff');
color.isHex(); // true
color.getAlpha(); // 1
color.getFormat(); // hex
color.getColorKeyword(); // deepskyblue
color.toRgbString(); // rgb(0, 191, 255)
color.toPercentageRgbString(); // rgb(0%, 75%, 100%)
color.toHslString(); // hsl(195, 100%, 50%)
color.toHsv(); // { a: 1, h: 195.05882352941174, s: 1, v: 1 }
color.toHsvString(); // hsv(195, 100%, 100%)
awesomeColor('#012345').isDark(); // true
Color Convert Algorithm
RGB to HSL
我们知道 HSL 颜色三元素如下:
色相(
Hue): 色彩的基本属性, 单位是角度(deg), 取值范围是 [0°, 360°]。关于更多色相角度 Here$h = \operatorname{atan} 2(\sqrt{3} \cdot(g - b), 2 \cdot r - g - b)$
function getHue(r: number, g: number, b: number): number { const deg = Math.round((Math.atan2(Math.sqrt(3) * (g - b), 2 * r - g - b) * 180) / Math.PI); const angel = deg >= 0 ? deg : 360 + deg; return angel; }$ h=\left{\begin{array}{ll} 0^{\circ} & \text { if } \max =\min \ 60^{\circ} \times \frac{g-b}{\max -\min }+0^{\circ}, & \text { if } \max =r \text { and } g \geq b \ 60^{\circ} \times \frac{g-b}{\max -\min }+360^{\circ}, & \text { if } \max =r \text { and } g<b \ 60^{\circ} \times \frac{b-r}{\max -\min }+120^{\circ}, & \text { if } \max =g \ 60^{\circ} \times \frac{r-g}{\max -\min }+240^{\circ}, & \text { if } \max =b \end{array}\right. $
饱和度(
Saturation): 指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值范围是 [0, 100%]。$ s=\left{\begin{array}{ll} 0 & \text { if } l=0 \text { or } \max =\min \ \frac{\max -\min }{\max +\min }=\frac{\max -\min }{2 l}, & \text { if } 0<l \leq \frac{1}{2} \ \frac{\max -\min }{2-(\max +\min )}=\frac{\max -\min }{2-2 l}, & \text { if } l>\frac{1}{2} \end{array}\right. $
亮度(
Lightness): 色彩的明暗程度，值越高，月白，直到变成白色，反之变成黑色。该值优先级最高，可以直接影响前两者。取值范围是 [0, 100%]。$L = \frac{1}{2}(max + min)$
Note: max 是 RGB 值的最大值，min 是最小值
HSV to RGB
给定 HSL 空间中的 (h, s, l) 值定义的一个颜色，带有 h 在指示色相角度的值域 [0°, 360°] 中，分别表示饱和度和亮度的 s 和 l 在值域 [0, 1] 中，相应在 RGB 空间中的 (r, g, b) 三原色，带有分别对应于红色、绿色和蓝色的 r, g 和 b 也在值域 [0, 1] 中，它们可计算为：
首先，如果 s = 0，则结果的颜色是非彩色的、或灰色的。在这个特殊情况，r, g 和 b 都等于 l。注意 h 的值在这种情况下是未定义的。
当 s ≠ 0 的时候，可以使用下列过程
$ \begin{aligned} &q=\left{\begin{array}{ll} l \times(1+s), & \text { if } l<\frac{1}{2} \ l+s-(l \times s), & \text { if } l \geq \frac{1}{2} \end{array}\right.\ &p=2 \times l-q\ &h_{k}=\frac{h}{360}(h \text { 规范化到值域 }[0,1) \text { 内 })\ &t_{R}=h_{k}+\frac{1}{3}\ &t_{G}=h_{k}\ &t_{B}=h_{k}-\frac{1}{3}\ &\text { if } t_{C}<0 \rightarrow t_{C}=t_{C}+1.0 \text { for each } C \in{R, G, B}\ &\text { if } t_{C}>1 \rightarrow t_{C}=t_{C}-1.0 \quad \text { for each } C \in{R, G, B} \end{aligned} $
对于每个颜色向量 Color = (ColorR, ColorG, ColorB) = (r, g, b),
$ \begin{array}{l} \text { Color }{C}=\left{\begin{array}{ll} p+\left((q-p) \times 6 \times t{C}\right), & \text { if } t_{C}<\frac{1}{6} \ q, & \text { if } \frac{1}{6} \leq t_{C}<\frac{1}{2} \ p+\left((q-p) \times 6 \times\left(\frac{2}{3}-t_{C}\right)\right), & \text { if } \frac{1}{2} \leq t_{C}<\frac{2}{3} \ p, & \text { otherwise } \end{array}\right. \ \text { for each } C \in{R, G, B} \end{array} $
RGB to HSV
我们知道 HSL 颜色三元素如下:
色相(
Hue): 色彩的基本属性, 单位是角度(deg), 取值范围是 [0°, 360°]。关于更多色相角度 Here$ h=\left{\begin{array}{ll} 0^{\circ} & \text { if } \max =\min \ 60^{\circ} \times \frac{g-b}{\max -\min }+0^{\circ}, & \text { if } \max =r \text { and } g \geq b \ 60^{\circ} \times \frac{g-b}{\max -\min }+360^{\circ}, & \text { if } \max =r \text { and } g<b \ 60^{\circ} \times \frac{b-r}{\max -\min }+120^{\circ}, & \text { if } \max =g \ 60^{\circ} \times \frac{r-g}{\max -\min }+240^{\circ}, & \text { if } \max =b \end{array}\right. $
饱和度(
Saturation): 指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值范围是 [0, 100%]。$ s=\left{\begin{array}{ll} 0, & \text { if } \max =0 \ \frac{\max -\min }{\max }=1-\frac{\min }{\max }, & \text { otherwise } \end{array}\right. $
亮度(
Value): 取值范围是 [0, 100%]。$ v= max $
HSV to RGB
给定在 HSV 中 (h, s, v) 值定义的一个颜色，带有如上的 h, 和分别表示饱和度和明度的 s 和 v 变化于 0 到 1 之间，在 RGB 空间中对应的 (r, g, b)三原色可以计算为 (R, G, B 变化于 0 到 1 之间):
$ \begin{array}{l} h_{i} \equiv\left[\frac{h}{60}\right\rfloor \quad(\bmod 6) \ f=\frac{h}{60}-h_{i} \ p=v \times(1-s) \ q=v \times(1-f \times s) \ t=v \times(1-(1-f) \times s) \end{array} $
对于每个颜色向量 (r, g, b) .
$ (r, g, b)=\left{\begin{array}{ll} (v, t, p), & \text { if } h_{i}=0 \ (q, v, p), & \text { if } h_{i}=1 \ (p, v, t), & \text { if } h_{i}=2 \ (p, q, v), & \text { if } h_{i}=3 \ (t, p, v), & \text { if } h_{i}=4 \ (v, p, q), & \text { if } h_{i}=5 \end{array}\right. $
常见的色相角度
export const baseHues = {
// name: hug, // color_code color_name luminance(亮度/明度)
red: 0, // #FF0000 red 30%
'orange-red': 15, // #FF4000 vermilion orange 45%
orange: 30, // #FF8000 orange 59%
khaki: 45, // #FFBF00 golden yellow 74%
yellow: 60, // #FFFF00 yellow (web color)=lemon yellow 89%
lime: 75, // #BFFF00 yellowish green 81%
olive: 90, // #80FF00 yellowish green, chartreuse 74%
'grass-green': 105, // #40FF00 leaf green 66%
green: 120, // #00FF00 green 59%
'bluish-green': 135, // #00FF40 cobalt green 62%
teal: 150, // #00FF80 emerald green 64%
'greenish-cyan': 165, // #00FFBF turquoise green, bluish green 67%
cyan: 180, // #00FFFF turquoise blue, cyan (web color) 70%
'bluish-cyan': 195, // #00BFFF cerulean blue 55%
blue: 210, // #0080FF azure 41%
'blue-violet': 225, // #0040FF blue, cobalt blue 26%
violet: 240, // #0000FF blue (web color)=ultramarine 11%
'purple-violet': 255, // #4000FF hyacinth 19%
purple: 270, // #8000FF violet 26%
magenta: 285, // #BF00FF purple purple 34%
'purple-magenta': 300, // #FF00FF magenta (web color) 41%
crimson: 315, // #FF00BF reddish purple 38%
scarlet: 330, // #FF0080 ruby red, crimson 36%
'scarlet-red': 345, // #FF0040 carmine 33%
};