Help us understand the problem. What is going on with this article?

カラーコードのランダム生成で注意すること

More than 3 years have passed since last update.

JavaScriptでカラーコードをランダムに生成して表示するコードを書いたら、なんかやたらと白い。

let r = Math.floor(Math.random() * 255).toString(16);
let g = Math.floor(Math.random() * 255).toString(16);
let b = Math.floor(Math.random() * 255).toString(16);
let color = '#' + r + g + b;

image.png

よくよく調べてみると、白くなっているところのカラーコードは#412bfのようになってました。
16進数に変換した結果が1桁である数値がrgbのいずれかに含まれている場合に、カラーコードの仕様を満たさず、白になってしまっていたようです。

以下のようにして解決。

let r = ('0' + Math.floor(Math.random() * 255).toString(16)).slice(-2);
let g = ('0' + Math.floor(Math.random() * 255).toString(16)).slice(-2);
let b = ('0' + Math.floor(Math.random() * 255).toString(16)).slice(-2);
let color = '#' + r + g + b;

rgbの各値に0を頭につけてslice(-2)で後ろ2文字をとることで強制的に2桁にしています。

image.png

rgbで書く方法

@yama-t 様からのコメントで以下のようにrgbの形式を使うと、桁揃えしなくてもいいという意見をいただきました(ありがとうございます!)。
テンプレートリテラルも使うとさらにすっきり書けるとのこと。

let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
let color = `rgb(${r},${g},${b})`;
frost_star
まだまだ半人前プログラマー。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away