颜色转换器，免费

五种不同的方式命名同一个像素

处理 HEX、RGB、HSL、HSV 和 CMYK 的转换器涉及五种相当不同的描述同一感知现象的方式。它们由不同的人在不同的十年里为不同的机器以不同的优先级发明。将一个值从一种符号转换到另一种符号看起来像是琐碎的算术,表面上通常确实如此,但历史解释了为什么每种符号存在,数学解释了为什么它们之间的往返并不总是无损的。

HEX,sRGB 三元组的 16 进制简写

十六进制颜色符号在工作站和图形文件格式上早于 CSS 几年,但其在 Web 上的普遍含义由 W3C 于 1996 年 12 月 17 日发布的 CSS1 推荐标准确定。CSS1 是 Håkon Wium Lie 和 Bert Bos 的工作:Lie 于 1994 年 10 月在 CERN 提出了层叠样式表,Bos 于 1995 年 7 月在 INRIA 加入项目。在 CSS 之前,HTML 1.0 根本没有颜色概念,其最初的 18 个标签集严格地是结构性的。十六进制颜色是一个三字节(或四字节,带 alpha)整数,浏览器将其分为红、绿和蓝通道。6 位形式 #RRGGBB 给每个通道一个 8 位值,0-255,以两个十六进制位编码。3 位简写 #RGB 与每个数字加倍的 6 位形式完全等价,因此 #F0A 和 #FF00AA 是相同的颜色。CSS Color Module Level 4 正式添加了带 alpha 通道的 4 位(#RGBA)和 8 位(#RRGGBBAA)形式,其中 00 完全透明,FF 完全不透明。浏览器支持在 Chrome 62、Firefox 49、Safari 10 和 Edge 79 中登陆,因此到 2026 年基本是普遍的。Hex 受欢迎是因为它简短、可复制粘贴且明确,background: #1e90ff 在 Figma、VS Code、Slack 和电子邮件之间复制/粘贴而无需任何人考虑空格或逗号。

RGB,Maxwell 的三色原理,数字化

「RGB」理念,即眼睛看到的任何颜色都可以通过混合控制量的三种原色光来匹配,早于彩色摄影。James Clerk Maxwell 在他 1855 年的论文「Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness」中首次提出,该论文递交给爱丁堡皇家学会。六年后,1861 年 5 月 17 日,Maxwell 公开演示了这一原理:他让摄影师 Thomas Sutton 拍摄一条苏格兰格纹丝带的三张黑白照片,每张通过红、绿或蓝色滤镜拍摄,然后通过相同的滤镜将三张照片投影回屏幕上。叠加的投影产生了一个可识别的彩色图像,这是世界上第一张通过加色合成的彩色照片。从此 Maxwell 的加色 RGB 成为每一个电子显示器的基础。现代 Web RGB 特别意味着 sRGB,即由 Hewlett-Packard 和 Microsoft 于 1996 年提出的「标准 RGB」颜色空间(作者 HP 的 Michael Stokes 和 Ricardo Motta,Microsoft 的 Matthew Anderson 和 Srinivasan Chandrasekar),并标准化为 IEC 61966-2-1:1999。动机很平淡:早期的 Web 需要一种足够简单可以默认假设的颜色空间,足够稳健以便在便宜的 CRT 上看起来可接受,并且足够小以不会膨胀图像文件。二十五年后,它仍然是每个浏览器、每个 JPEG 和每个不携带嵌入式 ICC 配置文件的 PNG 的默认工作空间。在 CSS 中,RGB 写作 rgb(255, 0, 153)(传统逗号语法)或 rgb(255 0 153)(现代空格分隔,根据 CSS Color Level 4)。

HSL 和 HSV,Alvy Ray Smith 的感知轴

RGB 对硬件非常出色(显示器实际上有红、绿和蓝子像素),但对人类直觉无用。没有人会通过推理他们想要「多十二单位绿色和少七单位红色」来调整 Web 设计。设计师以色相(哪种颜色)、饱和度(多么生动)和明度(多么明亮)的术语思考。这个转换由 Alvy Ray Smith 在他的 SIGGRAPH 1978 论文「Color Gamut Transform Pairs」中形式化,发表在 1978 年 8 月的 Computer Graphics 第 12-19 页。Smith 当时在纽约理工学院计算机图形实验室,之前在 Xerox PARC 工作。论文指出,RGB-到-HSV 变换在发表时已经在帧缓冲绘画程序中「成功使用了大约四年」,Smith 记录的是工作实践,而不是从头发明。他在 1990 年因「HSV(也称为 HSB)颜色空间模型」等贡献共同获得 SIGGRAPH 计算机图形成就奖。HSL 和 HSV 共享一个色相轴(角度,0°-360°,绕着色轮:0° 红、120° 绿、240° 蓝)和一个饱和度轴(0% 灰到 100% 纯),但它们的第三轴不同。HSV(色相、饱和度、亮度)将 V 视为 RGB 通道的最大值,纯白需要 V=100% 和 S=0%,纯红是 V=100%, S=100%;白色和红色都位于圆柱体的顶部。HSL(色相、饱和度、明度)将 L 视为最亮和最暗通道的中点,纯白是 L=100%(无论 S 如何),纯红是 L=50%, S=100%;白色位于圆柱体的顶部,最生动的颜色位于赤道。HSL 特别为 CSS 选择,因为它在 L=50% 周围的对称性与设计师思考色调和阴影的方式相匹配。

CMYK,印刷者的减色模型

虽然显示器发射光(加色:更多 = 更亮,三者都满 = 白),但墨水吸收光(减色:更多 = 更暗,三者都满 = 黑,理论上)。四色印刷,青色、品红、黄色,加上一个黑色「key」板,在 1890 年代首次商业用于彩色报纸插图。Eagle Printing Ink Company 通常被认为是 1906 年第一个真正的四色湿墨工艺。「K」来自「key」(对齐所有其他的板,传统上是黑色细节板),而不是来自「black」,这就是为什么模型是 CMYK 而不是 CMYB。key 板存在有四个实际原因:在真实墨水中混合 100% C、M 和 Y 产生浑浊的深棕色,而不是真正的黑色,因为真实颜料不是完全纯净的;三色黑浪费墨水并减慢干燥;湿的三色黑使纸张起皱和撕裂;以及文字和精细轮廓需要单个高对比度板以保持清晰。

转换数学,简而言之

HEX ↔ RGB 是琐碎的,将十六进制字符串分成三个两字符子字符串,并用 parseInt(hex, 16) 将每个解析为 base-16 整数;用 n.toString(16).padStart(2, '0') 反转。RGB → HSL 是 max/min 数学:色度 = max(R,G,B) − min(R,G,B);明度 = (max + min) / 2;饱和度 = 色度 / (1 − |2L − 1|);色相通过分段公式计算,该公式选择主导通道并将其位置转换为色相圆的六个 60° 扇区之一中的角度。(一些实现使用 atan2,但 Smith 1978 年的论文出于性能原因故意避免三角学,atan2 在 1970 年代的帧缓冲器上是一个昂贵的指令,分段公式因为它给出相同答案更快而保留下来。)HSL → RGB 通过分段线性映射反转过程,其中色度和偏移将色度三元组转换为明度轴上的正确点。RGB ↔ HSV 使用相同的骨架,但具有不同的垂直轴:V = M 而不是 L = (M+m)/2,以及 S = Δ/M 而不是明度感知的除数。RGB ↔ CMYK 使用简单公式 K = 1 − max(R,G,B),然后 C、M、Y 为 (1 − 通道 − K) / (1 − K)。这在数学上是自洽的,但不描述任何真实印刷机将如何再现颜色,请参见下面的印刷警告。

往返问题

将 #7A3D5C(HEX)→ HSL → HEX 转换。你不一定能得到 #7A3D5C。原因完全是平凡的。整数截断:HEX 通道是 0-255 的整数;HSL 转换产生浮点数;将 (1, 121.987, 47.512) 四舍五入到整数会丢失往返无法恢复的亚像素信息。Float64 不精确:JavaScript 唯一的数字类型是 IEEE 754 双精度二进制浮点数,具有 52 位尾数,给出大约 15-17 位有效十进制数字,足以进行单次转换,但如果你链接许多操作,就会累积。非对称映射:当色度为零时,多个不同的(R,G,B)三元组可以映射到同一个(H,S,L)三元组(任何灰色的色相都是未定义的;约定选择 H = 0 或保留前一个 H)。对于一个务实的浏览器工具,这没问题,用户输入了 #7A3D5C,在 HSL 中看到(322°, 32%, 36%),并得到 #7A3D5C(或 #7A3E5D,偏差一个)。只要显示的色板与眼睛预期的匹配,行程就是好的。但值得诚实:不能保证无损往返。

超越 sRGB 的现代 CSS 颜色空间

几十年来,「Web 颜色」意味着 sRGB,只有 sRGB。这种假设在 2015 年被打破,当时 Apple 推出了 2015 年末的 iMac,作为「第一台具有内置宽色域显示的消费级计算机」,支持 Apple 的 Display P3 颜色空间。P3 起源于 DCI-P3,由数字电影倡议组织于 2005 年为剧院放映定义。Apple 的 Display P3 变体保留了 DCI 的原色,但将白点切换到 D65(与 sRGB 的匹配),并采用了 sRGB 的色调再现曲线,使其适合桌面/移动观看,而不是黑暗的剧院。Display P3 的色域在表面积上比 sRGB 大约 25%,让手机和笔记本电脑可以显示明显更生动的红色和绿色。为了让 CSS 描述 sRGB 之外的颜色,W3C 的 CSS Color Module Level 4 引入了带有显式颜色空间参数的 color() 函数:color(srgb 1 0.5 0.2)、color(display-p3 1 0.5 0.2)、color(rec2020 1 0.5 0.2)。预定义的颜色空间包括 srgb、srgb-linear、display-p3、a98-rgb(Adobe RGB)、prophoto-rgb、rec2020、xyz、xyz-d50 和 xyz-d65。在普通 sRGB 显示器上,色域外的 P3 颜色被色域映射到显示器可以显示的最接近的 sRGB 等价物。

CSS Color Level 4 还添加了 lab()、lch()、oklab() 和 oklch() 一等函数。lab() 和 lch() 使用 CIE 1976 L*a*b* 颜色空间,由国际照明委员会于 1976 年标准化,这是第一个广泛部署的感知均匀颜色空间,具有对应于红绿和蓝黄对色对的 a* 和 b* 轴,这与人类视觉系统实际编码颜色的方式相匹配。2020 年 12 月,瑞典开发者 Björn Ottosson 在他的博客上发表了「A perceptual color space for image processing」并介绍了 Oklab。Ottosson 在游戏行业花了几年时间做简单的颜色操作,得出结论说每个现有的颜色空间在某种程度上都失败了。Oklab 专门为图像处理操作调整:两个 Oklab 颜色之间的渐变保持感知上平滑,Oklab 中的明度调整对人眼来说就像明度调整。圆柱形 OKLCH 是大多数设计师实际编写的形式。Oklab 在博客文章一年后,即 2021 年 12 月,被添加到 CSS Color Level 4 中,现在是实现 Color Level 4 的浏览器中 CSS 渐变的默认插值空间。Tailwind CSS v4 颜色调色板由 OKLCH 坐标生成。color-mix() 函数(CSS Color Module Level 5)在 Safari 16.2(2022 年 12 月)、Chrome 111(2023 年 3 月)和 Firefox 113(2023 年 5 月)中发布,自 2023 年 5 月起在浏览器中基线可用。

颜色理论小史

Web 颜色转换器位于系统地理解颜色 360 年弧线的末端。值得注意的里程碑:牛顿(1665-66)使用玻璃棱镜将阳光分成可见光谱,并在他的 Opticks 中识别了七种颜色。歌德(1810)出版了 颜色理论,这是一篇反牛顿的论文,更感兴趣于颜色的感知和情感维度,而不是其物理学,在科学上是错的,但在感知很重要这一点上是对的。麦克斯韦(1855/1861)如上所述。伊顿(1961)在包豪斯出版了 颜色艺术,编纂了 12 色相色轮和今天仍在设计学校教授的七种颜色对比类型。Pantone(1963)引入了 Pantone 匹配系统(PMS),将设计师和印刷商之间的颜色沟通转化为编号目录,Pantone 编号意味着订阅该系统的世界上任何印刷商都有完全相同的颜色。Web 颜色堆栈继承自所有这些传统:牛顿给我们可见光谱,麦克斯韦给我们加色原色,伊顿给我们互补和类比配色的设计学校词汇,Pantone 给我们一个数字可以代表感知体验的实际事实。

可访问性:在你选择的任何东西上的 WCAG 对比度

一旦你有了颜色,你需要知道是否可以在其上放置文本。WCAG 2.1 成功标准 1.4.3(对比度,最低)要求普通文本的对比度比为 4.5:1和大文本的 3:1(定义为 18pt / 24 CSS 像素普通,或 14pt / 19 CSS 像素粗体)。对比度比从相对亮度计算:(L1 + 0.05) / (L2 + 0.05),其中 L1 是较亮颜色的亮度,L2 是较暗的,亮度是 gamma 解码的 R、G、B 通道的加权和,权重为 0.2126、0.7152 和 0.0722(匹配人眼对这些波长的敏感度)。WCAG 2.1 SC 1.4.6(增强)将标准提高到 7:1 普通 / 4.5:1 大,以符合 AAA 标准。WCAG 2.1 SC 1.4.11 涵盖非文本对比度(UI 组件、焦点指示器、理解所需的图形对象)为 3:1。较新的 APCA(Advanced Perceptual Contrast Algorithm)是一种研究阶段的替代品,它更好地匹配正文文本的感知对比度,并正在为 WCAG 3 评估,它返回一个有方向的 Lc 值,其中 ±60 是 WCAG 的 4.5:1 的粗略等价物。始终根据实际的对比度公式检查颜色对,而不是你的眼睛;设计师始终高估低对比度配对的可读性。

诚实的印刷警告:朴素的 CMYK 不是真正的 CMYK

每个浏览器转换器使用的简单公式 K = 1 − max(R,G,B) 在数学上是自洽的,RGB → CMYK → RGB 的往返返回完全相同的 RGB,模浮点。但它不描述任何真实印刷机将如何在纸上再现该颜色。真正的 RGB-到-CMYK 转换需要这个工具无法提供的三个东西:目标 ICC 配置文件(定义打印机 + 纸张组合,涂层纸吸收墨水与未涂层不同,高端商业印刷机运行的配置文件与桌面喷墨打印机不同)、渲染意图(感知、相对比色、饱和度、绝对比色,它们权衡如何挤压色域外的颜色)和真正的比色模型(CIE Lab 作为设备无关的中间层,每一边都有完整的 ICC 配置文件查找表)。这就是 Adobe Photoshop 在其 CMYK 转换菜单背后所做的,也是专业印前软件(Esko、Heidelberg Prinect、Caldera)为生产工作所做的。朴素公式适合理解加色和减色颜色模型之间的关系,并且对第一遍颜色探索有用,但如果你将文件发送给商业印刷商,请在 Photoshop(或你的印刷商首选的工具)中加载正确的 ICC 配置文件进行转换,可见差异可能是巨大的。

命名颜色和 Rebeccapurple 的故事

CSS3 提供了 147 种命名颜色(如果你算上别名 aqua = cyan,则为 148 种),继承自原始的 16 种 HTML 4 命名颜色和 X11 窗口系统更长列表的混合。最近添加的命名颜色有一个故事。2014 年 6 月 7 日,Web 标准倡导者 Eric Meyer 的女儿 Rebecca 在她六岁生日的第二天死于一种侵袭性脑癌。Rebecca 最喜欢的颜色是紫色。几天之内,由编辑 Tab Atkins Jr. 领导的 CSS 工作组成员提议将 rebeccapurple(#663399)作为命名颜色添加到 CSS Color Level 4 规范中,以纪念她。该颜色在 2014 年 6 月添加,不久后在浏览器中发布。十六进制值被特别选为 Eric Meyer 自己在他的网站上使用过的值。rebeccapurple 现在在每个浏览器的命名颜色表中,是 CSS 规范中唯一的纪念颜色,提醒我们 Web 的干燥技术规范是由注意到他们中的一个人正在哀悼的人写的。

常见问题

我应该在 CSS 中使用哪种格式?

所有三种主要格式都适用于现代 CSS。HEX 是最紧凑且广泛使用的,非常适合静态颜色,你选择了一个值一次,想要将其复制到任何地方。RGB 在你需要以编程方式计算值或处理图像数据时很有用(canvas API 原生使用 RGB)。HSL 在你想创建设计系统颜色变化时最好,在保持色相锁定的同时调整明度或饱和度,这就是 Tailwind 的颜色调色板构建其完整渐变的方式。对于 2026 年的设计系统,OKLCH(在 CSS Color Level 4 中)越来越成为新工作的正确答案,它在任意两种颜色之间感知平滑地插值,这对渐变和平滑渐变生成很重要。

#FFF 和 #FFFFFF 之间有什么区别?

三位十六进制是简写,每个数字都是双倍的:#FFF = #FFFFFF、#09C = #0099CC、#F0A = #FF00AA。两者都是有效的 CSS,但六位形式支持所有 16,777,216 种 sRGB 颜色,而三位形式只支持 4,096 种(每个通道限制为 16 个不同值)。三位十六进制简洁但略受限制;六位是完整的 sRGB 调色板。CSS Color Module Level 4 还定义了四位和八位形式(带 alpha),其中 #F008 扩展为 #FF000088,#F00 扩展为 #FF0000。

我可以转换带透明度(alpha)的颜色吗?

此工具目前专注于不透明颜色。对于 alpha,CSS 支持 rgba(r, g, b, a)、hsla(h, s%, l%, a) 和 8 位十六进制(#RRGGBBAA)作为单独的符号;CSS Color Level 4 还让你可以写 rgb(r g b / a%) 和 hsl(h s% l% / a%),带有斜杠分隔的 alpha。8 位十六进制形式自大约 2017 年起基线可用(Chrome 62、Firefox 49、Safari 10)。

我的 CMYK 转换会与打印机输出的匹配吗?

可能不完全。此工具使用的简单数学是比色自洽的(RGB → CMYK → RGB 返回相同的 RGB),但不考虑你的特定打印机 + 纸张组合的 ICC 配置文件、渲染意图(感知、相对比色等)或印刷机的网点增益特性。对于印刷绑定的工作,在 Photoshop 或你的印刷商首选的工具中加载正确的 ICC 配置文件进行最终的 CMYK 转换,朴素转换和配置文件感知转换之间的可见差异可能是巨大的,特别是对于 CMYK 色域边缘的饱和红色和蓝色。

OKLCH 和现代 CSS 颜色空间怎么样?

现代 CSS 支持 oklab()、oklch()、lab()、lch() 和 color(display-p3 ...) 用于更广色域和感知均匀的颜色工作。这些的浏览器支持自大约 2023 年起基线(Safari 16.4、Chrome 111、Firefox 113 用于 oklch();color() 带命名空间在 Safari 中稍早发布)。它们尚未在此转换器中显示,部分是因为数学难以以紧凑形式显示(Lab 具有不映射到 0-100% 滑块的有符号轴),部分是因为大多数当前生产工作流仍然瞄准 sRGB。如果你在使用 OKLCH 的现代设计系统中工作(例如 Tailwind CSS v4),请使用该系统的工具进行颜色生成;此转换器对遗留 sRGB 工作是正确答案。

我的数据会发送到任何地方吗?

不会。颜色转换是纯算术,服务器无法做你的浏览器做不到的事情。每次转换都在 JavaScript 中本地运行。你可以在更改颜色时在 DevTools 的 Network 标签中验证:没有出站请求。在页面加载后将其离线(飞行模式),转换器仍将工作。

相关工具