哪个网页输入rgb值后就可以显示出转换的10进制值?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了哪个网页输入rgb值后就可以显示出转换的10进制值?相关的知识,希望对你有一定的参考价值。

参考技术A 恩恩,输入rgb值也可以显示正常的颜色, 如果在代码写rgb就是rgb值,不会自动改为10进制追问

我说的是网页?哪个网页?

追答

哦哦, 理解错了, 不过我取色都是用火狐的colorzilla插件,不知道你是不是用火狐浏览器

参考技术B RGB颜色查询对照表
http://www.supfree.net/search.asp?id=6094

JavaScript之颜色值相互转换十六进制正则rgbtoStringslicetoUpperCasesplitfiltermapparseInt

文章目录


1、前言

两个函数均为做任何输入校验,在真实项目中需自行做输入校验。


2、RGB颜色值转换成十六进制颜色码

function transformationHexadecimal(arr = [7, 7, 7]) 
	let strHex = '';
	
	for (let i = 0; i < arr.length; i++) 
		let hex = '0' + arr[i].toString(16);
		
		hex = hex.slice(-2);
		
		strHex += hex;
	
	
	strHex = strHex.toUpperCase();
	
	return strHex;


console.log(transformationHexadecimal([57, 107, 90]));
// 396B5A

☺☺☺☺☺☺☺

arr在形参中做了默认值处理,这是ES6的写法。其中数组的第一项代表red;第二项代表green;第三项代表blue;也就是所谓的rgb
第一步:在函数顶部定义一个字符串类型的变量,名称为strHex
第二步:使用for循环遍历数组。在for循环里面定义一个字符串类型的变量,名称为hex。循环里的第一行代码使用toString字符串方法把十进制的数字转为十六进制,并且进行补0操作。循环里第二行代码表示通过字符串的slice方法获取上一行操作的倒数两个字符。循环里第三行代码是简单累加操作。
第三步:使用toUpperCase方法把strHex变量的值全部转为大写,这里的转大写只针对字母,对数字无效。
最后一步:通过return返回值供外部使用。


3、十六进制颜色码转换成RGB颜色值

function transformationRGB(hex = '396B5A') 
    let regSplit = /([0-9a-fA-F]2)/,
        rgb = hex.split(regSplit);

    rgb = rgb.filter(item => item != "");
    rgb = rgb.map(item => parseInt('0x' + item));

    return rgb;


console.log(transformationRGB('7F7A09'));
// [127, 122, 9]

☺☺☺☺☺☺☺

hex在形参中做了默认值处理,这是ES6的写法。字符串两两分组,共分为三组,第一组是39,代表red;第二组是6B,代表green;第三组是5A,代表blue。由这三组数据组成了rgb的颜色值,需要写一个程序把它们转换成对应的rgb值。
函数里的第一行代码表示定义一个正则表达式集合,正则集合的意思是匹配从0f的值,字母不区分大小写,并且限制了只匹配两个字符。
函数里的第二行代码使用split方法结合正则集合两两分割字符串为数组,这里得到的数组存在空字符。
函数里的第三行代码使用filter方法过滤数组里面的空字符。
函数里的第四行代码使用mapparseInt方法把字符转成十进制,代码运行至此会得到一个纯数字类型的数组,数组的第一项表示red;第二项表示green;第三项表示blue
最后使用return返回rgb的值供外部使用。


4、演示

以上是关于哪个网页输入rgb值后就可以显示出转换的10进制值?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 RGB 输入转换为十进制颜色代码?

在 Python 中将十六进制转换为 RGB 值

详细请教:关于十进制RGB颜色值转换十六进制颜色值的算法

JS弹出框点击获取值后,自动关闭弹出框,然后刷新页面,文本框里里显示选择的信息。

rgba()如何知道RGB颜色是由哪个RGB值经过百分之三十透明过来的?有计算方法吗?

js中如何把RGB颜色转换为16进制颜色