ウェブサイトとアプリ
ブランドカラー、背景色、アクセントカラーを選択し、それらをCSS変数、Tailwind、またはAndroidテーマに直接貼り付けてください。
カラーパレットジェネレーター — 調和のとれたカラーパレットを作成し、コードとしてエクスポートできます。
ベースカラーと配色 scheme を選び、3～8色のバランスの取れたカラーパレットを作成しましょう。気に入った色を確定し、それぞれの色背景上で白や黒のテキストが読みやすいかを確認してから、CSS変数、Tailwind、Androidの colors.xml、またはJetpack Compose用のコードとしてコピーします。すべてブラウザ上で動作し、保存したパレットはデバイスに残ります。
パレットを作成する
ブラウザ上で動作します
あなたのパレット
お好みの色を固定してから、「生成」をクリックして残りの色を変更してください。16進数コードをクリックするとコピーできます。パレットをクリックしてスペースキーを押すと、色が生成されます。
コードとしてエクスポート
保存されたパレット
まだ保存されたパレットはありません。「パレットを保存」をタップすると、このデバイスにパレットを保存できます。
ガイド
カラーパレットガイド：配色、コントラスト、およびコードへのエクスポート
配色の仕組みを理解し、テキストのコントラストを確認し、その配色を実際のプロジェクトに取り入れてみましょう。
カラーパレットジェネレーターとは何ですか？
カラーパレットとは、互いに調和する少数の色の組み合わせのことです。デザイナーはカラーホイールを基にパレットを作成します。まず基調となる色を1色選び、そこから一定の角度を保って他の色相を選んでいくことで、ランダムな印象ではなく、バランスの取れた仕上がりになります。
このジェネレーターがそれを代行します。ベースカラーと配色 scheme を選択し、気に入った色を固定して、結果を CSS、Tailwind、Android XML、または Jetpack Compose コードとしてエクスポートできます。 各スウォッチには、RGBおよびHSL値に加え、その色上で白や黒のテキストがどの程度読みやすいかも表示されます。16進数の値については、「2進数から10進数への変換ツール」で通常の数値との対応関係を確認できます。
なぜ人々はカラーパレットを作成するのか
スライド、ポスター、資料
プレゼンテーションやSNS投稿、印刷物デザインにぴったりの配色セットを、迷うことなく手に入れましょう。
チャートとダッシュボード
データ系列ごとに、個性的でありながらも調和のとれた色を設定し、ラベルが読みやすいようコントラストを確認してください。
配色の解説
| スキーム | その仕組み | 体感して、使ってみよう |
|---|---|---|
| 類似の | 30°離れている隣接する色相 | 落ち着いていてナチュラルな雰囲気。背景や穏やかなUIに適しています。 |
| 単色 | 同じ色相、異なる明度 | すっきりとして統一感がある。ミニマルなデザインに最適。 |
| 相補的な | 180°離れている2つの対照的な色合い | コントラストが強い。アクセントカラーとして効果的です。 |
| 分割相補型 | ある色相と、その反対色の両隣の色相 | 補色よりも彩度が低い色との対比。 |
| 三和音 | 120°間隔で配置された3つの色相 | 生き生きとしていて、バランスが取れている。主となる色を1色加える必要がある。 |
| 4角形（正方形） | 90°ずつ離れている4つの色相 | 豊かでバラエティに富んでいる。メインカラーを1色に絞ると最も効果的だ。 |
カラーパレットジェネレーターの使い方
- カラーボックスからベースカラーを選択するか、16進数コードを入力してください。配色と使用したい色の数を選択してください。
- 「生成」ボタンを押して、新しいランダムなベースを試してみてください。残しておきたい色の下の「ロック」ボタンを押してください。
- 各見本のコントラストに関する注記を確認してください。テキストが色の上に配置される箇所では、4.5:1以上になるよう心がけてください。
- 16進数コードをクリックしてコピーするか、「コードとしてエクスポート」を開き、CSS、Tailwind、Android、またはComposeを選択してください。
- 「パレットを保存」をタップしてこのデバイスに保存するか、「リンクをコピー」をタップして共有するか、または「PNGをダウンロード」をタップして画像を取得してください。
色のコントラストとアクセシビリティ
コントラスト比
2つの色の明るさを比較するための数値で、1:1（同一）から21:1（白地に黒）までの範囲で表されます。
WCAG AA
通常のテキストでは少なくとも4.5:1、大きなテキスト（約24ピクセル、または太字で19ピクセル）では3:1以上。これが、法的な観点からも実用的な観点からも、一般的な目標値です。
WCAG AAA
通常のテキストの場合は、少なくとも7:1。低視力の方にとって役立つ、より厳格な基準です。
色だけを見て判断してはいけません
男性の約12人に1人は、何らかの色の識別障害を抱えています。意味が伝わらなくなることがないように、色とラベル、アイコン、または模様を組み合わせて使用してください。
エクスポート形式の表示例
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
Compose: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
Android Studioで、XMLを res/values/colors.xmlに貼り付けるか、 Color.kt ファイルにComposeのコードを追加してください。Composeの値には、不透明度を100%にするアルファプレフィックス「FF」が含まれています。
効果的なパレット作りのコツ
- 主色を1色、補助色を1～2色、そして中間色を1色使いましょう。すべての色を同じ量で使うと、たいていごちゃごちゃした印象になってしまいます。
- 配色を決定する前に、すべての背景色についてテキストのコントラストを確認してください。
- ブランドカラーを確定し、それを基にさまざまなバリエーションを検討してみましょう。
- パレットは、単なるスウォッチとしてだけでなく、実際の画面上で表示されるサイズのまま確認してください。
- ダークモードでもテストしてください。白い背景でうまく見える色でも、ほぼ黒に近い背景ではうまく見えない場合があります。
制限事項およびプライバシー
プライバシー
パレットはブラウザ内で生成されます。保存されたパレットは、お使いのデバイスのブラウザのローカルストレージに保存され、外部へアップロードされることはありません。
制限事項
色はsRGB色空間で表示されており、表示される見た目は画面によって異なります。パレットは色彩理論に基づいた提案であり、実際のユーザーによるテストに代わるものではありません。このツールは、コントラスト以外の色覚異常への配慮については確認を行いません。
よくある質問
カラーパレットジェネレーターに関するよくある質問
カラーパレットジェネレーターはどのように機能するのですか？
ベースカラーと配色を選択すると、このツールはカラーホイールを使って、そのベースカラーに合う色のセットを生成します。「生成」ボタンを押すと新しいランダムなベースカラーが生成されます。また、気に入った色を固定して、残りの色を生成することもできます。
配色の違いは何ですか？
「類似色」は隣接する色相を用い、落ち着いた印象を与えます。「補色」は対角に位置する色相を組み合わせ、コントラストを生み出します。「分割補色」と「三色配色」は3つの色相を均等に配置し、「四色配色」は4つの色相を用い、「単色配色」は1つの色相を基調とし、明度を変化させます。
他の色を変更しながら、ある特定の色をそのまま維持するにはどうすればよいですか？
任意のスウォッチの下にある「ロック」ボタンを押してください。ロックされた色は、「生成」ボタンを押したり、ベースを変更したり、配色を変更したりしても、その状態が維持されます。「編集」ボタンでスウォッチを編集した場合も、そのスウォッチはロックされます。
コントラストの数値は何を意味しているのでしょうか？
各見本では、その色に対する白文字および黒文字のコントラスト比が表示されています。WCAGでは、通常のテキスト（AAレベル）で少なくとも4.5:1、より厳格なAAAレベルで7:1、大きなテキストで3:1が求められています。
どのようなエクスポート形式が利用できますか？
HEXリスト、CSS変数、SCSS変数、JSON配列、Tailwindの設定、Androidのcolors.xmlファイル、Jetpack Composeのカラー値などが含まれているため、パレットをプロジェクトにそのまま貼り付けることができます。
パレットを共有したり保存したりできますか？
はい。「リンクをコピー」を選択すると、同じ配色が再表示されるウェブアドレスが作成されます。「PNGをダウンロード」を選択すると、パレットの画像が保存され、「パレットを保存」を選択すると、このブラウザに最大12個のパレットを保存できます。
なぜ別の画面では色が違って見えるのですか？
ディスプレイによって、輝度、色精度、カラープロファイルは異なります。16進数コードは色を数値で表現しますが、実際にどのように見えるかはディスプレイによって異なります。対象となるユーザーが使用するデバイスで、重要な色を確認してください。
パレットには何色入れるべきでしょうか？
多くのデザインでは、5色を使うと効果的です。具体的には、メインカラー1色、アクセントカラー1～2色、明るい背景色、そして暗い文字色です。このツールでは、3色から8色まで選択できます。
ジェネレーターは無料で利用できますか？また、私のデータは保存されますか？
無料でご利用いただけます。カラーパレットはブラウザ内で生成されます。保存されたカラーパレットは、お使いのデバイスのローカルストレージに保存され、外部へアップロードされることはありません。
パレットへのリンクを貼ってもいいですか？
はい。ページのURLに「?colors=1f3a5f-ff5733-00aa88」を追加してください。この際、ハイフンで区切った2～8個の16進数コードを指定し、#記号は付けないでください。
このツールを利用している方々から
レビュー
レビューを読み込んでいます…
頑張り続けよう
ツールボックスには他にもツールが入っています
このホームページには、APIキーを必要としない無料ツールが他にも数十種類掲載されています。