ランダムカラー生成
デザインやコーディング用にランダムな色とコードを。
コードをクリックしてコピーします。鍵アイコンで色を固定すると、次に生成してもその色は変わりません。
- HEX・RGB・HSLのコード
- パステル・ダーク配色
- 色を固定して残りを再生成
ランダムカラーの生成方法
- 色数とコード形式を選びます。
- ランダム・パステル・ダークから配色を選びます。
- スウォッチをクリックしてコードをコピー、固定してから再生成もできます。
HEX・RGB・HSLの比較
3つの形式はすべて同じ色を表します。どれを使うかは貼り付け先次第です。
| 形式 | 表記例 | 向いている用途 |
|---|---|---|
| HEX | #3B82F6 | CSS、デザインツール、手早い共有 |
| RGB | rgb(59, 130, 246) | CSS、色を混ぜたりフェードさせたりするコード |
| HSL | hsl(217, 91%, 60%) | 色相はそのままに明るさだけ手動調整する場合 |
HSLは自分で微調整するのに最も扱いやすい形式です。明度の数値をずらすだけで色相を保ったまま明暗を変えられ、HEXやRGBでは目視でそれを行うのが難しくなります。
ランダム・パステル・ダークの数値
各モードは色相を変えるだけでなく、色相環の異なる範囲から選びます。
| モード | 彩度の範囲 | 明度の範囲 |
|---|---|---|
| ランダム | 40〜100% | 25〜75% |
| パステル | 35〜60% | 75〜88% |
| ダーク | 35〜70% | 12〜28% |
色相はどのモードでも常に0〜359の全範囲から選ばれるため、パステルやダークでも明るさや暗さが違うだけで、すべての色系統がカバーされます。
ランダムカラーの使いみち
- ブランドやテーマカラーに迷ったときの手早いデザインのひらめき。
- 本番の配色が決まる前のワイヤーフレームやグラフ、UIモックアップの仮の色。
- アプリ内のアバターの背景やタグ、カテゴリーカラーの生成。
- 毎日のスケッチのお題など、アートや工作のランダムカラー企画。
ランダムカラー生成のFAQ
配色モードの違いは何ですか？
ランダムは色相環全体をカバーします。パステルは明度と彩度を抑えたやさしい背景向けの色に、ダークは暗いテーマやコントラストの効いた文字色向けに明度を低く抑えます。
気に入った色を残すにはどうすればいいですか？
スウォッチの鍵アイコンをクリックします。固定したスウォッチは次に生成しても色が変わらないので、残りだけを再生成できます。
HEX、RGB、HSLの違いは何ですか？
HEXとRGBは赤・緑・青の量で色を表します。HSLは色相・彩度・明度で表すため、手作業での調整がしやすい形式です。
カラーコードはどうやってコピーしますか？
各スウォッチの下にあるコードのテキストをクリックすると、すぐにクリップボードにコピーされます。
各配色モードが実際に使っている範囲は？
ランダムはすべての色相から彩度40〜100%、明度25〜75%で選びます。パステルは明度を75〜88%に絞ります。ダークは明度を12〜28%に絞り、彩度は35〜70%として色がくすまないようにしています。
ランダムな2色は必ず合いますか？
合うこともあります。このツールはバリエーションやひらめきのために色を独立して選ぶだけで、調和のとれた配色を組み立てるわけではありません。必ず合う色が欲しい場合は、複数生成して気に入った色を固定し、残りを気に入るまで再生成してください。
セットではなく1色だけ生成できますか？
はい。色数を1に設定して生成をクリックすれば、選んだ形式でランダムな色が1つ得られます。
取得したHEXやRGBのコードはどこで使えますか？
HEXコードはCSSやFigma、Photoshopなどほとんどのデザインツールにそのまま貼り付けられます。RGBとHSLの値もCSSのrgb()やhsl()関数で同じように使えます。