免费在线色轮配色工具
在色轮上找互补色、类似色、三角配色等搭配颜色。
正在加载编辑器…
如何使用本工具
用色轮可以快速找到和基础色搭配的颜色：拖动标记或输入品牌色 HEX 值，再选一种配色方案，搭配色会同时出现在色轮上和色块列表里。HEX 色值可以单个复制、整组复制，也能复制成 CSS 变量，直接用于标志、社媒帖子、视频封面或演示稿。
- 01
选择基础色
沿色轮拖动大圆点，调整亮度，或在基础色里填写 HEX、RGB、HSL 值。
- 02
选择配色方案
可选互补、类似、三角、分裂互补、四角、方形和单色。调整基础色时，搭配色会在色轮上跟着移动。
- 03
复制配色
可以单独复制每个 HEX 色值，用复制 HEX 复制整组，或用复制 CSS 得到变量代码。点击搭配色块，即可把它设为新的基础色。
配色方案介绍
• 互补：色轮上相对的颜色，对比最强 • 类似：两侧各相隔 30° 的邻近色，平和自然 • 三角：相隔 120° 的三种颜色，活泼又平衡 • 分裂互补：基础色加上互补色两侧的颜色（150° 和 210°），有对比又更柔和 • 四角：相隔 60° 的两组互补色，色彩丰富 • 方形：相隔 90° 的四种颜色 • 单色：基础色加上同一色相的两个更深、两个更浅的版本
RGB 色轮和绘画色轮
这个色轮采用屏幕、CSS 和数字设计软件使用的 RGB 模型：红、绿、蓝相隔 120°，所以红色的互补色是青色。美术课上的红黄蓝绘画色轮排列方式不同。做网页、短视频和封面这类屏幕上的设计时，RGB 色轮给出的搭配就是你最终看到的效果。
怎样用好一组配色
• 一种颜色做主色，一种做点缀，其余用中性色 • 常见比例是主色 60%、辅色 30%、点缀色 10% • 想让搭配色更柔和，可以降低亮度，或改用单色方案里的色阶 • 用作正文颜色前，先用 SocQ 取色器检查文字对比度
常见问题
色轮怎么用？
拖动标记选择基础色，再选配色方案，搭配色会出现在色轮上和色块列表里，并附带 HEX 色值。
橙色的互补色是什么？
在这个 RGB 色轮上，橙红色 #F64C31 的互补色是青色 #31DBF6。在绘画色轮上，橙色与蓝色互补。
什么是类似色？
色轮上相邻的颜色，这里取基础色两侧各 30°。#F64C31 的类似色是 #F63179 和 #F6AF31，能组成和谐、平静的配色。
什么是三角配色？
在色轮上均匀分布、相隔 120° 的三种颜色。#F64C31 的三角配色是 #31F64C 和 #4C31F6。
四角和方形有什么区别？
四角使用相隔 60° 的两组互补色，在色轮上组成长方形；方形是四种颜色均匀分布，彼此相隔 90°。
能输入品牌的 HEX 色值吗？
能。在基础色里填写，或使用旁边的颜色选择框。
怎样把配色复制到 CSS？
点击复制 CSS，会得到包含 --color-1、--color-2 等变量的 :root 代码块；复制 HEX 则得到用逗号分隔的色值列表。
为什么调亮度会改变所有颜色？
搭配色沿用基础色的饱和度和亮度，让整组配色保持平衡。调整基础色，整组配色就会一起变化。
做数字设计该用哪种色轮？
用 RGB 色轮，也就是本工具采用的色轮。它和屏幕的混色方式一致，互补色、三角配色在网页、社媒帖子和视频里都能呈现预期效果。
色轮配色工具免费吗？
免费，无需注册，不限次数。
面向开发者
从 Pinterest 获取配色灵感
在规划活动视觉？SocQ 的 Pinterest API 可以获取公开 Pin、搜索结果、创作者主页和用户的 Pin 列表，帮你收集热门视觉，再到这里把颜色整理成配色方案。
