设计配色完全指南：颜色格式、对比度、色阶与 CSS 参数
HEX/RGB/HSL 互转、WCAG 对比度、互补/三角配色、色阶与间距阶梯、clamp 与圆角阴影——设计与前端的高频需求。本文按颜色、配色方案、CSS 参数归类，并列出本站全部设计配色工具。
核心要点
- HEX/RGB/HSL 互转、CMYK 转 RGB 是设计与前端的日常；写代码优先 HEX/RGB，调饱和度常用 HSL。
- 正文与背景对比度建议达 WCAG AA（≥4.5:1），大字 ≥3:1；互补色/类似色/三角色能快速搭出协调配色。
- clamp() 让字号随视口自适应，是响应式排版常用手法；圆角、阴影、间距阶梯可直接生成 CSS 变量复用。
设计配色工具把「颜色与排版参数」变成可填数、可预览的计算器：设计师挑色、前端写 CSS 变量、做无障碍对比度检查都能用。结果可直接复制进代码。
颜色格式
颜色格式转换、HEX 转 RGB、RGB 转 HEX、HSL 转 RGB、RGB 转 HSL、CMYK 转 RGB、色温转 RGB、灰度与反色。写代码优先用 HEX 或 RGB，设计稿常用 HSL 调饱和度。
配色方案
颜色混合、明暗调整、生成色阶（Tailwind 风格）、互补色、类似色、类似色方案、三角色、三角色方案、变亮、变暗、提亮颜色、变暗颜色、明度阶梯、暗色阶梯、渐变角度、渐变停靠点。
对比度与可访问性
对比度检测（WCAG）、对比度(WCAG)、颜色对比度、相对亮度。正文与背景对比度建议达 WCAG AA（≥4.5:1），大字 ≥3:1。
CSS 参数
宽高比计算、CSS 滤镜生成、CSS clamp() 计算、CSS clamp 值、生成 clamp()、字号比例生成、字号比例、间距阶梯生成、间距梯度、间距比例、rem 转 px、em 转 px、圆角推荐、圆角集合、阴影参数、透明度叠加、透明度阶梯。clamp() 让字号随视口自适应，是响应式排版的常用手法。
设计配色相关工具速查（共 46 个）
颜色格式转换 · 颜色混合 · 明暗调整（Tint/Shade） · 生成色阶（Tailwind 风格） · 灰度与反色 · 对比度检测（WCAG） · 色温转 RGB · 宽高比计算 · CSS 滤镜生成 · CSS clamp() 计算 · 字号比例生成 · 间距阶梯生成 · HEX 转 RGB · RGB 转 HEX · HSL 转 RGB · RGB 转 HSL · CMYK 转 RGB · 对比度(WCAG) · 互补色 · 变亮 · 变暗 · 类似色 · 三角色 · rem 转 px · em 转 px · CSS clamp 值 · 圆角推荐 · 阴影参数 · 间距梯度 · 渐变角度 · 透明度叠加 · 字号比例 · 颜色对比度 · 相对亮度 · 提亮颜色 · 变暗颜色 · HSL 转 HEX · 类似色方案 · 三角色方案 · 明度阶梯 · 暗色阶梯 · 渐变停靠点 · 间距比例 · 透明度阶梯 · 生成 clamp() · 圆角集合
常见问题
WCAG 对比度要求是多少？
HEX、RGB、HSL 该用哪种？
clamp() 有什么用？
互补色和三角色怎么选？
最后更新：2026-09-19