任何颜色都是由三种最基本的颜色叠加形成的，这三种颜色称为三基色,三基色是“红”、“绿”、“蓝”三种颜色;
在网页上要指定一种颜色，就要使用RGB模式来确定，方法是分别指定R/G/B，也就是红/绿/蓝三种基色的强度，通常规定，每一种颜色强度最低为 0，最高为255，并通常都以16进制数值表示，那么255对应于十六进制就是FF，并把三个数值依次并列起来 ，以#开头。
十六进制 转 rgb/rgba
- 获取十六进制颜色代码的左 2 位数字，并转换为十进制值以获得红色级别。
- 获取十六进制颜色代码的 2 个中间数字，并转换为十进制值以获得绿色级别。
- 获取十六进制颜色代码的 2 位正确数字，并转换为十进制值以获得蓝色级别。
function hexToRgb(hex, weight) {
var reg = new RegExp("^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$"); let color = hex ? hex.toLowerCase() : hex; if (color && reg.test(color)) {
if (color.length === 4) {
let temp = "#"; for (let i = 1; i < 4; i += 1) {
temp += color.slice(i, i + 1).concat(color.slice(i, i + 1)); } color = temp; } var colorRes = []; for (let i = 1; i < 7; i += 2) {
colorRes.push(parseInt("0x" + color.slice(i, i + 2))); } if (weight) {
return "rgba(" + colorRes.join(",") + "," + weight + ")"; } return colorRes.join(","); } else {
return color; } } 讯享网
rgb 转 十六进制
讯享网function rgbToHex(rgb) {
let rgbArr = rgb.split(","); let r = parseInt(rgbArr[0].split("(")[1]); let g = parseInt(rgbArr[1]); let b = parseInt(rgbArr[2].split(")")[0]); // <<: 位操作符,1<<24是 把1左移24位, let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); return hex; } console.log(rgbToHex("rgb(225,125,205)"));
rgba 转 十六进制
function rgbaToHex(rgba) {
let values = rgba .replace(/rgba?\(/, "") .replace(/\)/, "") .replace(/[\s+]/g, "") .split(","); let a = parseFloat(values[3] || 1), r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255), g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255), b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255); return ( "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2) ); } console.log(rgbaToHex("rgba(225,125,205, 0.55)"));
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/42758.html