一直都在用的rgba与hex颜色系统你了解过吗？

2024-05-10 13:51:07

rgb与rgba

rgb(255,255,255)

rgb色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。（摘自百度百科）

rgba(255,255,255,0.3)

rgba即在rgb的基础上新增最后一位代表透明度，范围为0 - 1，小数点后保留两位。

hex

#FFFFFF

简单来说hex就是将rgb或rgba的每位转化为对应的16进制来表示。

对于hex,平常最常见的就是3位和6位的，例如：#f1f #ff11ff ，两者表示同一种颜色.即3位是6位的缩写。
因此#ffffff就代表ff,ff,ff 即rgb(255,255,255)。

但其实hex还有4位以及8位的情况，用来表示rgba。例如：#RGBC #RRGGBBCC，
与表示rgb相同，4位hex是8位hex的缩写。比较特殊的一点就是最后1(2)位。用来代表rgba的最后一个值即透明度。以ff为1，00为0.进行百分比运算，因为透明度只支持两位小数。所以相邻的两个数代表同一个透明度。

如:

#7f11e0fd rgba(127, 17, 224, 0.99) rgb(127, 17, 224)

#7f11e0fc rgba(127, 17, 224, 0.99) rgb(127, 17, 224)

hex to rgba

知道两者的区别后，现在让我们来实现一个hexToRgba函数把hex格式转化为rgba格式吧。

/*** @param {string} hex* @return {string}*/
function hexToRgba(hex) {let len = hex.length - 1;const validChar = /^#[a-fA-F\d]+$/.test(hex);const validLength = [3, 4, 6, 8].includes(len);if (!validChar || !validLength) {throw Error('无效的hex')}//删掉#，将hex转换为数组hex = hex.slice(1).split('');function getColor() {let digit = hex.shift();digit += len > 4 ? (hex.shift()) : digit;//通过parseInt转为10进制数return parseInt(digit, 16)}const r = getColor();const g = getColor();const b = getColor();const a = hex.length ? (round(getColor() / 255)) : 1;return `rgba(${r},${g},${b},${a})`
}function round(num) {return Math.round(num * 100) / 100
}

一直都在用的rgba与hex颜色系统你了解过吗？相关推荐

RGBA、ARGB和HEX颜色格式转换javascript实现
RGB指的是格式为(255,255,255)的颜色值 A指的是透明度,大小在0-1之间 HEX是#FFFFFF格式,分别对应RGBA中的数值. RGBA是RGB+A :(255,255,255,1) ...
【转】hex和bin文件格式的区别
hex和bin文件格式的区别 Intel HEX文件是记录文本行的ASCII文本文件,在Intel HEX文件中,每一行是一个HEX记录,由十六进制数组成的机器码或者数据常量.Intel HEX文件经 ...
pythone 打开文件一行_【精品资料】用了这么多年单片机的Hex文件不懂？看这篇就够了...
文/Edward"Hex文件里面究竟存储的是什么内容,为什么将它一顿操作后下载到单片机里面之后就可以使得单片机神奇的按照我们想要的方式工作起来呢?"好奇的你有没有思考过这个问题?今 ...
JS - 将十六进制的颜色值转成rgb、rgba格式
JS - 将十六进制的颜色值转成rgb.rgba格式 /**hex -> rgb* @param {Object} hex*/ export function hexToRgb(hex) {re ...
图像处理术语解释：灰度、色相、饱和度、亮度、明度、阿尔法通道、HSL、HSV、RGBA、ARGB和PRGBA以及Premultiplied Alpha（Alpha预乘）等基础概念详解
☞ ░ 前往老猿Python博文目录 ░ 一.引言由于老猿以前没接触过图像处理,在阅读moviepy代码时,对类的有些处理方法代码看不懂是什么含义,为此花了4天时间查阅了大量资料,并加以自己的理解和 ...
hex和bin文件格式
Hex文件,这里指的是Intel标准的十六进制文件,也就是机器代码的十六进制形式,并且是用一定文件格式的ASCII码来表示.具体格式介绍如下: Intel hex 文件格式 Intel hex 文件常 ...
Hex和Bin的区别
转自:http://blog.csdn.net/spdian/article/details/52963467 HEX文件和BIN文件是我们经常碰到的2种文件格式.因为自己也是新手,所以一直对这两个文 ...
RGBA颜色与兼容性的半透明背景色
一.周末的唠唠叨叨这周真是辛苦的一周,很多事情不得已都拖着,比如现在这篇文章早前几天前就应该完工了:关于vertical-align属性的下集还没有开始写,jQuery在线参考内容添加还没有做,CS ...
jflash下载.hex文件
1.打开jflash,出现如下界面新建工程,开始使用jflash. 2.选择对应芯片,接口,默认的速度看情况修改(可能会照成能连接成功,但是不能擦除芯片和编程) 3.导入需要下载的.hex文件 4. ...

最新文章

热门文章