ランダムカラー生成

ランダムカラー生成の機能と使いどころ

デザインや開発の際に、偶然の色合わせからインスピレーションを得たいことはよくあります。このツールは、完全にランダムな色を生成するだけでなく、一部のチャンネルを固定して、制約付きのランダム色を生成できます。

具体的な使用例

例えば、ブランドカラーの赤（R=255, G=0, B=0）を基調としつつ、緑と青のチャンネルだけをランダムに変化させたい場合を考えます。RGBモードで赤のチェックボックスをオンにして255を入力し、緑と青のチェックボックスをオフにします。「生成」をクリックすると、赤が255のまま、緑と青が0〜255の範囲でランダムに選ばれた色が生成されます。結果はHEX、RGB、HSLの各形式で表示されます。

生成の仕組み

固定されていない各チャンネルは、crypto.getRandomValuesを使用し、棄却サンプリングによって一様に分布する乱数を生成します。RGBの各チャンネルは0〜255の整数、HSLの彩度と明度は0〜100の整数、色相は0〜360の整数です。固定されたチャンネルは、入力された値をそのチャンネルの許容範囲にクランプした上で使用します。

生成結果の調整

生成された色は、ページ上のカラーコントロール（色相、彩度、明度、RGBスライダーなど）を使って微調整できます。これにより、ランダム生成後に意図した色に近づけることが可能です。

注意点と制限

• このツールは数値のsRGB色を生成します。名前付きカラー、アクセシブルなコントラストペア、印刷用CMYK値、パントンマッチ、パレットは提供しません。
• ランダム生成のため、似た色や同じ色が繰り返し生成される可能性があります。
• 生成はブラウザ内でのみ行われ、サーバーに送信されません。
• テキストやUI要素に使用する場合は、実際の前景色と背景色でWCAGコントラストを確認してください。

よくある質問

Q1: 固定したチャンネルの値が範囲外の場合はどうなりますか？

入力された値は、そのチャンネルの許容範囲（RGB: 0〜255、HSL彩度・明度: 0〜100、色相: 0〜360）にクランプされます。例えば、RGBの赤に300を入力すると、255として扱われます。

Q2: 生成された色は毎回異なりますか？

乱数生成には暗号学的に安全な乱数源を使用しているため、通常は毎回異なる色が得られます。ただし、偶然同じ色が生成される可能性はあります。

Q3: 生成された色を別の形式でコピーできますか？

ツールはHEX、RGB、HSLの各値を表示します。これらの値を手動でコピーして、お使いのデザインツールやコードに貼り付けることができます。