Question

我有这种方法为我生成随机颜色：

function getRandomRolor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++) {
         color += letters[Math.round(Math.random() * 15)];
     }
     return color;
}

问题是字体总是在白色背景上，我想生成深色有可能吗？
谢谢

Answer 1

将0-5中的任意随机数字作为颜色的第一位数字，然后使用上面的代码选择五位数的其余部分。

JS小提琴：http://jsfiddle.net/xP5v8/

var color,
       letters = '0123456789ABCDEF'.split('')
function AddDigitToColor(limit)
{
    color += letters[Math.round(Math.random() * limit )]
}
function GetRandomColor() {
    color = '#'
    AddDigitToColor(5)
    for (var i = 0; i < 5; i++) {
        AddDigitToColor(15)
    }
    return color
}

Answer 2

如你所知，0,0,0处的RGB是最暗的黑色，直到（255,255,255）变亮，所以你可以阻止它超过100，只能得到深色或者说是十六进制的颜色：

Here is jsFiddle

function getRandomRolor() {
    var letters = '0123456789'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 10)];
    }
    return color;
}

Answer 3

您可以使用带有十六进制的自定义函数，并按百分比lum使其变暗。您可以修改它以返回您想要的任何内容

function ColorLuminance(hex, lum) {
  // validate hex string
  hex = String(hex).replace(/[^0-9a-f]/gi, '');
  if (hex.length < 6) {
    hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
  }
  lum = lum || 0;

  // convert to decimal and change luminosity
  var rgb = "#", c, i;
  for (i = 0; i < 3; i++) {
    c = parseInt(hex.substr(i*2,2), 16);
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
    rgb += ("00"+c).substr(c.length);
  }

  return rgb;
}

您也可以使用hsl（休，饱和度，亮度或亮度）。 hsl链接实际上是通过上面的代码。

Answer 4

// seperate array by index
// [0, 1, 2, 3], 2 => [2, 3, 1, 0]
function tail(arr, ind){
    let mhs, lhs;
    if(arr.length / 2 > ind){
        mhs = arr.length - 1 - ind;
        lhs = ind;
    }else{
        mhs = ind;
        lhs = arr.length - 1 - ind;
    }
    let nd = [arr[ind]];
    for(let i = 0; i < lhs; i++){
        nd.push(arr[ind+i+1]);
        nd.push(arr[ind-i-1]);
    }
    for(let i = 0; i < mhs - lhs; i++){
        nd.push(arr[i]);
    }
    return nd;
}

// yield optimization
// 6=>6 6=>3
// 5=>5 5=>3
// 4=>4 4=>2
// 3=>3 3=>2
// 2=>2 2=>1
// 1=>1 1=>1
// 21   12
function dense(len, den){
    let st = Math.ceil(len / den);
    let nd = [];
    for(let i = 0; i < st; i++){
        for(let j = 0; j < den; j++){
            nd.push(st - i);
        }
    }
    if(len % 2 !== 0){
        nd.shift();
    }
    return nd;
}

// shift the weight to certain part of array by index
// de controls the rate of differing
function shift_weight(arr, ind, de){
    let ta = tail(arr, ind);
    let nd = [];
    let den = dense(arr.length, de)
    for(let i = 0; i < ta.length; i++){
        for(let j = 0; j < den[i]; j++){
            nd.push(ta[i]);
        }
    }
    return nd;
}

function parseDarkHex(den){
  let hexcode = '0123456789abcdef';
  let ocean = shift_weight(Array.from({length: 16}, (x, i) => hexcode[i]), 0, den);
  return '#' + Array.from({length: 6}).map(ud=>ocean[Math.floor(Math.random() * ocean.length)]).join('');
}

function parseLightHex(den){
  let hexcode = '0123456789abcdef';
  let ocean = shift_weight(Array.from({length: 16}, (x, i) => hexcode[i]), 16, den);
  return '#' + Array.from({length: 6}).map(ud=>ocean[Math.floor(Math.random() * ocean.length)]).join('');
}

// 2~8, the smaller the more accurate, the larger the faster
console.log(parseDarkHex(4))

// #51baaa
// #046d1c
// #003183

这允许存在较大的十六进制值（例如f, c, b等），但发生率较低。

1500个字节供您使用。但是效果很棒！

Javascript - 生成随机深色

4 个答案: