色彩学院
别背结论，自己动手"看见"颜色之间的关系。切换右侧教学视角，点一点这颗 12 色相色轮，建立配色的空间直觉。
三步上手
- 1选视角：在右侧点「总览 / 原色 / 二次色 / 互补色 / HSL / 冷暖 / 对比度」，色轮会随之高亮。
- 2动手验证：按面板提示点击或悬停色块，亲眼看到混合、互补、明度阶梯与对比度评级的变化。
- 3去实践：用每个视角底部的深链，跳到对应工具把原理变成能用的配色方案。
点击色轮
切换右侧视角开始探索
色轮上颜色是按什么顺序排列的？
原色红 · 黄 · 蓝（不可再分）
二次色橙 · 绿 · 紫（两原色混合）
过渡色相邻色相之间的渐变
交互高亮当前选中 / 互补连线
一句话记住色彩关系
- 原色（3）：红、黄、蓝——无法由其他颜色混合，在色轮上呈等边三角形（每两色相距 120°）。
- 二次色（3）：橙、绿、紫——任意两原色等量混合得到（红+黄=橙，黄+蓝=绿，蓝+红=紫）。
- 互补色：色轮上正对面 180° 的一对（红↔绿、蓝↔橙、黄↔紫），并置对比最强、多为"一暖一冷"。
- HSL 三要素：色相 H 决定"是什么颜色"，饱和度 S 决定"多鲜艳"，明度 L 决定"多亮"；固定 H 调 L 就是明度阶梯。
- 冷暖与对比度：红橙黄偏暖、绿蓝紫偏冷；好看之外还要"看得清"——正文对比度至少 4.5:1。
色彩知识小测
边学边测，答错会给出讲解。共 8 题。
我不会画画，能学会配色吗？
能。配色靠的是理解"色相之间的关系"，而不是天赋。先用本页色轮建立直觉——互补要对比、类似要和谐——再用工具把选中的颜色展开成实际色值，重复几次就有手感了。
RYB 和 RGB / HSL 有什么区别？
本页色轮用的是美术传统的 RYB（红黄蓝）模型，符合颜料/绘画的直觉；屏幕发光用的是 RGB，CSS 里更常用 HSL 描述（色相/饱和度/明度）。三者描述的维度不同，但"色轮上的角度关系"这套逻辑是相通的。