色彩知识

一、什么是色彩空间

色彩空间（Color Space）是描述和重现颜色的数学模型。RGB 是最常用的加色模型：用红、绿、蓝三原色按不同强度叠加得到各种颜色。但同一组 RGB 数值在不同设备上看起来可能不同，因为设备能显示的色彩范围不同。常见的色彩空间有 sRGB、Display P3、Adobe RGB、DCI-P3 等，它们规定了「颜色坐标」与「可显示范围」。

二、色域是什么

色域（Gamut）指一个设备、文件或标准所能呈现的色彩范围，通常用 CIE 1931 色度图上的面积来表示。人眼可见的色彩范围极广，而 sRGB 仅覆盖其中约 35%。广色域屏幕（如覆盖 Display P3 或 Adobe RGB）能显示更鲜艳、更接近真实的颜色，尤其体现在高饱和的红、绿、橙上。

sRGB ≈ 35% 人眼可见色彩 · Display P3 ≈ 45% · Adobe RGB ≈ 50% · NTSC 92% ≈ 100% sRGB

三、色彩准确度（色准）

色准指屏幕显示的颜色与标准颜色的偏差，常用 ΔE（Delta-E）衡量：ΔE≤2 时人眼几乎无法分辨偏差，属于专业级；2<ΔE≤5 为轻微偏差；ΔE>5 偏差明显。影响色准的因素包括面板类型、出厂校准、色温漂移和观看角度。软件自检（如本站的 24 色标准色卡）只能做粗略对照，精确校色需硬件校色仪。

四、色温与白点

白点（White Point）描述「白色」的冷暖倾向，用开尔文（K）表示。6500K（D65）是多数屏幕与网络内容的标准白点，偏冷；5000K 偏暖（偏黄）。同一张图在不同白点下整体观感不同，对比屏幕时务必统一亮度与色温。系统夜览 / 护眼模式会改变白点，应在关闭状态下检测。

五、如何检测显示器色彩准确度

可用本站的「显示器检测」页：查看分辨率与 DPR 是否正常、进入纯色全屏检查坏点、用灰阶渐变观察是否断层（banding）、并用 24 色标准色卡与其他设备并排对照。若需要印刷或修图级准确度，建议使用校色仪（如 Spyder、Calibrite）生成 ICC 配置文件。

六、配色理论速览

基础配色法包括：单色（同色不同明度/饱和度）、类似色（色环相邻）、互补色（色环相对，对比强）、三角/分裂互补（三种均衡）。冷色显远、暖色显近；高明度显轻、低明度显重。无障碍配色应保证相邻色块明度差 ≥ 30%，并避免红绿直接搭配。

七、无障碍与对比度（WCAG）

网页可读性由「文字与背景的对比度」决定，数值越高越清晰。W3C 的 WCAG 2.1 规定：正文需 ≥ 4.5:1（AA）或 ≥ 7:1（AAA）；大号文字（18pt 以上或 14pt 粗体）需 ≥ 3:1；图形界面元素（按钮边框、图标）至少 ≥ 3:1。可用本站「对比度检测」实时校验，并优先保证主文本与关键操作达标。

八、颜色的情绪与文化

颜色会传递情绪与文化含义：红色常代表热情、警示（也常见于节日与喜庆）；蓝色代表专业、冷静与信任，是科技与金融的常用色；绿色代表自然、健康与通行；黄色代表活力、警示与价格。跨文化时含义可能相反（如白色在部分东方语境代表丧事），面向国际用户的项目应先确认配色语义。

九、明色与暗色模式

同一套配色在浅色与深色背景上观感不同：在暗底上应使用更亮、饱和度略低的主色，避免高亮纯色刺眼；在亮底上则可更鲜艳。设计深色模式不要简单把颜色「反转」，而应重新设定层级（背景、卡片、文字的明度梯度）。本站支持一键切换主题，便于你预览同一配色在两种模式下的表现。

十、该用哪种颜色格式

HEX 简洁、适合手写与 CSS；RGB 直观、便于按通道运算；HSL/HSV 方便按「色相/明暗」调色；CMYK 面向印刷（屏幕 RGB 转 CMYK 会偏暗）；LAB/LCH 与人眼感知更一致，适合做色差与渐变。一般网页用 HEX/RGB，设计系统常用 HSL 变量，本站「颜色转换」支持以上全部格式互转。

十一、OKLCH：感知均匀的新色彩空间

HSL 的「相同明度」在视觉上并不均匀：同样 50% 明度的黄色看起来比蓝色亮得多。OKLCH（基于 OKLab）重新设计了坐标，让数值变化与感知变化一致——同 L 值的所有颜色看起来一样亮，同 C 值的颜色看起来一样鲜艳。它已被 CSS Color Level 4 收录（oklch()/oklab() 可直接写进样式表），也是现代设计工具生成色阶的首选空间。本站色轮与色阶工具均提供 OKLCH 模式，可直观对比两种空间的差异。

十二、APCA：对比度的下一代算法

WCAG 2.1 的对比度比值（如 4.5:1）是 1960 年代实验的简化产物：它把黑字白底算成 21:1，却无法解释「深底浅字与浅底深字可读性不同」这一事实。APCA（Accessible Perceptual Contrast Algorithm）是 WCAG 3 草案的替代方案，输出 Lc 值（约 0–108），按极性区分浅底/深底，并按人眼对字号、字重的敏感度给出分档建议：正文 ≥ 75、大文字 ≥ 60、UI 组件 ≥ 45。本站「对比度检测」与「配色审计」均同时给出 WCAG 与 APCA 两种判定。

十三、混合模式：像设计软件一样叠色

正片叠底（Multiply）让颜色变暗、滤色（Screen）变亮、叠加（Overlay）增强对比——这些来自 W3C Compositing & Blending 标准，与 Photoshop 图层混合一致。做品牌延展色时，用「主色 × 背景」预测叠加效果非常实用。注意直接在 RGB 上平均两色会发灰发暗，线性光空间插值（本站混色器默认）能保住饱和度、更接近真实光叠加。

延伸阅读

• 本站的配色生成器、对比度检测、色盲模拟等工具可配合本文实践。
• 相关标准：sRGB (IEC 61966-2-1)、Display P3 (Apple)、Adobe RGB (1998)、WCAG 2.1、CIE 1931 色度图。