颜色指南
关于屏幕色彩的简短实用指南：颜色格式、对比度、配色、深色模式和 CSS。每个数字都经过计算，每个示例都可以直接复制。
- OKLCH 详解：终于和人眼感知一致的颜色格式OKLCH 用三个维度描述颜色：看起来有多亮、有多鲜艳、属于哪个色相。和 HSL 不同，同一个亮度值在任何色相下看起来都一样亮，所以调色板、悬停状态和无障碍对比度都变得可预测。2026年9月28日阅读约 1 分钟
- APCA 与 WCAG 2：该信哪种对比度检测WCAG 2 对比度比值是法律要求的标准。APCA 是更新的模型，对可读性的预测准确得多，尤其是深色主题和高饱和度颜色。两者都检查，文字才能既合规又真正易读。2026年9月28日阅读约 1 分钟
- 色域详解：sRGB、Display P3 与超出色域的颜色色域是屏幕或色彩空间能显示的颜色范围。Web 最初建立在 sRGB 之上，但如今大多数手机和不少笔记本都支持 Display P3，它的红色、绿色和橙色明显更鲜艳。2026年9月28日阅读约 1 分钟
- 颜色格式详解：HEX、RGB、HSL、OKLCH 等同一个颜色可以有十几种写法。本文介绍每种格式的含义和适用场景，并展示同一个颜色在各种格式下的写法。2026年9月28日阅读约 1 分钟
- 十六进制颜色代码详解：#RRGGBB 是怎么回事像 #1e90ff 这样的十六进制颜色代码由三组十六进制数组成，分别表示红、绿、蓝三种光的强度，每组从 00（没有）到 ff（全满，即 255）。再加第四组就能设置不透明度：80 约等于 50%，ff 表示完全不透明。2026年9月28日阅读约 1 分钟
- 如何为网站或 App 选择配色方案从一个品牌色出发，生成 50 到 950 的色阶，再加上略带色调的灰色和四种语义色，然后逐一检查每组文字与背景的对比度和色盲可辨性。选择色阶要看 OKLCH 亮度，而不是凭感觉：在白色背景上，只要亮度降到 0.55 左右，文字就能通过 WCAG AA，无论色相如何。2026年9月28日阅读约 1 分钟
- 深色模式配色：如何选择背景色、文字色和强调色背景用 #121212 这样的深灰而不是纯黑，文字用 #e5e5e5 这样的米白而不是纯白，品牌色换成更亮、饱和度更低的版本。检查文字对比度时，除了 WCAG 2 也要看 APCA，因为 WCAG 2 会高估深色背景上的对比度。2026年9月28日阅读约 1 分钟
- 色彩搭配原理：互补色、类似色、三角色等配色方案配色方案就是在色轮上按固定角度选取色相：互补色相差 180°，类似色相差 30°，三角色相差 120°。用 OKLCH 而不是 HSL 旋转色相，各颜色的亮度就能保持一致，不会有某个色相意外地跳出来。2026年9月28日阅读约 1 分钟
- CSS color-mix() 与相对颜色语法：浅色变体、悬停色和透明度color-mix() 在你指定的颜色空间里混合两个颜色；相对颜色语法则能修改现有颜色的某一个通道，比如 oklch(from var(--brand) calc(l - 0.1) c h)。两者都在浏览器中计算，支持 CSS 变量，可以取代大多数 Sass 颜色函数。做浅色变体和悬停色时用 oklab 混合，做透明度时用 srgb。2026年9月28日阅读约 2 分钟
- 色盲友好配色：如何检查和修正你的颜色色盲友好的调色板要保证任意两种颜色在红色盲、绿色盲、蓝色盲和灰度下都能分清。最可靠的办法不是选某个特殊色相，而是拉开亮度差：在我们做的所有模拟中，OKLCH 亮度相差约 0.2 的颜色始终能区分开。再配上图标或文字标签，因为只靠颜色总会让一部分人看不懂。2026年9月28日阅读约 1 分钟
- Tailwind CSS 颜色：v4 的 OKLCH 调色板、自定义颜色和色阶Tailwind CSS v4 自带 26 组色阶，每组 11 级，从 50 到 950，共 286 种颜色，全部用 OKLCH 定义为 --color-blue-500 这样的 CSS 变量。添加自己的颜色只需写 @theme { --color-brand-500: oklch(...) }。同样的级数并不代表同样的亮度：blue-600 是在白底上达到 4.5:1 的最浅蓝色，而黄色要到 700 才行。2026年9月28日阅读约 2 分钟