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 键入,改任一端,其余端同步。
  • 接受常见合法变体,错误时指出哪一段解失败,不要整框标红。
  • 切换模型时保持视觉上的同一色,并在有舍入时用预览而不是抖值来表达。
  • 验证:粘贴 #1a73e81A73E8rgb(26, 115, 232)。三者应落到同一预览;再改 L,HEX 必须跟着变。

延伸

  • 同组E3.15.1 颜色选择器需同时支持预设色板与自定义取值 · E3.15.3 取色结果需要以色块方式即时预览 · E3.15.4 颜色选择不能替代对比度等可访问性校验
  • 相邻E2.07 输入掩码 · E2.19 货币、单位与量纲输入
  • 站内检索hex color · HSL RGB conversion · color input

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.15.2