E3.15.2hex and color model conversion设计
数值输入应支持十六进制与常见色彩模型互转
别名: HEX 输入 · RGB HSV · 色值互转
概念解释
除了点色板和拖滑条,选择器还要能键入数值,并且在十六进制与常见模型(RGB、HSL / HSV,有时还有 CMYK 或 Lab)之间互转。设计师从规范抄 #1A73E8,开发从代码抄 rgb(26, 115, 232),印刷稿给出 CMYK——同一颜色,入口不同。只收一种写法,等于只服务一种工种。互转必须是同一内部色的不同读数,而不是各写各的、对不上的三份字段。
机制
颜色在机器里是一组通道。人使用的记号却是好几套:十六进制把 RGB 压成字符串,HSL 把同一点说成色相/饱和/亮度,便于调「更亮一点」。互转让人在自己熟的记号里工作,同时让其他记号保持同步。不同步时,改 H 滑条、HEX 还停在旧值,用户不知道哪一份会提交,会反复贴值来「校准」。
解析还要容忍合法变体:#abc 与 #AABBCC、有无 #、大小写、带 alpha 的 8 位 HEX。拒掉这些变体,键入通道就会把从别处复制来的合法色判成错误。模型之间的转换有精度损耗(尤其经过 CMYK 或宽色域),界面应承认舍入,而不是每次切换模型都抖到另一个可觉差。
边界
终端用户从不键入色值时,数值区可以收起,但不要删掉到完全无法粘贴——偶发的品牌色仍靠粘贴。不支持透明的场景应拒绝带 alpha 的值并说清,而不是默默丢掉第四通道。色域外的值(Display P 的色塞进 sRGB 控件)需要裁切提示,互转不是「总能完美还原」。无障碍上,键入框要有名字(「十六进制」「红色通道」),不能只靠旁边未关联的缩写字母。
怎么落地
- 提供 HEX 与至少一种 RGB / HSL 键入,改任一端,其余端同步。
- 接受常见合法变体,错误时指出哪一段解失败,不要整框标红。
- 切换模型时保持视觉上的同一色,并在有舍入时用预览而不是抖值来表达。
- 验证:粘贴
#1a73e8、1A73E8、rgb(26, 115, 232)。三者应落到同一预览;再改 L,HEX 必须跟着变。