使い方
- 気に入った色が出るまで「生成」を押すか、スペースキーを押します。
- 色の 🔒 をクリックするとその色を残せます。HEX コードを入力するか 🎨 で自分の色を指定することもでき、次の配色はロックした色を軸に作られます。
- コントラストの表を確認し、必要な形式で配色をコピーするか、PNG としてダウンロードします。
オプションの説明
- 配色パターン
- 類似色は隣り合う色相、単色は 1 つの色相で明るさだけを変えたもの、補色は反対の色相、トライアドは等間隔の 3 つの色相、スプリットコンプリメンタリーは 1 つの色相とその反対側の両隣の色相です。「おまかせ（ランダム）」は毎回ランダムに選びます。
- ロックした色
- そのまま変わりません。グレーではない最初のロックした色が、ほかの色の基準となる色相にもなります。
- コントラストの表
- 各マスは、ある配色の色の文字を別の色の背景に置いた場合です。AA（4.5:1）は本文の WCAG 2 の最低基準、AAA は 7:1、3:1 は大きな文字や太字にだけ十分な基準です。
- 共有リンク
- 色はページのアドレス（#22333b-3d6b72-…）に保存されるので、配色をブックマークしたり、他の人に送ったりできます。
配色パターンの選び方
| 配色パターン | 見た目 | 向いている用途 |
|---|---|---|
| 単色（モノクロマティック） | 1 つの色相を暗い色から明るい色まで | 落ち着いた画面、ブランドの濃淡、系列が 1 つのグラフ |
| 類似色 | 隣り合う色相（例：ティールから青） | 写真やイラストに合う、自然でやわらかい配色 |
| 補色 | 反対にある 2 つの色相 | ほかの色から際立つアクセントカラーを 1 色使いたいとき |
| トライアド（3色） | 120° ずつ離れた 3 つの色相 | 楽しくカラフルなデザイン |
| スプリットコンプリメンタリー | 1 つの色相と、その反対側の両隣の色相 | 補色より衝突を抑えたコントラスト |
Web サイトで使える配色にするには
- いちばん明るい色をページの背景に、いちばん暗い色を文字に使います。プレビューにはこの組み合わせがそのまま表示されます。
- いちばん目立つ色をボタンとリンクに使います。背景とのコントラストを確認してください。AA を満たすには、リンクは 4.5:1 が必要です。
- 中間の色は、コントラストがそれほど重要でない枠線、パネル、タグ、イラストに使います。
よくある質問
色はどのように選ばれますか？
人の目に鮮やかさがどう見えるかに合った OKLCH 色空間で選びます。色相は選んだ配色パターンに従い、明るさは配色全体で暗い色から明るい色へ並び、彩度は一般的な sRGB の画面で表示できる範囲に収められます。
1 つのブランドカラーから配色を作るには？
好きなスロットに色を入力してロックし、「単色（モノクロマティック）」か「類似色」を選んで「生成」を押します。ほかの色は、その色の色相を軸に作られます。
文字にはどの色を使えばよいですか？
各スウォッチに、黒と白のどちらの文字が読みやすいかとコントラスト比が表示されます。配色の色を文字に使う場合は表を見てください。本文に安全なのは、AA または AAA と表示された組み合わせだけです。
Tailwind の出力はどう使いますか？
Tailwind CSS v4 の @theme ブロックです。メインの CSS ファイルに貼り付けると、bg-palette-1 や text-palette-3 のようなクラスが使えます。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。