🎨 输入颜色值

#4F7CFF

十六进制色值

支持 #RGB 与 #RRGGBB，可省略 #，例如 #4F7CFF / 4f7cff / #f80。

常用色板（点击选用）

🌈 渐变色生成

第二颜色

渐变角度

deg

径向渐变（不勾选则为线性渐变）

颜色预览

#4F7CFF

rgb(79, 124, 255)

HEX —

RGB —

HSL —

HSV —

CMYK —

🎨 配色参考（点击套用）

🔤 文字颜色建议

🌈 渐变预览

📊 常用颜色对照表

下表列出设计中最常用的颜色及其 HEX、RGB 值，点击任意一行可填入计算。

颜色	HEX	RGB	HSL

⚠️ 使用说明：HEX 是十六进制表示（#RRGGBB），前端最常用；RGB 是红绿蓝三通道（0~255），屏幕显示基础；HSL 是色相/饱和度/亮度，更直观；HSV 常用于调色板；CMYK 是印刷用青品黄黑四色，为近似值。
同一份颜色在不同格式下表示相同，只是坐标系不同；HEX 与 RGB 可无损互转，HSL/HSV 与 CMYK 转换存在四舍五入误差。
CMYK 与屏幕 RGB 的色域并不完全重合，印刷前请以设计稿与打样为准。所有换算均在浏览器本地完成。

🎨

颜色格式转换器

实用计算完全免费 🌙 支持黑夜模式 🔒 纯前端本地计算 🎨 实时预览

做设计或写前端时，颜色值常常需要在几种格式之间来回换算：设计稿给的是 HEX，CSS 里可能要用 rgb()，调整明暗时用 HSL 更顺手，交给印刷厂又要 CMYK。靠记忆或手算既慢又容易出错。
本工具把常见颜色格式集中在一起，输入任意一种，其余全部自动算出：
· HEX / RGB：屏幕显示的基础，可无损互转；
· HSL：把颜色拆成「什么色（H）· 多鲜艳（S）· 多亮（L）」，调色时比 RGB 更直观；
· HSV：调色板与取色器常用的坐标系；
· CMYK：印刷用的青、品红、黄、黑四色，供印前参考。
页面顶部有实时色块预览，输入时所见即所得；下方提供常用色板与颜色对照表，点一下即可套用，省去反复输入。
需要注意的是：HEX、RGB 之间可以精确互转，而 HSL/HSV、CMYK 在换算时会有轻微四舍五入；此外 CMYK 的色域比屏幕小，鲜艳的屏幕色未必能准确印出，正式印刷请以打样为准。
所有换算均在浏览器本地完成，不会上传任何数据。

类别实用计算

运行方式纯前端 · 离线可用

支持格式HEX / RGB / HSL / HSV / CMYK

核心特性

五种格式互转

实时颜色预览

支持 #RGB 简写

HEX / RGB / HSL 输入

常用色板一键套用

互补色 / 类似色参考

对比度与文字色建议

颜色对照表

支持黑夜模式

纯前端本地计算

关于这个工具

颜色的本质是三个通道的数值组合。屏幕用加色法：R、G、B 三盏灯越亮，颜色越接近白色，所以 rgb(255,255,255) 是白、rgb(0,0,0) 是黑。
而 HSL 换了一种描述方式：H（色相）是色环上的角度，0° 红、120° 绿、240° 蓝；S（饱和度）控制颜色有多纯；L（亮度）控制接近黑或白。
举个直觉的例子：
· 想「把蓝色调暗一点」——在 HSL 里只要调低 L，比在 RGB 里三个数一起改方便得多；
· 想做「同色系深浅搭配」——固定 H 和 S，只改 L 即可得到一整套配色。
HEX 其实只是 RGB 的十六进制写法：#4F7CFF 拆成 4F、7C、FF 恰好是 79、124、255。理解这层关系，看到色值就不会发怵了。

怎么用

第 1 步
选择输入格式：HEX、RGB 或 HSL，顶部色块会实时显示当前颜色。
第 2 步
输入颜色值。HEX 支持 #4F7CFF、4f7cff、#f80 三种写法。
第 3 步
下方结果区同步显示 HEX、RGB、HSL、HSV、CMYK 五种格式与换算过程。
第 4 步
点击常用色板或对照表中的颜色可快速套用；点「📋 复制全部格式」复制所有色值。

更新记录

v1.2 2026-09-11 新增「渐变色生成」：以当前色为起始色，自定义第二颜色与渐变角度（或切换径向渐变），实时预览并一键复制 background CSS 片段。
v1.1 2026-09-11 内容增强：新增「配色参考」（明暗变体、互补色、类似色，点击即套用）与「文字颜色建议」（相对亮度、WCAG 黑白对比度、AA 达标判断）；复制结果新增建议文字色与可直接粘贴的 CSS 片段；黑夜模式下为色块补充内描边，避免浅色与背景糊在一起。
v1.0 2026-09-11 工具上线：支持 HEX / RGB / HSL 三种输入方式与 HEX / RGB / HSL / HSV / CMYK 五种格式输出；实时颜色预览；支持 #RGB 简写与省略 # 的写法；内置常用色板与颜色对照表（点击套用）；支持一键复制全部色值；适配黑夜模式；纯前端本地计算。

常见问题

#4F7CFF 这种色值怎么读？

HEX 色值其实把红、绿、蓝三个通道各用两位十六进制表示：
· 4F = 4×16 + 15 = 79（红）
· 7C = 7×16 + 12 = 124（绿）
· FF = 15×16 + 15 = 255（蓝）
所以 #4F7CFF 等于 rgb(79, 124, 255)，是一种明亮的蓝色。三位的 #f80 是简写，等价于把每位重复一次，即 #ff8800。

RGB 和 HSL 该用哪个？

取决于你要做什么：
· 要呈现一个确定的颜色 → 用 HEX 或 RGB，所见即所得；
· 要调整或生成配色 → 用 HSL 更方便，固定色相 H 只调亮度 L，就能得到同色系的深浅色；
· 要在调色板里取色 → 常见取色器用 HSV，和 HSL 类似但明度定义不同。
简单说：RGB 适合「精确指定」，HSL 适合「凭感觉调」。

为什么 CMYK 换算结果不是整数？

因为 CMYK 是印刷用的减色模型，和屏幕的 RGB 加色模型色域并不完全重合，两者之间是近似换算而非精确对应。此外 CMYK 的四个值还会受印刷机、纸张、油墨影响，不同印厂可能有细微差别。
本工具的 CMYK 结果适合做参考与沟通，正式印刷前请务必以设计稿、打样和印厂要求为准。

换算会保存我输入的颜色吗？

不会。所有换算都在浏览器本地完成，颜色值不上传服务器，也不写入任何存储，刷新页面即恢复默认值。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！