工具箱
在线颜色工具
面向设计师和开发者的免费颜色工具箱:颜色转换、对比度、混色、色名、透明度、图片配色、渐变、OKLCH、Tailwind 匹配和 UI 色阶全部在浏览器本地运行。
工作台工具
按任务选择工具
从你眼前的问题开始,结果会立即生成。
格式转换
RGB 转 HEX:RGBA、HSL 与 OKLCH 转换
将 RGB 和 RGBA 色值快速转换为 HEX、八位 HEX、HSL、HSV 与 OKLCH,适合 CSS、设计 token 和 UI 颜色系统。
HEX 转 RGB:HSL、HSV 与 OKLCH 转换
将 3、4、6 或 8 位 HEX 十六进制颜色转换为 RGB、RGBA、HSL、HSV 和 OKLCH,并识别透明度。
颜色透明度计算器 - RGBA 与 HEX Alpha
将颜色透明度百分比转换为 RGBA、HSLA 和八位 HEX Alpha 色值,并在白色、黑色和自定义背景上实时预览。
HEX 透明度表 - CSS Alpha 对照表
将透明度百分比转换为两位 HEX Alpha 和八位 HEX 色值,并提供 RGBA 实时预览。
OKLCH 转换器 - HEX、RGB 与 HSL 转 OKLCH
将 HEX、RGB 或 HSL 颜色转换为 OKLCH,并同时复制现代 CSS oklch()、HEX、RGB、HSL 和 HSV 格式。
RGB 转 CMYK:HEX 转 CMYK 印刷色值
将 RGB、HEX 或 HSL 颜色转换为印刷用的 CMYK 百分比,查看青、品红、黄、黑数值、总油墨覆盖率和各种网页颜色格式。
CMYK 转 HEX:CMYK 转 RGB 色值
将 CMYK 百分比转换为网页使用的 HEX、RGB 和 HSL 色值,用滑块调整青、品红、黄、黑,并复制屏幕对应颜色。
HSL 转 HEX:HSL 与 HSLA 转十六进制颜色
将 HSL 和 HSLA 颜色转换为 HEX、RGB 与 OKLCH。用滑块调整色相、饱和度和亮度,立即复制 CSS 可用的十六进制色值。
检查
颜色对比度检查器 - WCAG AA 与 AAA
检查文字与背景颜色是否符合 WCAG AA 和 AAA,对普通文字、大号文字、按钮、链接和深色模式配色进行对比度测试。
颜色名称查询 - CSS 色名与中国传统色匹配
输入任意 HEX、RGB 或 HSL 色值,使用 OKLab 感知匹配查询最接近的 CSS 颜色名称和中国传统色名。
Tailwind 颜色转换器 - 查找最接近的类名
将任意 HEX、RGB 或 HSL 颜色匹配到最接近的 Tailwind CSS 色板,并复制 bg、text、border、ring 类名。
色盲模拟器 - 检查配色与图片的色盲可辨性
模拟红色盲、绿色盲、蓝色盲和全色盲下的配色与图片效果,找出色觉障碍人群可能混淆的颜色组合。
创作
在线颜色混合器与颜色混合计算器
按任意比例混合两种数字颜色,复制混合后的 HEX/RGB/HSL,并生成平滑的 5 阶或 10 阶过渡色。
图片配色提取器 - 从照片提取主色调
上传照片或截图,在浏览器本地提取主色 HEX 色板,适合 UI 设计、品牌配色、情绪板和网页截图分析。
CSS 渐变生成器与过渡色阶
创建双色 linear-gradient CSS 渐变,调整角度,复制 background 代码,并导出平滑中间色阶。
颜色色阶生成器 - 50 到 900 UI 色阶
从一个基础色生成 50–900 色阶,复制 CSS 变量,并预览适合 UI 的浅色、深色和设计 token。
配色生成器 - 一键生成配色方案,可锁定与导出
一键生成配色方案:按空格键换一组,锁定喜欢的颜色,检查文字对比度,并导出 CSS、SCSS、Tailwind 或 JSON。
随机颜色生成器 - 随机 HEX、RGB 与 HSL 色值
随机生成颜色并显示 HEX、RGB、HSL 色值。可选浅色、深色、马卡龙、鲜艳或中性灰风格,一次生成一个或一整组,点击即可复制。
互补色查询 - 对比色、反色与配色方案
查询任意 HEX 或 RGB 颜色的互补色(对比色),并获得 OKLCH 感知互补色、反色以及分裂互补和三角配色方案。
想先了解颜色格式?
从指南中学习 HEX、RGB、HSL、对比度与透明度,再回到工具实际操作。