可读设计 · 原创色彩笔记

粉嫩色值的 HEX 与 HSL

理解两种常见屏幕颜色表示,用明确数值描述修改方向。

原创配色图解:主题色、背景色和深色文字色的并列比较;具体色值见图中标注。
配色关系示例;色名是识别标签,图中 HEX 是具体屏幕色值。

HEX 适合传递确定值

六位 HEX 通常以 #RRGGBB 写出 sRGB 的红、绿、蓝通道。例如本文浅粉 #F8DDE6 分别对应十进制 248、221、230。给前端或设计文件交接时,写明具体值比仅给“浅粉”标签更明确。

HSL 适合讨论方向

HSL 用色相、饱和度和明度描述颜色。想比较偏桃或偏紫可以先改色相;想调整鲜艳程度可以比较饱和度。HSL 是 sRGB 的另一种表示方式,其明度值不能直接替代人眼感知明度或无障碍对比度。

一轮有记录的调色

复制一份样稿,固定两项参数,只改一项。把原值、改后值和应用区域一起写在旁边;并排查看实际正文,而非只看拾色器。确定方向后再对文字对比度作独立计算。

不要混淆透明度

半透明粉色叠在不同背景上会出现不同合成结果。若要复用确定的底色,优先记录不透明颜色;若确需透明度,必须连同下层背景一起描述。只抄一个带透明通道的值,不足以重现最终画面。

依据与延伸阅读

上述来源支持文中的技术概念;应用建议与色板是本站原创示例。