颜色转换器
即时转换和预览颜色。
高级选项
FAQ — 颜色转换器
Frequently Asked Questions
如何使用颜色转换器
-
输入您的颜色值
输入或粘贴任意颜色值——HEX（#3b82f6）、RGB（59, 130, 246）、HSL（217, 91%, 60%）或CMYK。本工具可自动识别格式。 -
即时查看所有转换结果
所有等效格式实时更新：十六进制、RGB、RGBA、HSL、HSLA、HSV、CMYK 及 CSS 自定义属性。单击即可复制任意数值。 -
使用颜色选择器
点击色板或使用浏览器自带的颜色选择器，即可直观选择颜色并同时获取所有格式等效值。 -
复制并用于您的项目
点击任意格式的复制按钮，即可将其复制到剪贴板。直接粘贴至CSS、Sass、Tailwind配置、Figma或打印工作流程中。
示例转换
在所有支持的格式中呈现相同的蓝色：
| 格式 | 值 | 用法 |
|---|---|---|
| 十六进制 | #3b82f6 | CSS、HTML、Figma |
| RGB | rgb(59, 130, 246) | CSS、Canvas API |
| RGBA | rgba(59, 130, 246, 1) | CSS 带透明度 |
| HSL | hsl(217, 91%, 60%) | CSS、设计令牌 |
| CMYK | C:76 M:47 Y:0 K:4 | 印刷/胶印 |
| HSV | 217°，76%，96% | 图像编辑器 |
常见使用场景
网页与用户界面设计
将品牌十六进制颜色转换为HSL格式，用于CSS自定义属性及Tailwind配置，确保浅色与深色模式下主题风格保持一致。
印刷与印前
将屏幕上的RGB或HEX颜色转换为CMYK以用于印刷生产——避免常见的陷阱：颜色在屏幕上看起来很棒，但印刷出来却显得暗淡。
品牌指南
从单一数据源完整记录所有格式的品牌色板——数字媒体采用HEX值，印刷品采用CMYK值，并提供潘通色号参考。 转换JSON、CSV和XML数据
无障碍检查
获取精确的颜色值以在对比度检查器中进行测试，确保文本与背景的组合符合WCAG AA或AAA要求。
开发者工作流
快速将设计工具颜色（Figma HEX）转换为CSS HSL变量，实现动态主题设置和程序化色彩操控。
工作原理
所有转换操作均在浏览器中即时完成，无需服务器参与。
该工具将您的输入解析为标准化RGB值（每通道0–255），随后对每个目标格式应用标准转换公式。
HSL（色相、饱和度、明度）是通过RGB颜色空间推导而来的：首先找出RGB通道中的最小值/最大值，将其平均值作为明度值，再据此计算饱和度和色相角。
CMYK通过以下公式从RGB计算得出：K = 1 - max(R,G,B)；C = (1-R-K)/(1-K)；等等。请注意RGB→CMYK转换具有设备依赖性——屏幕CMYK仅为近似值，并非印刷配置文件。
本工具适用于哪些人群
前端开发工程师
在CSS格式间转换设计令牌，并在开发过程中快速验证颜色值。
UI/UX设计师
将 Figma 或 Sketch 调色板转换为设计系统或 CSS 框架所需的任何格式。
平面设计师
在将设计稿送印前，请将RGB品牌色转换为CMYK模式，避免出现意外的色差问题。
品牌经理
在所有格式（数字和印刷）中保持统一的品牌配色方案，无需切换工具。
无障碍测试人员
提取精确的颜色值，用于对比度检查器和无障碍审计。
色彩运用技巧
- 在CSS自定义属性中使用HSL（--color-primary: hsl(217, 91%, 60%)），这样就能通过calc()函数调整悬停和禁用状态下的明度。
- 使用RGB转CMYK时务必索要印刷校样——屏幕与印刷的色彩匹配需要设备色彩配置文件。
- 使用浏览器取色器直接从截图或设计素材中采样颜色——无需手动复制数值。
- 转换后，请使用对比度检查工具测试颜色，确保您的配色方案符合WCAG AA标准（正文文本的4.5:1对比度要求）。
- 将品牌配色方案以所有格式（HEX、RGB、CMYK）存储于设计系统文档中，避免重复转换。
为何精准色彩转换至关重要
- 设计团队与开发团队之间色彩值的不一致，是导致最终产品视觉效果不协调的主要原因之一。
- RGB与CMYK占据不同的色域——未经正确转换的色彩在屏幕上可能显得鲜艳，但印刷时却可能显得浑浊。
- CSS HSL 使动态主题（浅色/深色模式、色调）的实现比 HEX 简单得多——但需要精确的 HEX 到 HSL 转换作为起点。
- 品牌合规性审核需要多种格式的色彩——单一转换器可消除人工错误，节省大量往返沟通时间。
性能与隐私
每次颜色转换均完全在浏览器内通过原生JavaScript运行。任何颜色值、调色板或使用数据都不会发送至服务器。该工具每次转换响应时间低于10毫秒，首次访问后可离线使用，且无需账户或注册。
教育说明：色彩空间解析
RGB（加色法）
RGB混合红、绿、蓝三色光。三通道数值均为255时呈现白色；三通道数值均为0时呈现黑色。屏幕、相机和网页浏览器均采用此标准。
HEX（网页速记）
HEX是RGB值的十六进制编码形式。#3b82f6 = R:59, G:130, B:246。它与RGB值完全等同——只是CSS和HTML中更紧凑的表示方式。
HSL（感知）
HSL将色相（色轮角度0–360°）、饱和度（强度）和明度（亮度）分离处理。相较于RGB，这种模式更便于设计师进行概念化思考。
CMYK（减色法）
CMYK混合青色、品红色、黄色和关键色（黑色）油墨。它在白色纸张上进行减色混合。屏幕RGB色域更广——某些明亮的RGB颜色无法通过CMYK再现。
故障排除
你知道吗？
十六进制颜色表示法于1996年随HTML 3.2规范引入HTML。在此之前，浏览器仅能识别16种命名颜色（如"红色"和"蓝色"）。随着CSS1的出现，网页颜色调色板扩展至140种命名颜色，但十六进制格式仍占据主导地位——时至今日，逾25年后的今天依然如此。
您唯一需要的颜色转换器
无论您是将Figma色板转换为CSS的开发者，连接屏幕与印刷的设计师，还是验证对比度的无障碍测试员——这款免费工具可即时转换所有主流色彩格式，无需服务器调用且不存储任何数据。输入您的颜色，复制所需格式，继续投入创作。