工作原理
选择一个基础色和一种配色规则,工具会在色轮上旋转色相或调整亮度,生成一组协调的配色。点击任意色块即可复制其代码,也可以把整组颜色复制为 CSS 变量,直接用在样式表中。
互补色 = 色相 + 180° · 三角配色 = 色相 + 120° 和 + 240°
配色规则
- 互补色:色轮上相对的颜色,对比强烈,适合行动号召按钮。
- 类似色:色轮上相邻的颜色,适合沉稳、自然的设计。
- 三角配色和四角配色:三个或四个均匀分布的色相,活泼又平衡。
- 分裂互补色:对面颜色两侧的相邻色——有对比,但不那么紧张。
- 单色和深浅色阶:同一色相的多级亮度,非常适合界面状态。
使用提示
- 用一种颜色做主色,一种做强调色,其余的少量点缀。
- 发布前请用对比度检查工具检查文字和背景的搭配。
- 全部在浏览器中运行,不保存任何内容。
标准与出处
- 配色基于 CSS Color Module Level 4 定义的 HSL 色轮计算
最后核对于 2026年10月7日
常见问题
怎样用一种颜色做出配色方案?
输入基础色并选择一种配色规则。工具会在色轮上旋转色相或调整亮度,生成与之搭配的颜色。
网站用哪种配色最好?
类似色或单色配色显得沉稳统一;再加一种互补色作为按钮和链接的强调色。
什么是深浅色阶?
浅色阶是颜色变浅后的版本,深色阶是变深后的版本。它们很适合用于悬停状态、边框和背景。
可以导出配色吗?
可以。复制 CSS 变量代码块,或点击任意色块复制单个 HEX 代码。
能随机推荐配色吗?
点击“随机基础色”从一个新颜色开始,再切换配色规则探索不同效果。