将RGB转换为HEX颜色转换器
输入红色,绿色和蓝色值,即可立即获取 CSS 和设计工具的 HEX 代码. 支持 0 - 255 范围. 免费的网页设计颜色转换器.
解释RGB和HEX颜色系统
在RGB(红色,绿色,蓝色) 和美国(十六进制) 是两种表示相同颜色的方法 -- 它们只是使用不同的标记系统. 两种描述颜色的方法是混合三个主要的光色 (红色,绿色,蓝色) 在不同的强度. 了解这两种系统对于网页设计,CSS,图形设计,摄影编辑和数字艺术至关重要.
在RGB模型每个三个频道 (红色,绿色,蓝色) 的强度值从0到255.0表示没有那种颜色;255表示最大强度.在255上混合所有三个就得到白色 (rgb(255,255,255).0上的所有三个就得到黑色 (rgb(0,0,0).每个频道有256个可能的值和3个频道,RGB可以表示2563=16,777,216种不同的颜色 (约1670万).
在HEX模型,相同的三个通道均以2位十六进制数字 (00到FF) 表示,前 为#.十六进制使用数字0 - 9和字母A - F,其中A=10,B=11,C=12,D=13,E=14,F=15.十六进制中的FF = 15x16 + 15 = 255在十进制中.所以#FFFFFF = r(gb255,255,255) = 白色.转换纯粹是基数变化:十进制 (基数10) 到十六进制 (基数16).
如何将RGB转换为HEX:一步一步
将每个RGB频道转换为六进制需要除以16并将分数和余数表示为六进制数字:
- 取频道值 (0 - 255)
- 分于16:分数=第一个六进制数字,余数=第二个六进制数字
- 如果它们是 10 - 15 (A - F)
- 组合:第一个数字 + 第二个数字 = 2 个字符的六进制值
- 对于G和B频道重复
- 连接: # + R_hex + G_hex + B_hex
例如:将rgb{255, 99, 71) 转换为hex (番茄红).
- R=255: 255÷16=15 剩余 15 -> F + F -> FF
- G=99:99÷16=6 余 3 -> 6 + 3 -> 63
- B=71: 71 ÷ 16=4 余 7 -> 4 + 7 -> 47
- 结果:#FF6347
| 十进制 | ÷16 分数 | 剩余部分 | 一个魔鬼 |
|---|---|---|---|
| 0 | 0 | 0 | 00 |
| 16 | 1 | 0 | 10 |
| 一百二十八 | 8 | 0 | 80 |
| 一百六十 | 10 (A) 其他 | 0 | A0 |
| 在200 | 12 (C) 在 | 8 | C8 |
| 其他 | 14 (E) 在 | 14 (E) 在 | EE |
| 255 其他 | 15 (F) 其他 | 15 (F) 其他 | FF |
常见的网络颜色:RGB和HEX参考
以下是最常用的网页颜色的综合参考表:
| 颜色名称 | 美国 | 在RGB | 使用案例 |
|---|---|---|---|
| 白色的 | #FFFFFF 在 | rgb ((255,255,255) 年) | 背景,黑色的文字 |
| 黑色的 | #000000 没有 | rgb(0,0,0) 时间 | 文字,高对比的背景 |
| 红色 | #FF0000 在 | rgb ((255,0,0)) 其他 | 警报,错误,停止信号 |
| 石灰 | #00FF00 没有 | rgb(0,255,0) 时间 | 成功指标 |
| 蓝色的 | #0000FF 在 | rgb ((0,0,255)) 在 | 链接,主要颜色 |
| 黄色的 | #FFFF00 时间 | rgb ((255,255,0)) 其他 | 警告,亮点 |
| 色的 | #00FFFF 在 | rgb ((0,255,255) 年) | 突出,现代用户界面 |
| 红色的 | #FF00FF 在 | rgb ((255,0,255)) 其他 | 突出,突出显示 |
| 色的 | #FFA500 时间 | rgb ((255,165,0)) 其他 | 呼吁采取行动,能源 |
| 紫色的 | #800080 没有 | rgb ((128,0,128)) 其他 | 奢 品,创造力 |
| 灰色 | #808080 年 | rgb ((128,128,128) 没有 | 用户界面元素,中性 |
| 海军 | #000080 年 | rgb ((0,0,128)) 在 | 专业的,值得信赖的 |
| 西红 | #FF6347 在 | rgb{255,99,71) 其他 | 温暖的红色,食物应用 |
| 珊瑚 | #FF7F50 (英语: | rgb{255,127,80) 没有 | 设计友好,温暖 |
| 红茶色 | #008080 年 | rgb ((0,128,128)) 在 | 专业,平衡 |
在CSS和Web设计中使用RGB和HEX
CSS接受多种颜色格式.HEX和RGB是最常见的,但现代CSS也支持HSL,命名颜色,以及更新的oklch和oklch颜色空间,用于更广泛的光谱显示.
在CSS中,颜色可以指定为:
color: #FF6347;(HEX) 在color: rgb(255, 99, 71);(RGB) 在color: rgba(255, 99, 71, 0.5);(RGB+α透明度,0=透明,1=不透明)color: hsl(9, 100%, 64%);(色彩, 和度,轻度)color: tomato;(CSS命名的颜色)
HEX 代码也可以用 3 个字符的缩写写成,当每对都是重复的数字时: #FF0000 = #F00, #FFFFFF = #FFF, #336699 不能缩短. 缩写缩短了输入时间的一半,并支持所有浏览器.
为了设计的一致性,现代设计系统 (材料设计,尾风CSS,Bootstrap) 使用预定义的颜色调板,表示为HEX代码.例如,尾风CSS提供22个颜色家族,每个颜色有10个阴影 (灰-100到灰-900),所有这些都在配置文件中指定为HEX代码.
RGBA和阿尔法透明度
RGBA为RGB添加了一个第四个频道:阿尔法,控制透明度.阿尔法值从0 (完全透明,不可见) 到1 (完全不透明,没有透明度).分数值产生半透明的颜色.
一些例子:rgba(0, 0, 0, 0.5)是半透明的黑色 (像一个半透明的覆盖).rgba(255, 255, 255, 0.8)是80%不透明的白色.它被广泛用于覆盖效果, 玻璃UI元素和浮动状态突出显示.
在现代CSS中,HEX与阿尔法: 8个字符的六进制代码,最后2个字符指定alpha. #FF6347CC将是Tomato,其不透明度为80% (六进制的CC=204的小数;204/255~0.8).这个格式是在CSS颜色4级规范中引入的,并且在所有现代浏览器中都支持.
对于人类来说,RGBA的等价比较简单:rgba(255, 99, 71, 0.8) vs #FF6347CC您使用的格式取决于个人喜好和工具 - 设计工具如Figma通常以HEX显示和导出,而CSS预处理器 (Sass,Less) 经常使用RGBA以提高可读性.
设计师的色彩理论基础知识
了解RGB颜色模型与了解颜色理论并存.添加色彩模型颜色是通过添加光来创造的. 混合R+G+B在全强度 = 白色 (全部光). 这与减色 (颜料/打印) 相反, 混合所有颜色 = 黑色.
补充色彩在 RGB 中,红色 (FF0000) 和蓝色 (00FFFF) 是互补的 - - 注意,蓝色的 RGB 是红色的位向反面 (0,255,255 与 255,0,0). 同样,蓝色和黄色,绿色和红 色. 配对在并排时会产生最大的对比度和视觉振动.
颜色和 指导选择合适配合的颜色:类似 (在轮上相邻),三元 (三种相等距离的颜色),分割补充和四元 (四种颜色形成一个矩形).这些关系有助于设计师创建有意和视觉平衡的调色板.
可访问性和对比度:WCAG (网络内容可访问性准则) 要求文本和背景之间的最小对比率为4.5: 1对于普通文本,3: 1对于大型文本.对比率是根据RGB值的相对亮度计算的.许多在线工具检查WCAG的合规性 - - 这对视力低下或色盲的用户来说非常重要.
在RGB之外的颜色空间:HSL,HSB,CMYK
RGB并不总是选择颜色的最直观的系统.替代色彩空间对于不同的用例可能更实用:
| 颜色模型 | 组成部分 | 最好的 | 在 |
|---|---|---|---|
| 在RGB | 红色,绿色,蓝色 (每个为0 - 255) | 屏幕显示,网络 | CSS,显示器,摄像机 |
| 美国 | #RRGGBB (与RGB相同) | 网站开发 | CSS,HTML,设计工具 |
| 美国 | 颜色 (0 - 360度), 和度 (%),轻度 (%) | 直观的设计调整 | CSS,设计工具 |
| HSB/HSV | 颜色, 和度,亮度/值 | 选择颜色的用户界面 | 摄影师,插画师 |
| 在CMYK | 蓝色,红色,黄色,黑色 | 印刷设计 | 在设计中,打印工作流程 |
| 潘通公司 | 标准化的颜色代码 | 品牌的一致性 | 物理产品,印刷 |
HSL特别适合设计者:色调选择颜色 (0度=红色,120度=绿色,240度=蓝色), 和控制颜色的生动度 (0%是灰色,100%是纯色),亮度控制亮度 (0%是黑色,50%是纯色,100%是白色).只调整亮度,同时保持色调和 和恒定,就能创建一个连贯的颜色尺度 - - 这对于创建标签颜色的悬浮状态,禁用状态和色调/阴影非常有用.
人们常问的问题
我如何手动将RGB转换为HEX?
将每个通道 (0 - 255) 转换为 2 位数的六进制:将第一个数字除以 16,使用剩余的第二位数 (其中 10 - 15 = A - F).在 # 之后连接所有三个结果. 例: rgb(128, 0, 255) -> 128=80, 0=00, 255=FF -> #8000FF (紫色).
白色的HEX代码是什么?
#FFFFFF. RGB中的白色是 (255,255,255) -- 三个通道的最大强度. 在六进制中,255=FF. 所以白色是#FF+FF+FF=#FFFFFF. 三个字符的缩写是#FFF.
我可以在CSS中使用RGB吗?
是的,CSS可以接受两者.rgb(255, 128, 0)以及#FF8000它们产生相同的结果. RGB有时是可读性更好; HEX是简洁. RGBA增加了透明度:rgba(255, 128, 0, 0.7)70%是不透明的 色.
HEX 和 RGB 的区别是什么?
它们以不同的符号表示相同的信息.RGB使用三个十进制数字 (0 - 255).HEX使用三个二位数十进制值 (00 - FF).HEX更紧 (7个字符 vs 15+) 是CSS和设计工具中的主导格式.它们之间的转换是准确的 - 没有信息丢失.
为什么HEX使用基数16?
基数16 (十六进制) 方便地将8位值 (0 - 255) 编码为2个字符.两个十六进制数字分别表示4位,总共为8位=1字节.三个RGB字节 (24位) 成为6位字符的十六进制代码.这种紧 性和与计算机二进制的对齐是为什么十六进制是计算中的标准.
什么是8位数的HEX代码 (如#RRGGBBAA)?
一个8个字符的HEX代码包括一个alpha通道作为最后2位数字 (00=透明,FF=不透明). #FF6347CC = 番茄在~80%的不透明度 (CC六进制=204十进制;204/255~0.8). 支持在所有现代浏览器.不如RGBA符号,但相当于.
什么颜色具有相同的RGB值?
当R=G=B时,结果总是灰色的阴影. rgb(0,0,0) = 黑色, rgb(128,128,128) = 中等灰色 (#808080), rgb(255,255,255) = 白色. 灰色范围从#000000到#FFFFFF通过等级灰色值.
颜色对比如何影响可访问性?
WCAG 2.1 要求普通文本与背景之间的对比率为 4.5:1 (大文本和用户界面组件为 3:1).对比率是从相对亮度计算出来的,它是从 RGB 值得出的.未能满足对比要求使得视力低下或在明亮照明条件下用户无法访问内容.
什么是HSL,它与HEX有什么关系?
HSL (Hue, Saturation, Lightness) 是一种替代的CSS颜色模型,旨在为人类提供更直观的设计.hsl(0, 100%, 50%)是纯红色 = #FF0000. 通过使用颜色模型转换计算HSL的RGB值,然后将RGB转换为HEX. CSS直接支持HSL,因此您可以在不转换的情况下使用它.
我可以从设计工具中的颜色选择器得到HEX代码吗?
是的.所有主要的设计工具 (Figma,Adobe XD,Photoshop,Sketch,Canva) 在点击颜色时显示HEX代码.在Figma中,点击属性面板中的填充颜色以查看和复制HEX代码.在Photoshop中,颜色选择器窗口显示HEX在底部.浏览器DevTools (检查元素 -> 样式) 也显示可以更改为HEX格式的颜色值.
颜色可访问性和对比度
网页可访问性准则 (WCAG 2.1) 规定了文本和背景颜色之间的最小对比比,以确保低视力或色盲的用户可读性.大约8%的男性有某种形式的色视力缺陷 (色盲),使可访问的色彩选择成为专业网页设计的伦理和法律要求.
两种颜色之间的对比率是从它们的相对亮度计算出来的:对比率 = (L1 + 0.05) / (L2 + 0.05),其中L1是较浅的颜色的亮度,L2是较深的颜色.相对亮度是通过 马校正公式从RGB值得出的:对于每个频道值v = V/255,如果v <= 0.03928则线性=v/12.92,否则线性= ((v+0.055)/1.055) ^2.4.然后L = 0.2126xR + 0.7152xG + 0.0722xB.
最低对比要求:AA级要求正常文本为4.5:1 (低于18pt或14pt粗体) 和大文本为3:1.AAA级要求正常文本为7:1和大文本为4.5:1.最常见的失败是白色背景上的浅灰色文本 (#999999在白色上只有2.85:1的比率,失败了AA) 和黑色背景上的深色文本.
| 文字和背景组合 | 对比率 | WCAG AA正常 | WCAG AA 大型 |
|---|---|---|---|
| 黑色000/白色FFF | 时间: 21:1 | 通过 | 通过 |
| 黑蓝色#003366 / 白色 | 12.2:1 时间 | 通过 | 通过 |
| 中等灰色#767676 / 白色 | 4.54:1 其他 | 通过 | 通过 |
| 浅灰色#999 / 白色 | 2.85:1 其他 | 失败 | 失败 |
| 黄色 #FFFF00 / 白色 | 美国 | 失败 | 失败 |
| 白色#FFF/深蓝色#003366 | 12.2:1 时间 | 通过 | 通过 |
构建一个色调板:从HEX到设计系统
专业的色调板通常包括一个主要的品牌颜色,次要的重点颜色,中性灰色和语义颜色 (成功绿色,警告 珀色,错误红色,信息蓝色).每个基本颜色需要多种阴影来实现不同的UI状态.
从#3B82F6 (Tailwind的蓝-500) 这样的品牌颜色开始,你可以通过在HSL空间中调整亮度来推导出10个阴影的尺度:蓝-50 (#EFF6FF,非常明亮),蓝-100 (#DBEAFE),到蓝-900 (#1E3A5F,非常暗).设计令牌然后将这些阴影映射到语义用途:主要按 -bg =蓝-600,主要按 -hover =蓝-700,主要按 -文本 =白等.
在构建品牌颜色系统时,请考虑:60-30-10规则-- 60% 主色 (通常是中性色),30% 副色,10% 凸显色.确保所有文本组合通过WCAG AA对比度.在不同的照明条件和设备屏幕下测试颜色.考虑暗模式 (可能需要不同的阴影值来保持对比度).在代码中设计好的颜色系统是8 - 15个HEX值,可以一致覆盖所有用例.
设计和营销中的色彩心理学
颜色唤起心理和情感反应,使颜色选择成为品牌和用户界面设计的战略决策.颜色心理学研究 (虽然有时在流行文化中被夸大) 为设计有效的视觉体验提供了有用的一般指导方针.
红色 (#FF0000范围):能量,紧迫性,激情,危险.用于销售 ("销售!"标志通常是红色的),紧急警报,停止信号和食品品牌 (可口可乐,麦当劳,肯德基 - 红色刺激食欲并创造紧迫性).高对比度的红色非常适合当你想要立即的用户行动时的行动号召.
蓝色 (#0000FF范围):信任,专业,稳定,冷静.金融和技术品牌 (Facebook,Twitter/X,LinkedIn,PayPal,IBM,三星) 中的主导颜色.研究表明,蓝色是全球最喜欢的颜色跨文化.浅蓝色传达开放和友好;深色海军传达权威和专业知识.
绿色 (#00FF00范围):自然,健康,增长,成功 (美国的钱).在健康/健康品牌,金融应用 (绿色显示的积极回报),环境组织和"开始"信号中大量使用.像#28A745 (Bootstrap成功绿色) 这样的中调在UI中信号积极状态而不具有攻击性.
黄色/ 色范围:乐观,精力,创造力,警告.黄色是非常可见的 (建筑标志,出租车),但很难作为白色的文本来读取. 色 (#FFA500范围) 经常用于行动号召 - 它是可见的和充满活力的,没有红色的紧迫性/危险内涵.
| 颜色家族 | 典型的HEX范围 | 情感上的关联 | 品牌示例 |
|---|---|---|---|
| 红色 | #CC0000 - #FF6666 这是一个很大的问题. | 紧迫性,精力,食欲 | 可口可乐,Netflix,YouTube |
| 蓝色的 | #003399 - #66AAFF 这是一个很大的问题. | 信心,冷静,专业精神 | 通过Facebook,LinkedIn和PayPal |
| 绿色 | #006600 - #66FF66 没有 | 自然,健康,生长 | 整体食品, Spotify,星巴克 |
| 色的 | #CC5500 - #FFAA44 | 能量,创造力,热情 | 亚马逊,哈雷-戴维森公司 |
| 紫色的 | #440088 - #AA66CC 没有 | 奢 ,智慧,创造力 | 卡德伯里,霍尔马克,Twitch |
| 黑色的 | #000000 - #333333 没有 | 精致,强大,优雅 | 果,香奈儿,耐克 |
在流行设计工具中使用颜色
每个主要的设计工具都有自己的颜色工作流程.了解如何在工具中高效地使用HEX和RGB可以在专业设计工作中节省大量时间.
图片:点击任何填充元素 -> 属性面板显示填充颜色 -> 点击颜色样本打开选择器.您可以直接输入HEX值或切换到RGB,HSL或HSB模式.Figma还通过单独的不透明度字段和RGBA符号支持不透明度.在Figma和CSS之间复制/粘贴HEX代码,无需转换.
在Adobe Photoshop:打开颜色选择器 (前景/背景颜色方块). 选择器的底部显示文本字段中的HEX代码. 右键点击颜色样本以添加到您的调色板. 滴眼工具样本屏幕上的任何颜色 - 滑鼠在信息面板中查看其HEX代码.
浏览器开发工具:检查任何元素 -> 样式面板显示CSS颜色值 -> 点击任何颜色属性的旁边的颜色样本以打开内联选择器. DevTools可以显示颜色为HEX,RGB,HSL或命名 - 点击颜色预览以循环通过格式. 这对于现有网站的逆向工程设计决策是非常宝贵的.
VS代码:在CSS文件中,颜色装饰器 (彩色方块) 显示在HEX和RGB值旁边. 悬停显示选择器. 配色扩展为所有颜色格式添加颜色预览. 像Emmet这样的缩写c:f扩展到color: #fff;对于常见的颜色.
使用此RGB到HEX转换器
输入红色,绿色和蓝色通道值 (每个值在0到255之间).转换器显示HEX颜色代码,即可粘贴到CSS,HTML或任何设计工具中. 0 - 255以外的值会自动 紧.转换器还显示反向操作:输入HEX代码以检索RGB分解.当设计工具给你一个RGB值,但CSS样式表使用HEX格式时,或在使用不同格式的不同应用程序之间复制颜色时,使用此工具. HEX代码输出包括直接粘贴到CSS颜色属性的领先#符号.所有1670万个RGB颜色组合映射到一个独特的6个字符的HEX代码,没有模糊或圆形.