🧊

JavaScriptで明るい色だけランダムに

jsの話というより、そういうものがあるんですという話です。

個人のティザーでこういうことしたかったんですよ、こういうの。

参考：Lealog.net

RGBではなくHSLを使う

参考：HSL Color Picker - by Brandon Mathis

  • H: Hue(色相)
  • S: Saturation(彩度)
  • L: Lightness(輝度)

というわけで、ランダムに明るい色だけ欲しいなら、

  • 色相はランダムに
  • 彩度は高めに
  • 輝度も高めに

すればいいってわけですね。

jsで取るなら

var rangeRndm = function(min, max) {
  if (max) {
    return Math.random()*(max-min+1) + min|0;
  } else {
    return Math.random()*min|0;
  }
};

var color = 'hsl(' + rangeRndm(0, 360) + ', 100%, ' + rangeRndm(25, 75) + '%)';

注意点としては、

  • 色相: 0 - 360
  • 彩度: 0 - 100%
  • 輝度: 0 -100%

って指定であることと、輝度を上げすぎると真っ白になっちゃうとこ。
ちなみに、 hsla ももちろん使えます。