颜色格式转换
HEX、RGB、HSL、HSV、CMYK 互转,生成明暗梯度与可复制的 CSS 变量。
颜色格式转换是做什么的
做页面配色时经常只拿到一种格式的色值,比如设计稿给 HEX 而代码里要用 HSL,印刷物料又要 CMYK。选个颜色或输入色值,七种格式一起给出且各自可复制,下方还有十级明暗梯度与黑白对比度参考。
核心功能
- HEX、RGB、HSL、HSV、CMYK 全格式输出
- 支持取色器选色或直接输入 HEX 值
- 自动生成十级明暗色阶梯度
- 显示与白色黑色的对比度数值
颜色格式转换怎么用
输入任意格式颜色值或使用取色器,即可得到全部格式;下方会自动生成 10 级明暗梯度。
- 点色块用取色器选色,或在输入框填 HEX 值
- 颜色格式面板列出七种格式,逐条可复制
- 点复制全部格式一次拷贝所有色值
- 参考明暗梯度与对比度数值定文字用色
适合这些场景
- 前端把设计稿 HEX 转成 CSS 可用格式
- 设计师为品牌色派生浅色背景梯度
- 印刷物料把屏幕色换算成 CMYK 参考
常见问题
支持透明度吗?
有限支持。可输入 8 位 HEX 或 rgba 颜色,但换算只取 RGB 通道,透明度不会带入结果,需要半透明请自行修改 alpha 值。
对比度数值怎么用?
面板显示当前颜色与白色、黑色的对比度比值。无障碍标准要求正文对比度至少 4.5 比 1,取更达标的一侧作文字颜色。
CMYK 结果能直接拿去印刷吗?
只能作近似参考。屏幕 RGB 到 CMYK 的换算与印刷设备、油墨和纸张相关,正式印刷请用专业软件按 ICC 配置文件转换。
明暗梯度怎么生成的?
保留色相与饱和度,把亮度从浅到深均分十级生成,同一色相由浅至深,适合做按钮悬浮态与背景层级。