JavaScriptで#CCCCCCと#3B5998の間のランダムな色を生成する方法

2つの指定された色（例：#CCCCCC と #3B5998）の間のランダムな色を生成する関数をJavaScriptで作成してみましょう。この問題は、次の3つのステップに分けて考えると理解しやすくなります。

• 第一段階 → 2つの数値の間の乱数を生成する関数を用意します。

• 第二段階 → 16進数のまま扱うのではなく、各桁の16進数を 0〜15 の10進数スケールにマッピングして利用します。

• 第三段階 → 色文字列の各桁に対してループ処理を行い、ランダムな色コードを組み立てます。

実装コード

const randomBetween = (a, b) => {
    const max = Math.max(a, b);
    const min = Math.min(a, b);
    return Math.floor(Math.random() * (max - min) + min);
};

const randomColor = (firstColor, secondColor) => {
    const first = firstColor.toUpperCase().substring(1);
    const second = secondColor.toUpperCase().substring(1);
    const scale = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < first.length && i < second.length; i++) {
        const random = randomBetween(scale.indexOf(first[i]), scale.indexOf(second[i]));
        color += scale[random];
    };
    return color;
};

console.log(randomColor('#34324a', '#42342c'));
console.log(randomColor('#f43250', '#12342c'));
console.log(randomColor('#34324a', '#47942c'));
console.log(randomColor('#ffffff', '#000000'));

コードの仕組み

randomBetween 関数は、引数として渡された2つの数値の大小を比較し、その範囲内のランダムな整数を返します。randomColor 関数では、まず両方の色コードを大文字に変換し、先頭の「#」を除去します。続いて、'0123456789ABCDEF' というスケール内で各文字がどの位置（0〜15）に該当するかを求め、各桁ごとに2つの色の対応する値の間の乱数を取得します。最後に、得られた文字を順に連結することで、新しい色コードが完成します。

#CCCCCC と #3B5998 の間の色を生成する

たとえば、#CCCCCC（薄いグレー）と #3B5998（Facebookブルー）の中間的な色が必要な場合は、次のように呼び出すだけで実現できます。

console.log(randomColor('#CCCCCC', '#3B5998')); // 出力例: #AB7A9B

コンソールへの出力例は以下の通りです。

注意： 実行するたびに出力はランダムに変わるため、以下は数ある出力結果の一例にすぎません。

出力結果

#33332A
#C23328
#36822B
#35102A