ランダムカラー生成
スペースキーで新しい配色に。配色ルールとトーンを選び、気に入った色はロックして残りだけ回せます。カラーコードはクリックでコピー。
ヒント： スペース キーで新しい配色に。ロックした色はそのままです。
文字のコントラスト
- Aa#264653白文字 10.1 · 黒文字 1.8AAA
- Aa#2A9D8F白文字 3.3 · 黒文字 5.4AA
- Aa#E9C46A白文字 1.7 · 黒文字 10.7AAA
- Aa#F4A261白文字 2.1 · 黒文字 8.7AAA
- Aa#E76F51白文字 3.1 · 黒文字 5.8AA
最近の配色
切り替えた配色がここに残ります。クリックで元に戻せます。
- イラストの配色お題3色をランダムに決めて、その色だけで描く。いつもの配色から抜け出す定番の練習です。
- デザインのアイデア出しムードボード、UIのテーマ、ロゴ案を、自分では選ばない配色からスタート。
- 開発・ダミーデータグラフの系列色やアバターの背景色に。CSS変数としてそのままコピーできます。
- ハンドメイド・ネイル・服毛糸、ネイル、ビーズ、今日のコーデの色をランダムにおまかせ。
気に入る配色を作る3ステップ
配色ルールとトーンを選ぶ
ランダムは何でもあり。類似色や同系色は落ち着いた印象、補色やトライアドはメリハリが出ます。パステル、ビビッド、くすみ、ダークで全体のトーンが決まります。
回してロック
「配色を作る」かスペースキーで再生成。良い色が出たらロックすると、次からはその色を基準に配色が組まれます。
コピーして使う
HEX、RGB、HSLをクリックでコピー。パレット全体をCSS変数でコピーしたり、ルーレットに載せて1色選んだりもできます。
ただのランダムなカラーコードではありません
配色ルールの早見表
配色ルールとは、色相環の上での位置関係から色相を選ぶ決まりです。このツールはまず基準になる色相をランダムに決め、ルールに沿ってほかの色を配置します。トーンは彩度と明るさを決めます。
| 配色ルール | 色相の関係 | 印象 | 向いている用途 |
|---|---|---|---|
| 類似色 | となり合う約20〜30度の色相 | 穏やか、自然、統一感 | イラストの背景、風景、やさしいブランド |
| 同系色 | 1つの色相で明るさだけ変える | すっきり、上品 | UIのテーマ、グラフ、シンプルなポスター |
| 補色 | 色相環の反対側、180度 | 元気、強いコントラスト | 目立たせたいボタン、ユニフォーム、ポップアート |
| 分裂補色 | 基準色と、その補色の両どなり（150度と210度） | にぎやかでもまとまりやすい | キャラクターデザイン、パッケージ |
| トライアド | 120度ずつ離れた3色 | 楽しく、バランスがよい | 子ども向け、ゲーム、インフォグラフィック |
| テトラード | 90度ずつ離れた4色 | 華やか、多彩 | 柄、イベント、項目の多いグラフ |
| ランダム | 色相はそれぞれ無関係 | 意外性、ときにぶつかる | 配色お題、手ぐせ崩し |
配色を使うときの目安として、ベースカラー70%、メインカラー25%、アクセントカラー5%という配分がよく紹介されます。
HEX、RGB、HSLのどれをコピーする？
3つとも同じ画面上の色を表しています。赤・緑・青がそれぞれ256段階なので、HEXで表せる色は16,777,216色あります。
| 形式 | 例 | 数字の意味 | 使いどころ |
|---|---|---|---|
| HEX | #2A9D8F | 赤・緑・青を16進数2桁ずつ、00〜FF | CSS、Figma、Canva、多くのデザインツール |
| RGB | rgb(42, 157, 143) | 赤・緑・青をそれぞれ0〜255 | プログラム、Photoshop、画像編集 |
| HSL | hsl(173, 58%, 39%) | 色相を角度、彩度と明度をパーセントで | 手で色を微調整、明暗のバリエーション作り |
コントラストの表示の意味
各色の上の文字は、白とほぼ黒のうち読みやすいほうを自動で選び、そのコントラスト比を表示します。判定はウェブアクセシビリティの国際基準WCAG 2にもとづいています。
- AAA（7対1以上）：本文でも読みやすく、ロービジョンの人にもやさしい水準。
- AA（4.5対1以上）：ウェブサイトやアプリの通常サイズの文字で一般的な最低ライン。
- 大きな文字のみ（3対1以上）：約24ピクセル、太字なら約19ピクセル以上の文字や、アイコン、ボタンの枠線なら可。
- 低い（3対1未満）：文字には使わず、装飾や背景色として使いましょう。
絵描き向けランダム配色チャレンジ
- 3色縛り：3色の配色を出して、その3色と白だけで好きなものを描く。Xやpixivのお題タグにも。
- 限定色の風景画：くすみカラーを1色ロックして影の色にし、空が決まるまで残りを回す。
- キャラの色替え：好きなキャラクターをトライアドの配色で塗り直す。
- 1日1色：毎日ランダムな1色を出し、その色であり得るものを5つ描く。
- トーン違い：同じ場面をパステルとダークの2回描き比べる。
- スピード塗り：1パレット10分。スペースで次へ、引き直しはなし。
よくある質問
ランダムなカラーコード（HEX）を1つだけ出すには？
色数で「1色」を選び、「別の色」かスペースキーを押します。HEXコードが大きく表示され、クリックでコピーできます。RGBやHSLの行をクリックすればその形式でコピーされます。
1色だけ残してほかの色を変えるには？
色の上部にある鍵のボタンを押してロックします。ロックした色は再生成しても変わらず、類似色やトライアドなどのルールは最初にロックした色を基準に組み直されます。
色に表示されるAAやAAAは何ですか？
その色の上の文字のWCAGコントラスト判定です。AAは通常の文字で4.5対1以上、AAAは7対1以上が必要です。「大きな文字のみ」は大きな見出しやアイコン向けという意味です。
パステルカラーやくすみカラーをランダムに出せますか？
はい。トーンを「パステル」にすると明るくやさしい色に、「くすみ」にすると彩度を抑えたスモーキーな色になります。どの配色ルールとも組み合わせられ、パステルと類似色ならやわらかい統一感のある配色になります。
CSSやFigmaで使うには？
「CSSでコピー」を押すと、color-1〜color-5のようなCSSカスタムプロパティとしてコピーされ、そのままスタイルシートに貼れます。「HEXをまとめてコピー」はカンマ区切りのコードなので、FigmaやCLIP STUDIO PAINTに1つずつ貼り付けられます。
スペースキーを押しても変わりません。
ボタン、リンク、入力欄にフォーカスがあるときは、スペースキーは本来の動き（フォーカス中のボタンを押すなど）を優先します。ページの何もない所を一度クリックしてから押してください。
本当にランダムですか？
はい。色相・彩度・明度は、トーンで決めた範囲の中からブラウザの暗号論的乱数で選ばれます。計算はすべて端末内で行われ、サーバーには何も送られません。