HEX(十六进制颜色值)
HEX是Hexadecimal的缩写,是Web开发中最常用的颜色表示方式。它使用十六进制数(0-9和A-F)来表示RGB三个颜色通道的亮度值,格式为#RRGGBB,其中RR、GG、BB分别是红、绿、蓝通道的两位十六进制数,取值范围00(0)到FF(255)。例如#FF5733表示红色通道满亮度(255)、绿色通道中等亮度(87)、蓝色通道偏低亮度(51)。HEX颜色的优点是简洁紧凑,一个字符串即可表达颜色,适合在CSS、设计工具和配置文件中使用。
RGBA颜色模型
RGBA是在RGB颜色模型基础上增加Alpha(透明度)通道的颜色表示方式。格式为rgba(R, G, B, A),其中R、G、B是0-255的整数,A是0-1之间的小数表示透明度。0表示完全透明,1表示完全不透明。例如rgba(255, 0, 0, 0.5)表示50%透明度的红色。RGBA在CSS3中被广泛支持,是实现半透明效果的标准方式。与HEX相比,RGBA的优势在于透明度控制更直观(0-1小数比00-FF十六进制更容易理解),且所有现代浏览器完美支持。
Alpha通道
Alpha通道是RGBA颜色模型中的第四个通道,用于表示颜色的透明度或不透明度。在数字图像处理中,Alpha通道的概念最早由Alvy Ray Smith在1976年提出,后来被广泛应用于计算机图形学和Web开发。Alpha值的范围取决于表示方式:在RGBA函数中为0到1的小数(0=完全透明,1=完全不透明),在8位HEX中为00到FF的十六进制(00=完全透明,FF=完全不透明)。两种表示的转换关系为:HEX_Alpha = round(小数Alpha × 255)。
8位HEX(#RRGGBBAA)
8位HEX是在标准6位HEX基础上扩展了2位Alpha通道的颜色格式,完整格式为#RRGGBBAA。前6位RRGGBB表示颜色的RGB值,后2位AA表示透明度(00=完全透明,FF=完全不透明)。例如#FF000080表示约50%透明度的红色。8位HEX在Chrome 62+、Firefox 49+、Safari 10+等现代浏览器中已被支持,但在IE系列浏览器中不兼容。它的优势是用一个紧凑的字符串同时表达颜色和透明度,适合在设计系统和配置文件中使用。
Alpha Blending(Alpha混合)
Alpha Blending是计算机图形学中用于将前景颜色与背景颜色按透明度进行混合的标准算法。其核心公式为:结果 = 前景色 × α + 背景色 × (1 - α),对R、G、B每个通道分别计算。这个公式也称为线性插值(Linear Interpolation),它假设前景色和背景色之间存在线性的视觉过渡。Alpha Blending被广泛应用于图像合成、UI渲染、游戏图形等领域。在Web开发中,CSS的rgba()颜色和8位HEX颜色的渲染底层都使用了这个算法。
3位HEX简写(#RGB)
3位HEX简写是CSS规范中定义的颜色紧凑表示法,格式为#RGB,每个字符自动重复一次扩展为6位标准格式。例如#F80扩展为#FF8800(F→FF, 8→88, 0→00),#A3C扩展为#AA33CC。这种简写方式只能表达4096种颜色(16³),远少于6位HEX的1677万种(16⁶),但对于快速原型开发和简单配色已经足够。3位HEX在所有支持CSS的浏览器中都被支持,是手写CSS代码时常用的便捷写法。
RGB颜色模型
RGB(Red-Green-Blue)是一种基于加色混合原理的色彩模型,通过红、绿、蓝三种原色光的不同强度组合来产生各种颜色。在数字显示中,每个像素由红、绿、蓝三个子像素组成,每个子像素的亮度由0-255的值控制。当三个通道都为0时显示黑色,都为255时显示白色。RGB模型被广泛应用于显示器、电视屏幕、投影仪等发光显示设备。在Web开发中,CSS的rgb()和rgba()函数使用的就是RGB颜色模型。
透明度(Opacity/Transparency)
透明度是描述对象视觉可穿透程度的属性。在颜色模型中,透明度通过Alpha通道来表达。需要注意"透明度"和"不透明度"的区别:透明度(Transparency)是对象的可穿透程度(0%为完全不透明,100%为完全透明),而不透明度(Opacity)是对象的遮挡程度(0%为完全透明,100%为完全不透明)。CSS的opacity属性使用的是不透明度概念,而rgba()和8位HEX中的Alpha值也表示不透明度。在本工具中,透明度滑块的百分比对应的是不透明度——100%表示完全不透明,0%表示完全透明。
线性插值(Linear Interpolation)
线性插值是一种数学方法,用于在两个已知值之间按比例估算中间值。在颜色混合中,线性插值公式为:结果 = 起始值 × (1-t) + 结束值 × t,其中t是插值系数(0到1之间)。当t=0时结果为起始值,t=1时结果为结束值,t=0.5时结果为两者的中间值。Alpha Blending本质上就是对RGB三个通道分别进行以Alpha值为系数的线性插值。线性插值假设视觉上的颜色过渡是均匀的,虽然人眼对不同颜色的感知并非严格线性,但这种近似在大多数Web场景中已经足够精确。
CSS颜色格式
CSS(Cascading Style Sheets)中定义了多种颜色表示格式,每种格式有不同的特点和适用场景。#RRGGBB(6位HEX)是最简洁的纯色表示法;#RRGGBBAA(8位HEX)在纯色基础上增加了透明度支持;rgb(R, G, B)和rgba(R, G, B, A)使用十进制数值,可读性更好;#RGB(3位HEX)是最紧凑的写法;hsl(H, S%, L%)和hsla(H, S%, L%, A)基于色相-饱和度-亮度模型,适合色彩理论相关的操作。选择合适的颜色格式需要考虑可读性、兼容性、是否需要透明度等因素。
UD5工具箱