🎨
免费颜色格式转换器
即时在 HEX、RGB、HSL、HSV 和 CMYK 格式之间转换颜色。包含亮度标尺和预设色板。
加载后可离线使用
在 HEX、RGB、HSL、HSV 和 CMYK 之间转换颜色——带实时预览和一键复制。一切都在浏览器中运行。
支持格式:HEX (#fff 或 #ffffff)、RGB (255, 255, 255) 或 HSL (360, 100%, 50%)
100%
预设:
HEX#14B8A6
rgb() · 旧版本rgb(20, 184, 166)
rgb() · 现代rgb(20 184 166)
hsl() · 旧版本hsl(173, 80%, 40%)
hsl() · 现代hsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
RGB值20, 184, 166
WCAG 对比度
白色背景上
2.49:1
黑色背景上
8.44:1
🖨️ 用于打印: 这些CMYK值(89%、0%、10%、28%)是标准sRGB→CMYK近似值,仅供参考。为获得准确的打印颜色,请使用打印机的ICC配置文件或打印样本 — 屏幕CMYK无法匹配每种油墨/纸张。
亮度色阶
点击色板可切换到该色调
常见用途
- 为网页设计转换颜色获取任何颜色的HEX、RGB和HSL值 — 随时准备粘贴到CSS或Tailwind中。
- 为印刷品转换颜色(CMYK)将屏幕颜色(HEX/RGB)转换为CMYK值,用于印刷设计和专业印刷。
- 为设计系统构建颜色调色板将品牌颜色转换为所有格式,并为完整的设计系统生成一致的亮度刻度。
- 检查颜色对比以实现可访问性转换颜色以获取RGB值,用于对比度比率工具——用于可访问设计的WCAG合规性。
- 为Figma转换颜色获取精确的HEX和RGB值粘贴到Figma颜色选择器和设计令牌系统中。
工作原理
所有转换逻辑都是完全在你的浏览器中运行的手写 JavaScript——没有库、没有服务器调用。工具解析你的输入,将其传入一系列纯数学函数,同时生成十一种输出格式,包括现代 CSS Color 4 色彩空间 oklch() 和 lab()。
- 1灵活的输入解析自定义解析器接受十六进制(3、4、6 或 8 位)、rgb()/rgba()、hsl()/hsla()(支持旧式逗号语法和现代空格语法)以及纯数字三元组。以小数或百分比表示的 alpha 值会在转换开始前规范化到 0–1 范围。
- 2以 RGB 为转换中枢每种接受的格式都先解析为标准的 RGB 三元组。工具从这一表示出发向外展开:HSL 和 HSV 使用标准的最小值/最大值/色度公式;CMYK 通过求出黑色通道推导;在感知空间计算之前应用 sRGB 线性化(IEC 61966-2-1 定义的分段伽马曲线)。
- 3从零计算感知色彩空间oklch() 使用 Björn Ottosson 的参考 3×3 矩阵(LMS 立方根空间)计算。lab() 和 lch() 使用 Bradford 色适应将 D65 白点转换为 D50,与 CSS Color 4 对 lab() 的定义一致。这些与浏览器渲染引擎中使用的公式相同——此处在没有任何外部依赖的情况下实现。
- 4WCAG 对比度与亮度色阶相对亮度按 WCAG 2.1 公式计算(线性化的 R、G、B 按 0.2126/0.7152/0.0722 加权),并将与白色和黑色的对比度评为 AA 大号、AA、AAA 或不通过。九级亮度色条通过将 HSL 亮度通道从 10% 逐步调到 90% 生成,点击任意色块即可转换该色调。