颜色代码转换与调色板
在 HEX、RGB、HSL、HSV、CMYK 与 CSS 颜色名之间转换，检查无障碍对比度，生成深浅色阶与配色方案。
正在加载…
在本页的浏览器中运行，不上传任何内容。
工具介绍
在线颜色代码转换：输入任意一种常见写法的颜色，同时得到 HEX、RGB、HSL、HSV、CMYK 写法，匹配时还会给出 CSS 颜色名。适合把设计稿里的色值改写成 CSS，在 HEX 和 RGB 之间换算，或者检查文字颜色在白底、黑底上是否清楚。
调整不透明度可得到 RGBA、HSLA 和带透明度的 HEX（#RRGGBBAA）。页面按 WCAG 标准给出与白色、黑色的对比度等级，并生成 9 级加白、9 级加黑色阶，以及互补色、邻近色、三角配色和分裂互补配色。全部在浏览器中计算，不上传。
使用步骤
- 在“颜色”输入框中输入颜色，例如 #7954AD、rgb(121, 84, 173) 或 steelblue，也可以点“调色盘”直接选色。
- 需要透明度时拖动“不透明度”滑块，RGBA、HSLA 和“HEX + Alpha”会随之变化。
- 在结果表中找到需要的写法，点右侧的“复制”；表格最后两行是白底、黑底对比度及其等级。
- 在“调色板”中点击任意色块，它会成为当前颜色，方便继续换算或生成配色。
常见问题
支持哪些颜色写法？
支持 3、4、6、8 位 HEX（建议带 #）、rgb() 与 rgba()、hsl() 与 hsla()、hsv() 或 hsb()、cmyk()（数值可以是百分比，也可以是 0 到 1 的小数），以及 CSS 颜色名和 transparent。直接输入“255, 0, 0”这样的三个数字会按 RGB 识别。无法识别时页面会提示，并继续显示上一个有效颜色。
AA、AAA 是什么意思？
这是 WCAG 无障碍标准的对比度等级：达到 4.5:1 为 AA，达到 7:1 为 AAA；3:1 以上标为“AA 大字”，只适合大号文字；低于 3:1 显示“偏低”。半透明颜色会先与背景混合再计算。
为什么 CMYK 数值和设计软件里的不一样？
这里的 CMYK 由 RGB 按简单公式换算，没有使用 ICC 色彩配置文件。印刷用色请以设计软件按印厂配置文件给出的数值为准。
浅色、深色和配色方案是怎么生成的？
加白、加黑是把颜色分别与白色、黑色按 10% 到 90% 的比例混合。配色方案在色相环上旋转色相：互补色转 180°，邻近色转 ±30°，三角配色转 120° 和 240°，分裂互补转 150° 和 210°。
为什么有的颜色没有显示 CSS 颜色名？
只有颜色与某个 CSS 命名颜色完全相同时才会显示名称，例如 #FF0000 显示为 red；其他颜色这一行会隐藏。
相关工具
屏幕与图片取色
从屏幕任意位置（Chrome 与 Edge）或图片中取色，并提取图片主色。
图片格式转换（HEIC 转 JPG、PNG、WebP）
在 JPEG、PNG、WebP、GIF、BMP、TIFF 和 ICO 图标之间转换图片，也能把 iPhone 的 HEIC、HEIF 照片转成 JPG、PNG 或 WebP；浏览器支持时也可读取 AVIF。不支持动图，文件不上传。
图片转 ICO 图标
生成 Windows 或网站图标（favicon.ico），一个文件内含 16–256 像素的多个尺寸，可加圆角或裁成圆形。
二维码与条形码生成
生成二维码、Data Matrix、PDF417、Aztec、Code 128、Code 39、Code 93、EAN、UPC-A、ITF 或 Codabar 的 PNG / SVG 图片，可每行生成一个。
二维码与条形码识别
从最多 20 张 PNG、JPEG 或 WebP 图片中识别二维码与条形码，一张图可含多个码。
摄像头扫码
用摄像头实时识别二维码与条形码，链接只显示、不会自动打开。