6ケタのカラーコードをランダムで生成する色々な方法

CSS の色の指定の際には RGBA や HSL など色々な方法がありますが、カラーコードをランダムで指定したい場合の JavaScript コードです。

例えば10進法の RGB で指定したい場合は

var randomColor = "rgb(" + (~~(256 * Math.random())) + ", " + (~~(256 * Math.random())) + ", " + (~~(256 * Math.random())) + ")" ;

で変数 randomColor にランダムなカラーコードが入ります。

この記事では10進法の RGB の指定ではなく、# から始まる6ケタの16進数での表示、#56ffba や #faf565 などで取得したい場合のコードを書いてみます。以降変数 randomColor にカラーコードが入ります。

randomColor

その1 有名な方法

var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

検索すると大体これが出てくるので一番有名な方法だと思われます。16進法の6ケタの最大値、ffffff を10進法に直すと 16777215 でそれ以下の整数を取得して16進法に直すというやり方です。toString(16) は数値を16進法の数値にするメソッドです。

非常にわかりやすいですし、スマートな気もしますが問題点があります。この方法だと5ケタや4ケタ、それ以下のケタ数の16進数を取得してしまいます。つまりカラーコードを取得したいのに「#5f36a」や「#6dd5」などになってしまいます。これだとカラーコードとして不完全なので色は表示されません。有名な方法ですが欠陥がある方法という事になっています。

スポンサーリンク

その2

var randomColor = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);

JavaScript では 0x から始めるとそれ以降の数文字を16進法と解釈します。0xFFFFFF は16進法の6ケタの数の最大値となり、それ以外はその1と同じ方法です。

この方法もその1と同じく4ケタ、5ケタのカラーコードを生成してしまうので欠陥コードです。

その3 その1、その2の修正版

上の2つの欠点は5ケタ以下になってしまう可能性があること、つまり # の直後に 0 がくることが絶対にないコードになっていることです。カラーコードでは必ず6ケタ必要で「#0d56ff」など冒頭に 0 が来るコードも存在します。その弱点を以下のコードでは補います。

var color = Math.floor(Math.random() * 16777215).toString(16);
    for(count = color.length; count < 6; count++) {
        color = "0" + color;                     
    }
var randomColor = "#" + color;
var color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
    for(count = color.length; count < 6; count++) {
        color = "0" + color;                     
    }
var randomColor = "#" + color;

まず16進数を取得しその16進数の文字列としての長さが6文字未満なら冒頭に 0 を付け足すというコードです。これでその1、その2の欠陥である「5ケタ以下になってしまう」を克服できます。

その4

var randomColor = "#";
for(var i = 0; i < 6; i++) {
    randomColor += (16*Math.random() | 0).toString(16);
}

16進数である 0 ~ f までの文字が6個並んでいればいいのでという解釈で作ったコードです。特に欠陥はありません。

Math.floor も使わなくて整数化は出来るので | 0 で整数化してしまっています。

その5 toString(16) なし

var randomColor = "#";
for(var i  =0; i < 6; i++) {
    randomColor += "0123456789abcdef"[16 * Math.random() | 0]
}

.toString(16) は数値を16進数に変換するメソッドですが、使わなくてもいけそうと考えた結果できたコードです。

"文字列"[数値] で文字列のその数値番目を抜粋できるそんなに有名ではない性質を使っています。"012345689abcdef" の中からランダムで1文字選んで6個連結しています。

その6 for なし

var color = (Math.random() * 0xFFFFFF | 0).toString(16);
var randomColor = "#" + ("000000" + color).slice(-6);

for で繰り返しをしていたので for を使わなくても出来るんじゃないかと思って作ったコードです。

まず普通に16進数を生成し、その冒頭に 0 を6個付けます。そのあと slice を使って後ろから6文字抜粋するやり方です。例えば16進数が「5fdd6」になれば 0 を付け足し「0000005fdd6」とし後ろから6ケタ引っ張ってきて「05fdd6」にするという感じです。無理やり感がありますが for を回避してみました。

まとめ

他にもまだ方法はあると思うのですが、10進法の rgb(43, 250, 118) などの形で指定した方が JavaScript では使いやすい事が多いです。特に色のグラデーションやアニメーションを JavaScript でしたいとなったら、10進法の方が絶対に便利です。

ただ # から始まるカラーコードは今でも使われていますし、文字数が少ないのでその点便利です。一つの事をしたいにしても色んな事が考えられるので楽しいですね。

Top