色相
Hue颜色的“相貌”——红、橙、黄、绿……在色环上按角度分布(0° 红、120° 绿、240° 蓝)。日常说的“什么颜色”就是色相。
从色相到 CIEDE2000——设计协作中最容易被混用的色彩概念,一张表讲清楚。每个术语都链向对应的工具,看完就能上手验。
颜色的“相貌”——红、橙、黄、绿……在色环上按角度分布(0° 红、120° 绿、240° 蓝)。日常说的“什么颜色”就是色相。
颜色的明暗程度,从纯黑到纯白。同一色相加白变亮、加黑变暗;明度是可读性与对比度的决定因素。
颜色的“浓度”——0% 是灰色,100% 是纯色。高饱和抓眼球但也更刺眼,UI 里通常只给关键动作留高饱和。
纯色加白是 Tint(浅色调)、加黑是 Shade(暗色调)、加灰是 Tone(灰调)。品牌色阶系统就是一套可控的 Tint/Shade 序列。
以开尔文描述光色的冷暖:低 K 偏橙黄(暖),高 K 偏蓝(冷)。屏幕的“暖色模式”就是降低色温。
前景与背景的亮度之比,1:1 到 21:1。WCAG 要求正文 ≥ 4.5:1、大字 ≥ 3:1——这是无障碍的硬门槛。
WCAG 3 的候选对比度算法,考虑文字大小、字重与极性,对深色模式和低对比文字的判定比 WCAG 2.1 更接近真实可读性。
一套定义颜色的坐标系。sRGB 是网页默认,Display P3 覆盖更广,OKLCH 按人眼感知组织颜色。
某个设备或空间能显示的全部颜色范围。高饱和的荧光色常在 sRGB 色域之外——屏幕只能显示它的最近似值。
#RRGGBB 六位十六进制记法,24 位色(约 1677 万色)是网页的颜色空间本身。
红绿蓝三通道加色模型,每个通道 0-255。屏幕发光的物理方式决定了它是数字世界的原生模型。
青品黄黑四色减色模型,印刷的通用语言。屏幕 RGB 转 CMYK 只是理论近似,大货印刷请对照实体色卡。
色相/饱和度/明度圆柱坐标,比 RGB 直觉。缺点是“感知不均匀”:同样 50% 明度,黄色看起来远比蓝色亮。
新一代感知均匀色彩空间:同明度值就是同视觉明度,插值不发灰,是设计系统色阶的新标准。CSS 原生支持 oklch()。
数值变化与人眼感受成正比的特性。在感知均匀的空间里,色值差 10 就是看起来差一样多——CIEDE2000 和 OKLCH 都建立在这之上。
国际照明委员会的色差公式,ΔE 值表示两个颜色的人眼感知差距:ΔE < 1 几乎不可分辨,< 5 是“同一个色”,> 10 明显不同。
全球通行的专色配色系统,印刷与时尚行业的“色值普通话”。每个色号有独立油墨配方,屏幕显示只是模拟。
德国国家标准色卡,工业涂料与粉末喷涂的行业基准,如 RAL 3020 交通红。
瑞典自然色彩系统,用“黑度-彩度-色相”描述颜色,建筑与室内设计常用。
以色相 H、明度 V、彩度 C 三个维度组织的百年色彩体系,至今仍是土壤、农产品分级的官方标准。
让色觉缺陷用户(男性约 8%)也能正常使用的配色:不只靠颜色编码、保证对比度、用色觉模拟验证。
按用途而非色相命名的颜色:primary/success/warning/danger。语义化让换肤和暗色模式成为可能。
品牌或界面中最具辨识度的颜色,承载主要动作与强调。通常只占界面 10% 以内,大面积使用会稀释它的号召力。
在主色之外制造对比点睛的颜色,用量极小(<5%)但饱和度或色相反差极大——通知红点、CTA 按钮。
灰阶系统:背景、分割线、正文、辅助文字全靠它分层。中性色的冷暖倾向(偏暖灰/冷灰)决定整个界面的气质。
品牌色按明度展开的 11 档序列(50-950),设计系统的标配。色阶保证暗色模式、hover、边框都有“同族”色可用。
色环上相隔 180° 的两色(红绿、蓝橙)。并置时相互强化,适合强调,但 1:1 使用会互相打架。
色环上相邻的 2-4 个色(蓝-蓝绿-绿)。和谐安全但缺乏张力,加一个补色点睛即可破局。