配色パレット ジェネレーター
スペースキーで新しい配色。気に入った色は固定できます。
またはスペースキー
- rgb(237, 221, 187)hsl(41, 58%, 83%)
- 白い文字
- 1.34:1AAAAA
- 黒い文字
- 15.66:1AAAAA
- rgb(143, 173, 255)hsl(224, 100%, 78%)
- 白い文字
- 2.19:1AAAAA
- 黒い文字
- 9.59:1AAAAA
- rgb(92, 123, 230)hsl(227, 73%, 63%)
- 白い文字
- 3.87:1AAAAA
- 黒い文字
- 5.43:1AAAAA
- rgb(59, 91, 219)hsl(228, 69%, 55%)
- 白い文字
- 5.67:1AAAAA
- 黒い文字
- 3.71:1AAAAA
- rgb(60, 52, 31)hsl(43, 32%, 18%)
- 白い文字
- 12.33:1AAAAA
- 黒い文字
- 1.70:1AAAAA
データは端末の外に出ません
このツールはすべてブラウザ内で動作します。ここで入力・演奏・録音した内容は端末内にとどまり、サーバーへ送信・保存されることはありません。
使用例
例：藍色 #165e83 を基準に、補色の5色パレットを作る
会社案内の資料の色を決めます。「基準の色」に藍色の #165e83 を入力し、配色の種類は「補色」、色数は5。基準の色を入れたときは、何度やっても同じ結果になります。
- 藍色の色相に3色（明るい・基準・暗い）、色相環の反対側に2色が並びます。藍色の反対は茶色・オレンジ系です。
- 各色に、白い文字と黒い文字を載せたときのコントラスト比が出ます。本文なら4.5以上でAA、7以上でAAA。
- 気に入った色を「固定」して「生成する」かスペースキーを押すと、固定した色を残して残りが作り直されます。
| 色 | 白い文字 | 黒い文字 |
|---|---|---|
| #3f81a8 | 4.27:1 | 4.92:1（AA） |
| #165e83（基準） | 7.09:1（AAA） | 2.96:1 |
| #003c58 | 11.75:1（AAA） | 1.79:1 |
| #a26b42 | 4.45:1 | 4.72:1（AA） |
| #7d491e | 7.38:1（AAA） | 2.84:1 |
見出しの帯には白い文字が7以上の #165e83 や #003c58、ポイントの色には #a26b42 を。「CSS変数をコピー」で、そのままWebサイトのスタイルに貼り付けられます。
使い方
- 「生成する」かスペースキーで新しい配色を作ります。基準の色を入力して、補色やトライアドなどの配色の種類を選ぶこともできます。
- 気に入った色は固定すると、次の配色でも残り、ほかの色がそれに合わせて作られます。色をクリックするとカラーコードをコピーできます。
- コントラストの表示と色覚シミュレーションで見やすさを確かめ、CSS変数をコピーするか、PNG・SVGで保存します。
よくある質問
- 配色の種類にはどんなものがありますか？
- 色相環にもとづくルールです。類似色は隣り合う色（±30°）、補色は反対側の色、分裂補色は補色の両隣、トライアドは120°ずつ離れた3色、テトラードは90°ずつ離れた4色、モノクロマティックは1つの色相の明るさ違い、パステルは色相環全体からやわらかく明るい色を選びます。
- 色のバランスがよく見えるのはなぜ？
- 目に見える明るさに近い色空間 OKLCH で計算しているので、明るさの段階が均等に感じられます。画面で表示できない色は、表示できるところまで彩度を下げています。
- コントラストの表示は何を意味しますか？
- 各色の上に白い文字と黒い文字を置いたときの、WCAG のコントラスト比です。通常の文字で AA は4.5以上、AAA は7以上が必要です。
- 写真から配色を作れますか？
- はい。「画像から配色を取り出す」で写真のおもな色を抜き出せます。このページは新しい色の組み合わせを作るためのものです。
- 同じ基準の色なら、毎回同じ配色になりますか？
- はい。基準の色・配色の種類・色数が同じなら、同じパレットになります。「生成する」やスペースキーを押したときだけ、明るさと彩度に少し変化をつけた別の案を作ります。
- 何かアップロードされますか？
- いいえ。配色はブラウザの中で作られます。共有リンクには色の値そのものが入っています。