使用工具
现在显示 9月18日 作为示例。选择日期可查看其他颜色。
Pine Conscience · #356544
伙伴色
浅色调
深色调
| 配对 | 对比度 | 等级 |
|---|---|---|
| 深色文字在颜色上 | 2.76:1 | 未达 AA |
| 米白文字在颜色上 | 6.78:1 | AA |
| 颜色作为文字在其最浅色调上 | 4.00:1 | AA（大字号） |
| 最深色调作为文字在最浅色调上 | 8.43:1 | AAA |
日期给的是一个色相，不是一套配色
每一天有一种颜色，这种颜色有色相、饱和度和明度。配色是你决定移动三者中的哪一个、保留哪一个时建立起来的。下方工具对日期的色值做算术：按经典配色角度旋转色相，沿着明度走向浅色调和深色调，在降低饱和度时保持色相不变。
这些角度不是口味问题。互补是色轮上的 180 度，分裂互补是 150 度和 210 度，三角是 120 度和 240 度，类似是减 30 度和加 30 度。设计师争论的是该用哪一种，而不是算术本身。工具打印的每个值，你都可以把色值转成 HSL、自己做同样的旋转来验证。
四种伙伴，各自适合什么
互补色对是最响亮的选项：两个色相彼此相对，分离最大。它适合海报、运动队、一个必须从房间另一头看见的强调色，不适合两个颜色争抢注意力的长文档。
分裂互补取相对点两侧的两个色相。它保留了大部分对比，去掉了振动感，因此是网站或房间更安全的选择。三角配色给出三个等距色相，活泼但难平衡，通常需要让其中一个变成安静的角色。类似色保持在 60 度以内，读起来像一家人，所以适合室内、织物和任何应该显得平静的东西。
浅色调、深色调和灰化版本
配色还会把颜色推向本站的纸色和最深的墨色。四个更亮的台阶是浅色调，四个更暗的台阶是深色调，灰化版本保持色相、降低饱和度。浅色调不是换了一个名字的另一种颜色，而是同一个色相少一点颜料，这正好是你放在原色背后当背景时需要的东西。
明度是大多数配色失败的地方。深海军蓝和近白色都可以叫蓝色，但它们不能互换角色：在一种颜色上可读的文字，在另一种上会消失。工具打印四组真实配对的实测对比度，而不是声称这套配色可访问。
先查对比度，再谈感觉
WCAG 2.1 规定正文 4.5:1、大字号（18pt，或 14pt 粗体）3:1、界面组件的可见部分 3:1。7:1 是增强级 AAA。这些数字是相对亮度的比值，不是意见，日期页会用真实色值计算它们。
实际顺序是：从日期选基底色，为任务选一个伙伴，然后测试你打算使用的文字配对。如果比值不达标，通常的修法是把文字移到最深的色调或纸色表面上，而不是放弃整套配色。一个在 12px 时不合格的颜色，在 28px 粗体时可能合格；阈值取决于你实际设置的尺寸。
一个具体任务：卡片、房间、屏幕
拿一张生日卡、一个房间和一块仪表盘，都从 Pine Conscience 开始。卡片上，绿色可以做背景，浅色调做放文字的底板，最深色调做文字。房间上，绿色放在一面墙或一块织物上，中性色放在更大的表面，强调色留给一个小而重复的物件。仪表盘上，绿色是页头或图表系列，表面是近中性色，强调色标记唯一的行动。同一个色值，三种角色分配。
差别不是装饰。卡片在手臂距离、未知光线下阅读；房间从远处看，随日光变化；屏幕自己发光，常常被看几分钟。配色给出候选，媒介决定哪个候选获得最大面积。
工具的边界：HSL 不是感知均匀空间
工具在 HSL 里旋转色相。HSL 是方便的模型，不是感知均匀的模型。两个 HSL 明度相同的颜色，看起来可能亮度不同；180 度旋转也可能改变表观饱和度。数值是精确、可复现的，但“和谐”仍然是你看着它做出的判断。OKLCH 或 CIELAB 这类感知空间会更均匀地分配亮度；本站不声称使用它们，工具也不应被当作色彩科学权威。
所以把工具当成第一稿，而不是最终答案。它擅长快速给出可检查的候选值；是否适合你的纸张、房间或品牌，需要在真实媒介里看。
常见问题
工具怎样选互补色？
它把日期的色值转成 HSL，把色相加 180 度，再转回来。分裂互补用 150 和 210 度，三角用 120 和 240 度，类似色用减 30 和加 30 度。
浅色调和深色调只是更亮和更暗的版本吗？
它们是同一个色相混向本站的纸色或最深的墨色，所以效果上是的；但工具打印精确色值，对比度表会显示哪些颜色可以承载文字。
这些配色可以商用吗？
十六进制色值本身不受版权保护，所以颜色可以用。颜色名称和解读属于本站；取走色值，不要取走文案。