将HEX转换为RGB的颜色转换器

什么是HEX颜色代码?

HEX颜色代码是一个六个字符的字母和数字字符串,用于网页设计和数字图形来表示特定的颜色.该格式遵循图案#RRGGBB每个双字符对使用十六进制符号 (基16),编码三种附加原色之一的强度 - - 红色 (RR),绿色 (GG) 和蓝色 (BB).每个对从00(零强度) 到FF(最大强度,相当于255的小数点)

HEX 代码起源于在 HTML 和 CSS 中定义颜色的需要,而无需依赖命名的颜色关键字.而 CSS 现在支持多种颜色格式,包括rgb(), hsl(),以及oklch()在前端开发,设计交付和品牌指南中,HEX仍然是最广泛使用的符号.几乎Figma,Sketch,Adobe Photoshop和Canva等工具中的每个颜色选择器都会默认显示HEX值.

六位数HEX代码可表示的唯一颜色总数为16,777,216 (256 x 256 x 256).这通常被称为"真色"或"24位色",与大多数现代显示器的颜色深度相匹配.每个频道得到8位 (一个字节),三个频道一起产生24位颜色数据.

HEX代码对大小写不敏感,所以#ff8000以及#FF8000一些样式指南更喜欢大写的可读性,而CSS minifiers通常输出小写以保存字节 - 虽然在实践中差异是可以忽略不计的.

如何一步一步将HEX转换为RGB

将HEX颜色代码转换为其RGB等价很简单.该过程涉及将六个字符串分割成三对,并将每个对从十六进制 (基数 16) 转换为十进制 (基数 10).以下是逐步方法:

1. 删除哈希符号.如果HEX代码以#举个例子,#1A2B3C成为1A2B3C.
2. 分成三对.将剩余的字符串分为两个字符的三个组:1A, 2B, 3C.
3. 将每个对转换为十进制.使用十六进制位数系统,将第一个数字乘以16并加上第二个数字:
   • 红色:1A-> (1 x 16) + 10 =26
   • 绿色:2B-> (2 x 16) + 11 =43
   • 蓝色:3C-> (3 × 16) + 12 =60
4. 写下 RGB 的值.组合三个小数值:rgb(26, 43, 60).

十六进制数字及其十进制等值是:0=0,1=1,2=2,3=3,4=4,5=5,6=6,7=7,8=8,9=9,A=10,B=11,C=12,D=13,E=14,F=15. 记住从A到F是唯一不同于标准十进制算法的部分.

对于编程转换,大多数语言都提供了内置的函数.parseInt("1A", 16)返还26在Python中,int("1A", 16)因此转换主要是当你需要在代码中操纵单个颜色通道时有用的 - - 例如,调整亮度,编程创建渐变或混合两种颜色.

三位数和六位数的HEX代码

CSS支持一个缩写的3位数HEX格式 (#RGB) 作为方便,当每个三对都由相同的数字组成时.在这种缩写中,每一个单一的数字都是通过加倍扩展的.例如:

• #F80扩展到#FF8800-> rgb ((255, 136, 0) 在
• #FFF扩展到#FFFFFF- - rgb{255,255,255} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
• #000扩展到#000000-> rgb ((0, 0, 0) 在
• #09C扩展到#0099CC-> rgb ((0, 153, 204) 在
• #A3F扩展到#AA33FF-> rgb{170,51,255) 没有

三位数标记将可用的颜色数量从1670万减少到4,096 (16 x 16 x 16),因此它不能代表每种颜色.它最常用于简单或众所周知的颜色在CSS文件中,简洁度很重要.

CSS还支持4位数字 (#RGBA) 和8位数 (#RRGGBBAA) 包含一个alpha (透明度) 通道的HEX代码.alpha值遵循相同的十六进制逻辑:FF是完全不透明的,00是完全透明的.例如,#FF880080表示颜色rgb(255, 136, 0)我们的转换器专注于标准的3位和6位格式; 如果你输入一个带有α频道的代码, 它只会处理RGB部分.

HEX 到 RGB 的参考表

下面是常见的HEX颜色及其RGB等价的参考表.该表涵盖了网页设计中最常用的颜色,CSS命名的颜色和流行的品牌调色板选择.

CSS总共定义了 147 种命名颜色,每个颜色都有相应的 HEX 值.虽然命名颜色对于原型设计很方便,但专业项目通常依赖 HEX 或 RGB 值来实现浏览器和设计工具的精度和一致性.

流行品牌颜色 - HEX 和 RGB 值

开发人员和设计师经常需要用于模型,整合和风格指南的热门品牌颜色的精确HEX和RGB值.下面是一些最常被请求的品牌颜色的快速参考:

品牌指南通常以多种格式 (HEX,RGB,CMYK,Pantone) 指定颜色.在CSS中实现品牌颜色时,始终根据官方品牌资源页面确认值,以确保准确性.颜色在屏幕之间可能略有变化,因此代码的一致性至关重要.

颜色模型比较:HEX,RGB,HSL和CMYK

了解何时使用每种颜色模型有助于您在不同工具和媒体上更有效地工作:

HEX 和 RGB 在数学上是相同的.--它们使用不同的符号表示相同的颜色空间.它们之间的转换是简单的基础-16到基础-10转换,没有精度或光谱差异的损失.另一方面,HSL是将RGB转换为圆柱形坐标系统,使其更容易独立地推理色调, 和轻度.CMYK是印刷中使用的减法颜色模型,不能代表所有RGB颜色 (反之亦然),因此RGB和CMYK之间的转换是近似的.

在现代的CSS (第四级) 中,color()功能和新的颜色空间如oklch()以及display-p3不过,HEX和RGB仍然是Web兼容性的基准,并且在今天使用的每个浏览器中都支持.

在CSS和JavaScript中使用HEX和RGB

在CSS中,HEX和RGB值都是有效的,并且产生相同的结果.以下是如何使用每个格式的实用示例:

CSS声明:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

JavaScript 的转换函数:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

在使用HTML Canvas API时,通常必须将颜色设置为字符串."#FF8000"以及"rgb(255, 128, 0)"工作的fillStyle以及strokeStyle然而,getImageData()该方法将像素数据返回为0 - 255整数 (RGBA) 的数组,使RGB成为像素级操作的自然格式.

在CSS自定义属性 (变量) 中,为了简单化,通常会存储HEX值:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

这种将原始RGB频道值存储为CSS变量的模式是一种流行的技术,它允许您在运行时动态应用不透明度,而无需在格式之间转换.

可访问性和颜色对比性

将HEX转换为RGB通常是计算可访问性合规性颜色对比率的第一步.Web内容可访问性准则 (WCAG) 要求最低对比率为4.5:1 时间对于普通文本和时间: 3:1对于大型文本 (18px+粗体或24px+普通).

对比率公式需要相对亮度每种颜色的线性RGB值.步骤如下:

1. 将 HEX 转换为 RGB (0 - 255 每个频道).
2. 将每个通道正常化为0 - 1通过除以255.
3. 应用 sRGB 线性化公式:如果值 <= 0.04045,则除以 12.92;否则计算 ((值 + 0.055) / 1.055) ^ 2.4.
4. 计算亮度:L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
5. 计算两个颜色之间的对比: (L1 + 0.05) / (L2 + 0.05),其中L1是较浅的颜色.

正如您所看到的,RGB值是每个可访问性对比度计算的基本输入.像WebAIM对比度检查器,Chrome DevTools颜色选择器和斧头可访问性扫描器这样的工具都在内部进行这种转换.

对于设计师来说,一个简单的规则是:在浅色背景上的深色文本 (或反之亦然) 的亮度差异至少为125,颜色差异至少为500 (使用R,G,B频道的绝对差异之和) 通常会通过WCAG AA标准.