前端颜色工具(懂RGB不够，对于制作色盲检测卡高端场景，用这个排版选色准没错)

所有设计工具尤其是开发工具，都带有颜色属性编辑功能，并且都采用选色器组件来选择颜色值。对于 Web 应用来说最简单的选色器（颜色输入组件）就是用<input type="color">标签来实现，不过这个浏览器原生选色器的功能较为简单，尽管它在编辑界面中也支持 rgb、hsl 参数的输入，但只支持 HEX6（即 #rrggbb）格式绑定，若传入值为空或者是具名色，或者是 rgb ()、hsl () 格式，则会在控制台 console 输出警告：

The specified value ""does not conform to the required format. The format is"#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

因此许多先进的工具软件使用的是自研的选色器，以功能强大著称的 VSCode 也使用了自研的选色器，不过仅支持 HEX6/HEX8/RGB/RGBA/HSL/HSLA/HWB/HWBA 等 8 种格式。

我最近在使用 VizForge 可视化设计器软件时，在编辑元件的背景色或前景色的操作中，发现它的选色器能支持 HEX3/HEX6/HEX8/name/RGB/RGBA/HSL/HSLA/HWB/HWBA 等 10 种格式，还带有拾色笔可从屏幕任意位置拾取颜色值。相比网上见过的其它选色器，VizForge 的选色器却做到了更多。

1、HEX6（即 #rrggbb 格式）

这是默认的格式，当从空白颜色值进入选色器时，就是这种格式。#rrggbb 中的 rr 代表红成分的 2 位十六进制值，gg 代表绿成分值，bb 代表蓝成分值。若要改变色盘的色相值，可以拖动上区域右侧的色相带的指针位置，从而改变色盘的色相。可以从色盘中选择颜色，也可以直接在输入框输入，如输入：008000（见图 1 HEX6 格式）。点击 [确定] 按钮，则外面绑定的元件的颜色值就变成选中的颜色值。

2、HEX3（即 #rgb 格式）

当选色器处于 HEX6 格式时，点向上箭头按钮切换到上个格式即 HEX3 格式；此时颜色值转换为 #080；效果保持不变（见图 2 HEX3 格式）。HEX3 中的 rgb 对应 HEX6 的值为 rrggbb （即每位复写成 2 位）。

3、HEX8（即 #rrggbbaa 格式）

当选色器处于 HEX6 格式时，点击向下箭头切换到下一种格式即 HEX8 (多了 Alpha 通道透明值)；此时颜色值转换为 #008000ff；效果保持不变。若要改变透明值，可以拖动上部右二位置的透明带的指针位置，从而改变选中颜色的透明值。此时左区中下位置的预览盘同步显示当前颜色，且能反映透明度的效果（见图 3 HEX8 格式）。透明值有三种表示形式，(1) HEX 形式：00 (全透明)~ff (不透明)；(2) 字节形式：0 (全透明)~255 (不透明)；(3) 浮点形式：0.00 (全透明)~1.00 (不透明)；透明值 (即 Alpha 通道值) 的形式会自动根据当前的颜色值格式自动适配。

4、name（即 具名色格式)

当选色器处于 HEX8 格式时，点击向下箭头切换到下一种格式即 name 格式；此时中间输入栏出现下拉选择框，可直接选择某个名称的颜色；不过具名色与前一步的颜色值和色盘无关（见图 4 name 格式）。若此时点击色盘，则格式立即切换到 HEX6 格式，表示从色盘取色而不是由具名色中选择；中间状态能做到收放自如。

5、HWB（即 hwb (h w% b%) 函数式格式)

当选色器处于 name 格式时，点击向下箭头切换到下一种格式即 HWB 格式；若在 name 格式选中具名色 blue，则此颜色值会传到 HWB 格式中（见图 5 HWB 格式）。若前边选的具名色是 blue（即 #0000ff），则进入 HWB 格式后自动转换成 hwb (240 0% 0%)。这里有必要解释一下，h 代表色相 (hue:0deg~360deg)，w 代表白度 (white: 0% ~ 100%)，b 代表黑度 (black: 0% ~ 100%)；其中的限制是 w+b<=100 。若要了解更多关于 HWB 的知识请问豆包。

这个 VizForge 选色器中的 HWB 格式，其色盘是三角形色盘，是全网独有的色盘模型，其它地方都没见过。在三角形色盘选色时，可以一步快捷选定 W+B 的值，网上其它 HWB 色盘模式通常是由两条 W/B 带组成，要选两次才能选定 W+B 的值，相比之下 VizForge 选色器就强多了，只要一次点选就完成选色，大幅提升选色效率。

6、HWBA（即 hwb (h w% b% /a) 函数式格式)

当选色器处于 HWB 格式时，点击向下箭头切换到下一种格式即 HWBA 格式；或者在处于 HWB 格式时调整透明度 < 1 时，立即切换成 HWBA 格式（见图 6 HWBA 格式）。

这个格式多了 a 通道值 (采用浮点格式，范围是 0.00 ~ 1.00)；它的函数式是在 hwb () 的基础上多加了 “/a" 参数。注意：HWBA 格式的函数名仍是 hwb。若此时调整透明带的值变成 1（最顶端位置），则格式立即变成 HWB。HWB 与 HWBA 的切换通过透明值触发，能做到顺滑自洽。

7、RGB（即 rgb (r,g,b) 函数式格式)

当选色器处于 HWBA 格式时，点击向下箭头切换到下一种格式即 RGB 格式（见图 7 RGB 格式）。rgb (r,g,b) 里的参数；r 代表红色成分值 (范围：0~255)，g 代表绿色成分值 (范围：0~255)，b 代表蓝色成分值 (范围：0~255)。

8、RGBA（即 rgba (r,g,b,a) 函数式格式)

当选色器处于 RGB 格式时，点击向下箭头切换到下一种格式即 RGBA 格式；或者在处于 RGB 格式时调整透明度 < 1 时，立即切换成 RGBA 格式（见图 8 RGBA 格式）。rgba (r,g,b,a) 里的参数；a 代表透明值 (范围：0.00~1.00)；其它参数同 rgb (r,g,b)。

9、HSL（即 hsl (h,s%,l%) 函数式格式)

当选色器处于 RGBA 格式时，点击向下箭头切换到下一种格式即 HSL 格式（见图 9 HSL 格式）。hsl (h,s%,l%) 里的参数；h 代表色相值 (范围：0~360 deg)，s 代表饱和度值 (范围：0 ~100 %)，l 代表明度值 (范围：0%~100%)。

10、HSLA（即 hsla (h,s%,l%,a) 函数式格式)

当选色器处于 HSL 格式时，点击向下箭头切换到下一种格式即 HSLA 格式；或者在处于 HSL 格式时调整透明度 < 1 时，立即切换成 HSLA 格式（见图 10 HSLA 格式）。hsla (h,s%,l%,a) 里的参数；a 代表透明值 (范围：0.00~1.00)；其它参数同 hsl (h,s%,l%)。

以上所有格式，同模式中带a的和不带a的格式，都能通过透明度的调整顺滑切换；当透明度调到1则变成不带a格式，而透明度调到小于1则变成带a格式。

VizForge 选色器在界面的下方区域，显示了绑定的原值、新值；右边显示当前选中值的简明值 (#hex 或 具名)，也是颜色属性的绑定值。

在 CSS 中，比较符合习惯且简洁的颜色值是 #hex 形式字面量 或 具名色字面量；如：#0000ff, blue;

语法上 css 的颜色值还可以填入函数式字面量，如：rgb(0,0,255), rgba(0,0,255,0.75),hsl(240,100%,50%),hsla(240,100%,50%,0.75),hwb(240 0% 0%),hwb(240 0% 0%),hwb(240 0% 0% /0.75); //注意:与hsl, rgb对比，hwb是很特别的，参数之间是空格而不是逗号！

但这个选色器绑定的颜色属性采纳简明值；如果我们要使用函数式字面量，可以从 “新值” 中复制出来粘贴到代码中。

VizForge 选色器的颜色值中，字节值为整数，百分比值的精度是 0.1，浮点值 (透明度) 的精度是 0.01；这个精度已经是比较高的且是合理的。这个选色器具有高度的逻辑自洽性，格式切换也是无缝衔接，算是顶尖的组件之一。VizForge 可视化设计器还有许多亮点，这款选色器只是 VizForge 提升开发效率的一个缩影。对于一些高要求场合，如制作色盲检测卡辨色力卡等，需要准确配制色相、明度、饱和度，则要用hsl格式；而要快速确定亮暗的程度则要用hwb格式；总之用这个VizForge 排版选色毫无压力。

#前端开发# #前端开发工具# #可视化设计器# #选色器# #rgb颜色格式# #hsl颜色格式# #hwb颜色格式# #色盲检测卡# #辨色力卡#