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) { //十六进制转为RGB
 var 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 RGB
  var 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
 }
}
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RGBA(Red, Green, Blue, Alpha)是一种用来描述颜色的表示方式,其中红色、绿色和蓝色的分量加上透明度的值共同确定了一个颜色RGBA颜色可以通过将三原色的分量值和透明度的值转换为十六进制表示来进行转换。 具体而言,对于一个十六进制颜色值,例如#RRGGBB,RR表示红色分量的值,GG表示绿色分量的值,BB表示蓝色分量的值,这些值的范围是0到255(或者00到FF)。而透明度的值以十六进制的方式表示为00到FF,其中00表示完全透明(即不可见),FF表示完全不透明(即完全可见)。 要将颜色值从RGBA转换为十六进制颜色,我们可以简单地将红色、绿色和蓝色的分量值以及透明度的值转换为十六进制表示,然后将它们连在一起即可。例如,如果我们有一个RGBA颜色rgba(255, 0, 0, 0.5),那么它的十六进制表示为#FF000080。其中,FF表示红色的分量值255,00表示绿色的分量值0,00表示蓝色的分量值0,80表示透明度的值0.5(转换为十六进制时乘以255)。 相反地,要将一个十六进制颜色转换为RGBA颜色,我们需要将十六进制颜色值拆分为红色、绿色和蓝色的分量以及透明度的值,然后将它们转换为十进制表示。例如,一个十六进制颜色值为#00FF0080,我们可以将它分解为红色分量值00(转换为十进制时为0)、绿色分量值FF(转换为十进制时为255)、蓝色分量值00(转换为十进制时为0)和透明度的值80(转换为十进制时为128)。 通过以上方法我们可以实现RGBA与十六进制颜色的互相转换。如果需要进行这样的转换,可以使用各种在线工具或编程语言中提供的函数来帮助我们进行转换。这些工具或函数可以接受RGBA或十六进制颜色作为输入,并返回转换后的结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值