2013-06-27 8 views
0

Я читал здесь вопросы о том, как генерировать случайные цвета в JS/JQuery. Но я хочу генерировать только темные цвета, избегая цветов черного, желтого и серого цвета, чтобы иметь возможность рисовать области на картах Google с разными цветами.как генерировать только темные случайные цвета в javascript?

Благодаря

+0

Итак, вы хотите генерировать * случайные * темные цвета? Или затемнить выбранный пользователем цвет? Или что? – MaxArt

+0

Вы должны удалить верхнюю половину ярких цветов. Вы можете сделать это, замаскировав цвет с помощью 50% серого или # 7F7F7F –

+0

Извините, темные цвета –

ответ

3
var hue = Math.floor(Math.random() * 360), 
    saturation = Math.floor(Math.random() * 100), 
    lightness = Math.floor(Math.random() * 50), 
    color = "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)"; 

Это было генерировать случайный цвет HSL. Но если вы хотите затемнить существующий цвет rgb, лучше всего перевести его в hsl, а затем установить его значение яркости в соответствии с вашими потребностями. Веселитесь с этими функциями:

function rgbToHsl(r, g, b) { 
    var maxRGB = Math.max(r, g, b), 
     minRGB = Math.min(r, g, b), 
     tmp, h, s, l; 
    tmp = maxRGB - minRGB; 
    l = (maxRGB + minRGB)/255; 
    if (tmp) { 
     s = Math.round(tmp/(l < 1 ? l : 2 - l))/255; 
     if (r === maxRGB) h = (g - b)/tmp; 
     else if (g === maxRGB) h = 2 + (b - r)/tmp; 
     else h = 4 + (r - g)/tmp; 
     h = (h < 0 ? h + 6 : h)*60 % 360; 
    } else h = s = 0; 
    l /= 2; 
    return [h, s, l]; 
} 
function hslToRgb(h, s, l) { 
    if (!s) return r = g = b = l*255; 
    var q = l < .5 ? l*(1 + s) : l + s - l*s, 
     p = 2*l - q; 

    for (var i = 120, t, c = []; i >= -120; i -= 120) { 
     t = h + i; 
     if (t < 0) t += 360; 
     else if (t >= 360) t -= 360; 
     if (t < 60) c.push(p + (q - p)*t/60); 
     else if (t < 180) c.push(q); 
     else if (t < 240) c.push(p + (q - p)*(240 - t)/60); 
     else c.push(p); 
    } 
    return [c[0]*255, c[1]*255, c[2]*255]; 
} 

Здесь s и l колеблется от 0 до 1, r, g и b от 0 к 255 и h от 0 к 359.

1

Сначала определите диапазоны RGB: do хотите, и после того, как вы их определяете, просто генерируйте случайные значения в этих диапазонах. Или определите диапазоны, которые вы не хотите, и продолжайте цикл до тех пор, пока не найдете цвет, который соответствует этим критериям, намного менее эффективный, но немного легче запрограммировать, если эффективность не является проблемой.

1

В чем проблема? Просто сгенерируйте 3 случайных числа, возможно, в диапазоне от, скажем, от 30 до 150, так что вы получите только относительно низкие значения для R, G и B и блокируете «черные цвета». Тогда вам просто нужно проверить, попадают ли эти три значения в диапазон определенных вами черных списков, таких как желтый или серый.

0

Согласно duplicate взято из комментария jj__?

function getGMapRandomColor() { 
    return 'hsla(' + Math.floor(Math.random()*360) + ', 100%, 70%, 1)'; 
} 
0

Для простоты реализации и тщательности, я не могу рекомендовать этот сценарий достаточно высоко:

David Merfeld's randomColor

Выберите между шестнадцатеричным или RGB, добавить в некотором альфа, указать темные или светлые палитры, избегать повторов и т. д.