前端JS 实现将24位RGB颜色转换16位RGB颜色

最新推荐文章于 2024-01-10 21:45:41 发布

Love丶伊卡洛斯

最新推荐文章于 2024-01-10 21:45:41 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签：前端 javascript rgb

本文链接：https://blog.csdn.net/Ikaros_521/article/details/122318657

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文介绍了如何将24位RGB颜色转换为16位RGB颜色，通过右移位操作来压缩颜色位数。提供了一个在线测试的HTML页面，用户可以输入24位RGB颜色值，页面会自动转换并显示16位RGB结果。代码中包含了输入验证、颜色值转换和位移操作等关键步骤。

摘要由CSDN通过智能技术生成

前言

因为在做LCD设置颜色的时候，我的TFTLCD屏只支持16位RGB，但是web获取的颜色是24位RGB甚至还有透明度，先忽略透明度，那么就需要一个转换工具，没找到，就自己写了个。
原理参考：如何将24位RGB颜色转换16位RGB颜色
0xFF0000 转为 0xF800
核心就是 11111111 00000000 00000000
8位R值右移3位，变为了5位：11111
8位G值右移2位，变成了6位：000000
8位B值右移3位，变成了5位：00000
最后拼接回去 1111 1000 0000 0000
OK，那么直接上效果和代码

在线测试

码云pages

效果图

在这里插入图片描述

源码

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>24位RGB转16位RGB</title>
<style>
	body {
		text-align: center;
		padding: 10%;
		font-size: 28px;
	}

	input {
		width: 30%;
		height: 28px;
		margin: 10px;
		font-size: 28px;
	}

	button {
		font-size: 28px;
		width: 50%;
		margin: 20px;
	}
</style>
<script>
	function rgb_24_to_16() {
		var in24 = document.getElementById("in").value;
		var str = "";

		// 正则校验
		var pattern = /#?[a-zA-Z0-9]{6}/;
		if(!pattern.test(in24) || in24.length > 7) {
			alert("输入长度不为6或7，请输入如：'#000000' 或 'FFFFFF'");
			return;
		}

		if(in24.length == 7) {
			// 裁掉#
			in24 = in24.substr(1, 6);
			str = "#";
		}

		// 裁剪RGB
		var r = in24.substr(0, 2);
		var g = in24.substr(2, 2);
		var b = in24.substr(4, 2);
		console.log("裁剪后16进制 r:" + r + " g:" + g + " b:" + b);

		// 16进制转10进制
		r = parseInt(r, 16);
		g = parseInt(g, 16);
		b = parseInt(b, 16);
		console.log("转10进制 r:" + r + " g:" + g + " b:" + b);

		// 移位
		r = r >> 3;
		g = g >> 2;
		b = b >> 3;
		console.log("第一次移位后 r:" + r + " g:" + g + " b:" + b);

		// 恢复高位 相加
		r = r << 11;
		g = g << 5;
		console.log("第二次移位后 r:" + r + " g:" + g + " b:" + b);
		var rgb = r + g + b;
		console.log("十进制rgb:" + rgb);

		// 十进制转十六进制
		rgb = rgb.toString(16);
		console.log("十六进制rgb:" + rgb);

		// 结果回显 rgb前补0
		document.getElementById("out").value = str + rgb.padStart(4, '0');
	}
</script>
</head>

<body>
	<div>
		<span>原理参考：https://blog.csdn.net/baidu_26678247/article/details/65629447</span>
	</div>
	<div>
		<span>24位RGB:</span>
		<input type="text" id="in" placeholder="请输入如：'#000000' 或 'FFFFFF'"/>
	</div>
	<div>
		<span>16位RGB:</span>
		<input type="text" id="out" placeholder="结果输出" />
	</div>
	<div>
		<button type="button" onclick="rgb_24_to_16()">转换</button>
	</div>
</body>
</html>

Love丶伊卡洛斯

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端JS 实现将24位RGB颜色转换16位RGB颜色

前言因为在做LCD设置颜色的时候，我的TFTLCD屏只支持16位RGB，但是web获取的颜色是24位RGB甚至还有透明度，先忽略透明度，那么就需要一个转换工具，没找到，就自己写了个。原理参考：如何将24位RGB颜色转换16位RGB颜色0xFF0000 转为 0xF800核心就是 11111111 00000000 000000008位R值右移3位，变为了5位：111118位G值右移2位，变成了6位：0000008位B值右移3位，变成了5位：00000最后拼接回去 1111 1000 0000
复制链接

扫一扫