web-dev-qa-db-ja.com

JavaScriptでランダムなパステル（または明るい）色を生成する方法は？

ボタンをクリックするとランダムに引用されるシンプルなWebサイトを構築しています。これにより、背景色が変化します。問題は、背景色が暗すぎてフォントが黒くなり、その結果、その人が見積もりを読めなくなることです。

私の質問：

明るい色、またはパステル色だけを使用してランダムなカラーコードを作成する方法はありますか？

私はランダムな色を生成するためにこのコードを得ました。 AからFまでの文字列を取得するように編集しようとしましたが、成功しませんでした。

'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

事前にどうもありがとうございました。

javascriptcssrandomcolorsrgb
13
Zzeks

[〜＃〜] hsl [〜＃〜] を使用するのが最も簡単です。 HSLカラー値はCSSで次のように指定されます

hsl( hue, saturation%, lightness%)

ここで、hueは0〜360度の範囲で単位マーカーなしであり、saturationとlightnessは両方ともパーセント記号で、末尾に%記号が付いています。

注意

  • すべての「明るい」色の彩度値は100%で、明度値は50%です。

    色相0▶ HSL saturated color circle ◀色相360

  • すべての色が白と混ざり合い、明度が高くなるにつれて、「パステル」になります。明度値100%は、色相と彩度の値に関係なく、白を作成します。

  • すべての色は、彩度が減少するにつれて灰色と混ざり、彩度の低下に応じて、「ベージュ」または「グレー」になります。

  • すべての色は、明度が減少するにつれて黒と混ざります。明度の値が0％の場合、色相と彩度の値に関係なく黒が作成されます。

例：saturationが範囲25-95%およびlightness85-95%の範囲内：

function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}
34
traktor53

色相のみをランダム化することで、より高速になります。

[〜＃〜] hsla [〜＃〜] 色はで構成されています色相、彩度、明度、およびアルファ

例、必要に応じて調整される明度（3番目の値）。

function randomHSL(){
    return "hsla(" + ~~(360 * Math.random()) + "," +
                    "70%,"+
                    "80%,1)"
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()
<button id="rdm">Random pastel color!</button>

または同様に：

function randomHSL(){
    return `hsla(${~~(360 * Math.random())},70%,70%,0.8)`
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()
<button id="rdm">Random pastel color!</button>
4
NVRM

Rgbを使用してbackground-colorプロパティを適切に設定することで、明るい色の中から選択できます。
rgb（0,0,0）は黒、rgb（255,255,255）は白です。したがって、255に近い（ただし、255以下）のランダムな値を使用できます。
例（JQueryを使用）：

 var Rand = Math.floor(Math.random() * 10);
 var colorQ = "rgb(" + (215 - Rand * 3) + "," + (185 - Rand * 5) + "," + (185 - Rand * 10) + " )"; 
 $("body").css("background-color", colorQ);

好みの色が見つかるまで値をいじることができます。3つのRGB値が互いに近ければ近いほど、色が灰色に近づくことに注意してください。例えば。 rgb（100,100,100）、rgb（221,221,221）およびrgb（133,133,133）はすべて灰色の濃淡です。何が変わるかはあなたの灰色がどれほど明るいかです。

1
Bob