JS颜色随机生成（rgb、rgba、十六进制、格式转换）

本文主要是介绍JS颜色随机生成（rgb、rgba、十六进制、格式转换），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

十六进制格式（#000000-#FFFFFF）

function randomHexColor() { //随机生成十六进制颜色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位hex = '0' + hex;}return '#' + hex; //返回‘#'开头16进制颜色
}

 RGB格式

function randomRgbColor() { //随机生成RGB颜色var r = Math.floor(Math.random() * 256); //随机生成256以内r值var g = Math.floor(Math.random() * 256); //随机生成256以内g值var b = Math.floor(Math.random() * 256); //随机生成256以内b值return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
}

RGBA格式

function randomRgbaColor() { //随机生成RGBA颜色var r = Math.floor(Math.random() * 256); //随机生成256以内r值var g = Math.floor(Math.random() * 256); //随机生成256以内g值var b = Math.floor(Math.random() * 256); //随机生成256以内b值var alpha = Math.random(); //随机生成1以内a值return `rgb(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
}

十六进制转为RGB

function hex2Rgb(hex) { //十六进制转为RGBvar rgb = []; // 定义rgb数组if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数let sixHex = '#';hex.replace(/[0-9A-F]/ig, function(kw) {sixHex += kw + kw; //把三位16进制数转化为六位});hex = sixHex; //保存回hex}if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数hex.replace(/[0-9A-F]{2}/ig, function(kw) {rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组});return `rgb(${rgb.join(',')})`; //输出RGB格式颜色} else {console.log(`Input ${hex} is wrong!`);return 'rgb(0,0,0)';}
}

RGB转为十六进制

function rgb2Hex(rgb) {if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGBvar hex = '#'; //定义十六进制颜色变量rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字kw = parseInt(kw).toString(16); //转为十六进制kw = kw.length < 2 ? 0 + kw : kw; //判断位数，保证两位hex += kw; //拼接});return hex; //返回十六进制} else {console.log(`Input ${rgb} is wrong!`);return '#000'; //输入格式错误,返回#000}
}

这篇关于JS颜色随机生成（rgb、rgba、十六进制、格式转换）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---