🎨 颜色转换器
HEX · RGB · HSL · HSV · CMYK 互转 + 配色方案
当前颜色
#3F51B5
HSL 滑块调节
色相H232°
饱和S48%
亮度L48%
HEX · RGB · HSL · HSV · CMYK 互转 + 配色方案
HEX是十六进制网页色（如#FF5722）；RGB是红绿蓝光加色模型（0-255），用于屏幕显示；HSL是色相/饱和度/亮度，直觉化调色；HSV（HSB）是色相/饱和度/明度，与HSL类似但亮度算法不同；CMYK是青品黄黑减色模型，用于印刷。屏幕用RGB/HEX，印刷用CMYK。
HSL的L=50%时纯色最饱和，L=100%为白色；HSV的V=100%即纯色，与饱和度无关。所以同一颜色在两种空间中"L"和"V"值不同。本工具同时显示两者便于对照。
互补色（色相差180°）对比强烈，用于强调；类比色（相邻30°）和谐统一，用于主色调；三角配色（120°均分）活泼平衡；分裂互补色（互补色两侧30°）对比柔和。本工具自动计算并预览所有方案。
CMYK色域比RGB小，印刷能呈现的颜色少于屏幕。RGB转CMYK再转回会丢失超出CMYK色域的鲜艳色彩，这是物理限制，非计算错误。需要印刷的图建议一开始就用CMYK安全色。
本工具处理的是不透明颜色（alpha=255）。带透明度的颜色（如rgba(63,81,181,0.5)）需额外记录alpha值，本工具的HEX/RGB/HSL/HSV/CMYK都不含alpha。如需透明效果，可在实际使用时单独设置透明度。
3位HEX是6位HEX的简写，如#3F5等价于#33FF55，把每个字符重复一次。本工具支持输入3位和6位HEX，自动正确转换。
一样。色相是360°的圆环，0°和360°都代表红色。本工具归一化到0-359°，避免重复。红色约0°、橙色30°、黄色60°、绿色120°、青色180°、蓝色240°、紫色300°。
网页安全色是早期256色显示器下能稳定显示的颜色，由RGB各取0/51/102/153/204/255（即00/33/66/99/CC/FF）组合，共216种。现代显示器基本不需要了，但部分场景仍被引用。
网页开发可直接复制HEX或RGB；PPT、Word、Canva等设计软件通常支持填HEX值；印刷物料则用CMYK。先确认目标媒介，再选对应格式复制即可。
不同颜色空间适合不同场景，选对了事半功倍。
| 格式 | 原理 | 适用场景 |
|---|---|---|
| HEX | 16进制RGB | 网页/CSS |
| RGB | 红绿蓝加色 | 屏幕显示 |
| HSL | 色相/饱和度/亮度 | 设计师调色 |
| HSV/HSB | 色相/饱和度/明度 | 图像处理 |
| CMYK | 青品黄黑减色 | 印刷 |
RGB靠三个数字硬记，很难直觉判断；HSL的"色相-饱和度-亮度"符合人的直觉：先决定是什么颜色(H)，再调鲜艳度(S)和明暗(L)。
这些关系都建立在色相环上，本工具自动计算并实时预览，选主色即可看到整套方案。
屏幕(RGB)颜色比印刷(CMYK)更鲜艳，因为CMYK靠反射光、色域更小。设计印刷物料时，别只看屏幕效果，最终颜色以打样为准。
| 项目 | RGB | CMYK |
|---|---|---|
| 介质 | 发光屏幕 | 反射纸张 |
| 色域 | 较大 | 较小 |
| 适用 | 网页/屏幕 | 印刷/喷绘 |
| 黑色 | 0,0,0 | 约0,0,0,100 |
| 颜色 | HEX | RGB |
|---|---|---|
| 正红 | #FF0000 | 255,0,0 |
| 橙色 | #FFA500 | 255,165,0 |
| 金黄 | #FFD700 | 255,215,0 |
| 草绿 | #4CAF50 | 76,175,80 |
| 天蓝 | #87CEEB | 135,206,235 |
| 靛蓝 | #3F51B5 | 63,81,181 |
| 紫色 | #9C27B0 | 156,39,176 |
| 黑色 | #000000 | 0,0,0 |
| 色相H | 颜色 | 示例 |
|---|---|---|
| 0° | 红色 | 红/粉 |
| 30° | 橙 | 橙/橘 |
| 60° | 黄 | 黄/米 |
| 120° | 绿 | 绿/草绿 |
| 180° | 青 | 青/薄荷 |
| 240° | 蓝 | 蓝/海军蓝 |
| 300° | 紫 | 紫/洋红 |
1. 在任意一个颜色输入框中输入数值，其它格式自动同步。
2. 或点击"取色"用系统取色器选色，或拖动HSL滑块。
3. 下方自动生成5种配色方案，点击色块复制HEX值。
4. 所有转换在浏览器本地完成，不上传服务器。