设计配色
颜色格式转换、互补色、渐变色、对比度、阴影、圆角、px/rem 等设计与前端工具。
🎨
颜色格式转换
输入 HEX 颜色，一次性得到 RGB、HSL、HSV、CMYK 与灰度值。
🧪
颜色混合
按比例混合两种颜色，得到中间色。
🌗
明暗调整（Tint/Shade）
把颜色按指定幅度调亮或调暗，生成同色系的深浅变化。
📊
生成色阶（Tailwind 风格）
由基础颜色生成 50–900 的九级色阶，适合做设计系统配色。
⬜
灰度与反色
把颜色转为灰度或反色。
🔲
对比度检测（WCAG）
计算两色对比度，并判断是否满足 WCAG AA/AAA 标准。
🌡️
色温转 RGB
把色温（开尔文）换算为近似的 RGB 颜色，用于白平衡与灯光设计。
📺
宽高比计算
按给定尺寸求最简宽高比，并按比例推算另一尺寸。
🌈
CSS 滤镜生成
按亮度、对比度、饱和度、模糊等参数生成 CSS filter 代码。
📏
CSS clamp() 计算
生成响应式字号／间距的 clamp() 表达式，并给出常见视口的实际值。
🔤
字号比例生成
按模数比例生成成套字号（typographic scale）。
📏
间距阶梯生成
按基准与倍数生成常用的间距阶梯（适合做设计系统）。
🎨
HEX 转 RGB
十六进制颜色转 RGB。
🎨
RGB 转 HEX
RGB 颜色转十六进制。
🎨
HSL 转 RGB
HSL 转 RGB。
🎨
RGB 转 HSL
RGB 转 HSL。
🎨
CMYK 转 RGB
CMYK 转 RGB。
⚫
对比度(WCAG)
计算两色对比度。
🎨
互补色
求色相旋转 180° 的互补色。
🎨
变亮
按比例提亮颜色。
🎨
变暗
按比例压暗颜色。
🎨
类似色
生成色相相邻配色。
🎨
三角色
生成三角配色。
📏
rem 转 px
按根字号换算。
📏
em 转 px
按父字号换算 em。
📐
CSS clamp 值
计算 CSS clamp() 在某视口下的值。
🔲
圆角推荐
按高度给推荐圆角。
🌑
阴影参数
生成常用阴影 CSS。
📏
间距梯度
由基准生成间距阶梯。
🌈
渐变角度
由方向得渐变角度。
👻
透明度叠加
两层透明度叠加后的总不透明度。
🔠
字号比例
按倍数缩放字号。
🎨
颜色对比度
按 WCAG 计算两色对比度并评级。
🎨
相对亮度
计算颜色的相对亮度。
🎨
提亮颜色
按比例提亮颜色。
🎨
变暗颜色
按比例变暗颜色。
🎨
HSL 转 HEX
将 HSL 颜色转为十六进制。
🎨
类似色方案
生成相邻色相的类似色方案。
🎨
三角色方案
生成 120° 间隔的三角色方案。
🎨
明度阶梯
生成由深到浅的明度阶梯。
🎨
暗色阶梯
生成由浅到深的暗色阶梯。
🎨
渐变停靠点
生成线性渐变的 CSS 代码。
🎨
间距比例
按比率生成间距比例序列。
🎨
透明度阶梯
生成等分透明度阶梯。
🎨
生成 clamp()
生成响应式字号 clamp() 表达式。
🎨
圆角集合
生成递增的圆角像素集合。
常见问题
屏幕上看好的颜色为什么打印出来不一样？
屏幕用 RGB 发光显示，印刷用 CMYK 油墨，色域本就不重合，再加上纸张与校色差异，两者不可能完全一致。印刷用途请以打样为准。
「设计配色」分类一共有多少个在线工具？
截至 2026-09-19，「设计配色」分类共有 46 个在线工具，包括颜色格式转换、颜色混合、明暗调整（Tint/Shade）、生成色阶（Tailwind 风格）、灰度与反色、对比度检测（WCAG）等，全部可以在本页直接打开使用。
对比度多少才算无障碍合格？
按 WCAG 无障碍指南，正文文字与背景的对比度建议不低于 4.5:1，大号文字不低于 3:1。实际还需结合最终字号、字重与使用场景复核。
这些工具需要收费或注册吗？
全部免费，无需注册、无需安装。除个别需要联网获取实时数据的工具外，计算与转换都在浏览器本地完成，输入内容不会上传服务器。