颜色格式转换

HEX、RGB、HSL、HSV、CMYK 互转,生成明暗梯度与可复制的 CSS 变量。

颜色格式转换是做什么的

做页面配色时经常只拿到一种格式的色值,比如设计稿给 HEX 而代码里要用 HSL,印刷物料又要 CMYK。选个颜色或输入色值,七种格式一起给出且各自可复制,下方还有十级明暗梯度与黑白对比度参考。

核心功能

  • HEX、RGB、HSL、HSV、CMYK 全格式输出
  • 支持取色器选色或直接输入 HEX 值
  • 自动生成十级明暗色阶梯度
  • 显示与白色黑色的对比度数值

颜色格式转换怎么用

输入任意格式颜色值或使用取色器,即可得到全部格式;下方会自动生成 10 级明暗梯度。

  1. 点色块用取色器选色,或在输入框填 HEX 值
  2. 颜色格式面板列出七种格式,逐条可复制
  3. 点复制全部格式一次拷贝所有色值
  4. 参考明暗梯度与对比度数值定文字用色

适合这些场景

  • 前端把设计稿 HEX 转成 CSS 可用格式
  • 设计师为品牌色派生浅色背景梯度
  • 印刷物料把屏幕色换算成 CMYK 参考

常见问题

支持透明度吗?

有限支持。可输入 8 位 HEX 或 rgba 颜色,但换算只取 RGB 通道,透明度不会带入结果,需要半透明请自行修改 alpha 值。

对比度数值怎么用?

面板显示当前颜色与白色、黑色的对比度比值。无障碍标准要求正文对比度至少 4.5 比 1,取更达标的一侧作文字颜色。

CMYK 结果能直接拿去印刷吗?

只能作近似参考。屏幕 RGB 到 CMYK 的换算与印刷设备、油墨和纸张相关,正式印刷请用专业软件按 ICC 配置文件转换。

明暗梯度怎么生成的?

保留色相与饱和度,把亮度从浅到深均分十级生成,同一色相由浅至深,适合做按钮悬浮态与背景层级。