デザインとゲーム用のランダムカラージェネレーター

ランダムな色は、ゲームのアバター、ジェネレーティブアート、テストデータ、ブレーンストーミング、デザイン演習に役立ちます。完全に制限のない色を簡単に作成できます。読みやすくパレットに適合するランダムな色には、いくつかの制約が必要です。

重要なポイント

RGB カラーは、通常 0 ～ 255 の 3 つのコンポーネントを使用します。
HEX 表記は、RGB 情報を 16 進数で表記したものと同じです。
HSL を使用すると、彩度と明度を制御しながら色相を簡単に変更できます。
ランダム生成は、アクセス可能なコントラストや調和のとれたパレットを保証するものではありません。
結果を再現できるように、最終値を保持します。

ランダムな RGB カラーを生成する

RGB カラーは、赤、緑、青のチャネルを組み合わせたものです。ランダムカラージェネレーターで任意のRGBカラーを選択し、カウントを設定します。各結果には、3 つのチャネル値、表示されるスウォッチ、および対応する HEX および HSL 表現が含まれます。たとえば、値 79、70、および 229 は、鮮やかな紫青を表します。

2 つの独立した色がチャネルを共有したり、まれに完全に一致したりする可能性があるため、通常は重複が許容されます。探索には小さなバッチを使用するか、一度に最大 12 個の候補を生成します。

RGB を 16 進数に変換する

HEX カラーは、同じ 3 つのチャネルを 6 つの 16 進数として書き込みます。各 10 進数コンポーネントを 2 桁の 16 進数値に変換し、赤、緑、青の順に結合します。

たとえば、RGB 79、70、229 は #4F46E5 になります。79 は 4F、70 は 46、229 は E5 です。先頭のゼロが重要であるため、コンポーネント値 5 は 5 ではなく 05 として記述する必要があります。

RGB と HEX は異なる色を生成しません。これらは、同じ結果の交換可能な表現です。

バリエーションをより制御するには HSL を使用します

HSL は色相、彩度、明度を表します。バランス HSL モードは、彩度を 55 ～ 80 パーセント、明度を 40 ～ 65 パーセントに制限しながら、色相を 0 ～ 359 度まで変化させます。同様のパレットモードでも、バッチ全体で基本色相を共有し、測定されたステップで周囲の値を変化させます。

1 つまたは 2 つのコンポーネントを狭い範囲内に収めることで、視覚的に完全に混乱することなく多様性を生み出します。これは、チャートカテゴリ、プレーヤーマーカー、ステッカー、および手順の図に役立ちます。

デザイン内のランダムな色

ランダムな開始点は創造的なブロックを打ち破る可能性がありますが、デザイン上の決定を置き換えるべきではありません。 WCAG コントラストガイダンスを使用して、背景に対するテキストとインターフェイスの色が十分なコントラストを持っているかどうかを確認し、ステータスや意味を伝えるために色だけに依存しないでください。

パレットの場合は、候補色を生成し、それを他の色と並べて調整します。色相、彩度、明度には共有構造がないため、独立してランダムな色のセットは衝突することがよくあります。制約された HSL 範囲または手動で選択したロールにより、より一貫した結果が生成されます。

ゲームとテストでのランダムな色

ランダムな色を使用して、一時的なプレーヤーマーカーを割り当てたり、パーティクルを変更したり、マップタイルを生成したり、予期しない値でレンダリングをテストしたりできます。競争力のあるインターフェースの場合は、プレーヤーが重要な要素を区別できるようにしてください。色覚の違いが重要になる可能性がある場合は、図形、ラベル、またはパターンを追加します。

テストでは、失敗したケースとともに生成された値を記録します。ランダムテストデータは、デバッグ中に結果を再現できる場合にのみ役立ちます。

よくある間違い

RGB に 0 ～ 255 の代わりに 1 ～ 256 の範囲を使用します。
16 進数コンポーネントの先頭のゼロを削除します。
すべてのランダムな色が白または黒で読み取れると仮定します。
共有制約なしで独立したパレットカラーを生成します。
有用な結果を選択した後に数値が失われる。

結論

無制限のカラーに対して 0 ～ 255 の RGB チャネルを生成するか、結果がデザインに適合する必要がある場合には制約付きの HSL 範囲を使用します。ランダム性を候補のソースとして扱い、出荷前にコントラスト、アクセシビリティ、およびパレットのチェックを適用します。