title: "颜色转换器:正确的方式转换 HEX、RGB、HSL、HWB 和 CMYK" slug:颜色转换器-引导工具:颜色转换器类别:颜色类型:集群
颜色转换器:正确转换 HEX、RGB、HSL、HWB 和 CMYK
Color bit me第一次在print run上,我已经为我的一款WordPress产品搭建了一个登陆页面,在浏览器中签下了品牌blue,然后将相同的"blue"发送到印刷店购买一批贴纸,回来的是一个平坦的,略带灰色的海军蓝,看起来与屏幕完全不一样,没有人将RGB屏幕颜色转换为CMYK,所以打印机猜测,猜测是错误的那一天,我不再将颜色视为单个字符串,而是开始将其视为一个值,必须同时用多种语言使用。
这正是颜色转换器的用途,您在一种语法中赋予它颜色,并且它会将您每种其他语法都交还给您,因此您的 CSS 中的蓝色、设计文件中的蓝色以及打印机接收到的蓝色都可证明是相同的颜色。我构建了 Toolz.dev 上的颜色转换器 因为我厌倦了将十六进制代码粘贴到三个不同的站点中以分别获取 RGB、HSL 和 CMYK。
TL;博士: Color转换器取一种颜色,并一次用HEX,RGB,HSL,HWB,CMYK重新表达,加上最近的CSS颜色名称,屏幕使用RGB和HEX,HSL或HWB当你想用手轻推一种颜色,CMYK打印工具z。dev转换器完全在你的浏览器中运行,保持alpha通道完好无损,永远不要上传你粘贴的内容。
什么是颜色转换器?
颜色转换器解析用任何常见 CSS 语法编写的颜色,并计算其他语法中的等效项。哪些语法存在,以及每个语法的具体转换方式是由 CSS 颜色模块 4 级.数学不复杂,但手工做,繁琐,易出错.转换 #4466EE to RGB,就是把六個十六進位分成三對,把每對讀成一個以16為基數的數字: 44 是68, 66 是 102,并且 EE 是238,给予 rgb(68, 102, 238).反其道而行,就是把每个通道分成一个两位数的十六进制字符串,然后加入它们,到HSL就是规范通道,从那些中找到最小和最大,计算色调,饱和度和轻度,你不想在凌晨2点在脑海里做。
Converster 的值不只是保存算术,它是在保证一致性,当一个工具从单一解析的颜色产生所有格式时,你复制的 RGB 和你复制的 HSL 没机会描述略有不同的颜色,因为你在步骤之间舍入了一个来源,一个真理,每一种格式。
为什么颜色格式甚至存在?
每种颜色格式都得以保留,因为它真正擅长一项工作。
RGB就是屏幕的工作方式,一个显示器发出红、绿、蓝光,以不同的强度混合那三种光会产生你看到的每一种颜色,这使得RGB成为浏览器的母语:无论你在CSS中写什么语法,渲染引擎都会在它点亮像素之前将其解析为RGB。
HEX 的速记为 RGB。 #4466EE 是相同的 rgb(68, 102, 238)的, 只是装进一个紧凑的字符串, 容易粘贴到样式表或设计工具中, 流行是因为它简短而明确, 而不是因为它更能干。
HSL 描述的是色调、饱和度、轻度的一种颜色,是我手调 UI 时所达到的格式,要使悬停时按钮变暗,我将轻度降低几个点,而不要让色调和饱和度在原始 RGB 中尝试这样做,这意味着通过不等量改变所有三个通道,并希望色调不会漂移。
HWB,在CSS色彩模块4级规范中定义(https://www.w3.org/TR/css-color-4/),用多少白和多少黑混合来描述相同的色调,它可以干净地映射人们实际如何看待色调和色调:添加白色来淡化,添加黑色来变暗,它更新,所以我主要在代码的可读性比浏览器更重要时使用它。
CMYK是打印模型,打印机在白纸上铺设青色、品红色、黄色、黑色墨水,每种墨水都减光而不是加光,这就是为什么鲜艳的屏幕颜色在纸上看起来更暗淡的原因:两种模型可以产生的颜色范围,称为gamuts,不同的转换器给你CMYK近似值,但它不能发明不存在的墨水。
如何将 HEX 转换为 RGB 并返回?
最常见的转换是大幅转换,即 HEX 到 RGB 以及 RGB 到 HEX。这是手动方法,以便您可以理智地检查任何工具,包括我的工具。
HEX转换为RGB,把六位数字拆成三对,每对读成从0到255的十六进制数,三位速记法喜欢 #46E 通过将每个数字加倍来扩展 #4466EE first。rgb转换为hex,取每个通道值,如果需要的话转换为前导为零的两位十六进制字符串,然后将它们加入到散列后面。
与其重复执行此操作,不如将值粘贴到 颜色转换器 并一次阅读每种格式。如果您还需要直观地选择一种颜色并查看其实时更新,则 颜色选择器 是更好的起点,并且这两个工具共享相同的转换核心,因此它们的数字一致。
我应该什么时候使用 CMYK 而不是 RGB?
CMYK只有在输出是纸上墨水时使用,名片,贴纸,包装,以及任何商业打印工作都期望CMYK值,而将RGB发送到打印机意味着打印机或其软件为您转换,通常带有您未签名的结果那是我的贴纸错误的一句话。
RGB,以及它的HEX速记,用于任何将在屏幕上显示的内容:网站,应用程序,社交图形,视频如果一个项目跨越两个世界,保持RGB或HEX作为你的真理来源,并在你交出打印的那一刻用转换器生成CMYK近似值,这样你就可以观察CMYK值,并标记任何颜色,它会发生严重变化,然后你就需要打印运行。
颜色格式如何比较?
| 格式 | 最好的 | 阿尔法支持 | 例子 |
|---|---|---|---|
| 十六进制 | 紧凑型CSS,设计切换 | 8位数的形式只有 | #4466EE |
| RGB/RGBA | 屏幕,编程颜色 | 是(RGBA) | rgb(68, 102, 238) |
| HSL/HSLA | 手调色调和轻盈度 | 是(HSLA) | hsl(228, 83%, 60%) |
| HWB | 可读色调和色调 | 是(带斜杠阿尔法) | hwb(228 27% 7%) |
| CMYK | 印刷,墨水在纸上 | 否 | cmyk(71%, 57%, 0%, 7%) |
该表值得记住,因为它可以整齐地映射到工作流程上:使用 HEX 进行设计或视觉选择,使用 HSL 或 HWB 进行调谐,使用 RGB 或 HEX 传输到屏幕,并且仅在打印边界处转换为 CMYK。
透明度如何在格式之间传播?
Alpha 是很多转换悄悄出错的地方, alpha 通道控制不透明度, 从 0(全透明)到 1(全不透明), RGBA 和 HSLA 将其作为第四个值, 一个 8 位 HEX 将其作为第四对: #4466EECC 那是蓝色吗,不透明度大约为 80%,因为 CC 是 204 分(满分 255 分)。普通 HEX 和 cmyk() 根本没有 alpha 通道。
Toolz。dev转换器通过支持它的每一种格式来保存alpha。如果你粘贴 rgba(0, 0, 0, 0.5) 你得到 #00000080 在 HEXA 行中 hsla(0, 0%, 0%, 0.5) HSLA行中,都描述了相同的半透明黑色,当你复制普通的HEX或CMYK行代替时,你是在复制完全不透明的颜色,这是一个故意的选择,而不是一个错误:那些格式不能表达不透明,所以它们显示的颜色就好像它是固体一样,当透明度很重要时,从一个alpha感知行复制。
CSS颜色名称可以转换吗?
Yes,而且双向工作。键入关键字如 tomato、 rebeccapurple、或者 slategray 转换器将其解析为 HEX、RGB、HSL、HWB 和 CMYK。全套 148 种命名颜色来自 CSS Color Module Level 4 规范,因此这些值与浏览器解析的内容完全匹配。
换个方法是它真正有用的地方粘贴数字颜色,如果匹配,转换器会报告确切的 CSS 名称,如果不匹配,则始终显示 RGB 距离的最接近的命名颜色。最接近的匹配对于命名变量和编写可读设计文档很方便: #663399 回来作为 rebeccapurple并且接近它的东西会返回为 "最近:rebeccapurple"所以你知道你所在的社区是什么。
这如何适应真正的设计工作流程?
以下是我实际在项目中使用颜色的方式以及每个工具的适合位置。
我首先选择原色,通常在视觉上使用 颜色选择器。一旦我有了我的品牌蓝色,我就把它贯穿了 颜色转换器 将 HEX、RGB、HSL 和 CMYK 值锁定在一个地方,然后我将这些值粘贴到设计系统中 doc 中,以便每个队友和每个供应商都使用相同的数字进行工作。
然后我构建调色板。支撑色调来自 HSL 中轻推的亮度,我用。 颜色对比度检查器 因此,调色板可以在发货前访问,而不是在投诉后访问。当我需要背景繁荣时,我将其中两种颜色输入 梯度生成器。
最后,为了围绕所有颜色进行响应式间距和排版,我将调色板与调色板配对 CSS 钳形生成器 so size 比例平滑如颜色一致,颜色与佈局是同一抛光的两半。
如果您在工作时关心数据的发展方向,那么值得阅读这些工具如何处理它。颜色转换器中的所有内容都运行客户端,这是我在设计中写到的选择 在线工具中的数据隐私指南它与我日常工具包的其余部分并排 web开发人员工具包。
生产是否足够准确?
对于屏幕工作,是的,没有资格。 HEX、RGB、HSL 和 HWB 都是相同 sRGB 颜色的精确表示,因此在它们之间干净地往返转换:将颜色转换为 HSL 并返回,然后您落在相同的 RGB 三元组上,在通道上给出或取出一个单位的舍入。该舍入是整数通道中连续颜色表示所固有的,而不是任何一种工具中的缺陷。
CMYK来说,把输出当作一个坚实的、标准的近似值,而不是颜色管理的证明,真正的打印颜色取决于你打印机使用的具体纸张、墨水和ICC配置文件,而没有一个基于浏览器的工具可以知道转换器使用标准的朴素CMYK公式,这正是大多数设计工具默认显示的,是一个可靠的起点,当工作是颜色关键时,在完全运行之前从打印机获得物理证明,那就是我的灰海军贴纸教给我的教训,从这一段中学习比从一盒错误的贴纸中学习更便宜。
LAB 和 OKLCH 等较新的色彩空间怎么样?
如果您密切关注您所看到的 CSS lab()、 lch()、 oklab()、和 oklch() stylesheet和设计工具中出现。这些来自css颜色模块level 4规范,它们解决了一个真正的问题:RGB、HSL和HWB都与sRGB屏幕模型绑定在一起,因此两种看起来与眼睛相同不同的颜色可以相距非常不同的数字距离,而广域显示器可以显示sRGB根本无法描述的颜色。OK颜色空间在感知上是均匀的,这使得它们非常适合生成均匀阶梯的调色板和插值中间不泥泞的梯度。
我故意让这个转换器专注于您粘贴到日常生产 CSS 和手持打印机中的格式:HEX、RGB、HSL、HWB 和 CMYK。那是覆盖绝大多数实际任务的集合,并且它们中的每一个都干净地映射到相同的 sRGB 颜色,因此它们之间的转换是精确且可逆的。更广泛的范围空间涉及易于犯细微错误的范围映射决策,并将它们混合到一个简单的转换器中将以清晰度换取大多数人不需要的覆盖范围。
I遵循的实用规则:当你在算法上生成调色板或梯度并且你想要感知上均匀的步骤时,可以达到OKLCH,并且对于编写组件的日常工作,可以保持HEX,RGB和HSL。当你在OKLCH中进行设计时,在切换之前用你的设计工具将生成的锚颜色向下转换为HEX或RGB,因此你的样式表中的值与这个转换器和你的队友可以读取的值相同。
常见问题
如何将 HEX 转换为 RGB?
HEX六位代码拆成三对,分别读作0到255的十六进制数 #4466EE、 44 是68(红色), 66 是 102(绿色),并且 EE 是238(蓝色),给出 rgb(68, 102, 238)。将 HEX 代码粘贴到转换器中,RGB 值会立即与所有其他格式一起出现。
如何将 RGB 转换为 HEX?
将红色、绿色和蓝色值(0 到 255)中的每一个转换为两位十六进制数,并在哈希后加入它们。 rgb(68, 102, 238) 变成 #4466EE。转换器会立即执行此操作,并且当存在 alpha 值时,还会为您提供 8 位 HEXA 表单。
HSL和HWB有什么区别?
HSL以色相、饱和度、轻度来描述颜色,而HWB则以混入多少白色和多少黑色来描述相同的色相,HWB往往对色调和色调更直观:增加白色使颜色变浅,增加黑色使颜色变暗,两者都映射到完全相同的RGB值,因此可以自由切换。
我应该什么时候使用 CMYK 而不是 RGB?
CMYK来进行打印,RGB来进行屏幕,CMYK是以青色、品红色、黄色、黑色墨水为基础的减法模型,所以是商业打印机所期望的,RGB是加法,描述显示器发出的光线,屏幕颜色有CMYK近似值,但两色域不同,因此生动的屏幕颜色在打印中看起来会更暗淡。
转换器支持透明度吗?
是的。通过提供 alpha 值 rgba()、 hsla()的,或者8位HEX,并且不透明度保存在每个α感知输出中。没有α通道的格式,例如普通的HEX和 cmyk()的,显示完全不透明的颜色,因此在透明度重要时检查RGBA或HEXA输出。
CSS颜色名称可以转换吗?
是的。键入 CSS 关键字,例如 tomato、 rebeccapurple、或者 slategray 转换器将其解析为 HEX、RGB、HSL、HWB 和 CMYK。它也反向工作:粘贴数字颜色,如果匹配,它会报告确切的 CSS 名称,加上最接近的命名颜色以供参考。
颜色转换器是免费且私密的吗?
是的。转换器完全免费,没有注册、没有限制、没有水印。所有解析和转换都使用客户端 JavaScript 在浏览器中运行,因此您输入的颜色永远不会离开您的设备,并且一旦页面加载,该工具就会离线工作。
