javascript随机产生RGB颜色和十六进制颜色值

字数: (1251)

阅读: (3584)

摘要：RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色

一、随机产生RGB颜色

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。
该函数可以生成rgb颜色值在css中的表示方式，如果想偏好某种颜色值，可以将其它颜色值的最大值设置的小一些。

/**
 * 随机颜色 RGB
 * @returns {string}
 */
function randomRgb () {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

二、随机产生十六进制的颜色

css中还有一种颜色表示方式是使用十六进制数值来表示rgb三个颜色，格式是 '#FFFFFF'
以下是两种方式:

随机产生rgb三色值，并转化为十六进制，然后拼接起来
直接随机产生6个十六进制字母和数字，然后拼接起来

第一种:

/**
 * 随机颜色 十六进制
 * @returns {string}
 */
function randomHex () {
    var r = Math.floor(Math.random() * 256).toString(16);
    var g = Math.floor(Math.random() * 256).toString(16);
    var b = Math.floor(Math.random() * 256).toString(16);
    r = r.length === 2 ? r : '0' + r;
    g = g.length === 2 ? g : '0' + g;
    b = b.length === 2 ? b : '0' + b;
    return '#' + r + g + b;
}

第二种:

/**
 * 随机颜色 十六进制
 * @returns {string}
 */
function randomHex () {
    var arr = '0123456789abcdef'.split('');
    var len = arr.length;

    var color = '';
    for (var i = 0; i &lt; 6; i++) {
        color += arr[Math.floor(Math.random() * len)];
    }
    return '#' + color;
}

转载请注明出处: 皮哈皮阿

本文的链接地址: https://blog.phpat.com/web/515.html

本文最后发布于2020年09月03日09:26，已经过了1632天没有更新，若内容或图片失效，请留言反馈

扫描二维码，在手机上阅读