カラーパレットジェネレーター
ベースカラーから6種の配色理論に基づくパレットを自動生成します。
HEX
RGB
HSL
WCAG コントラスト比
このツールでできること
基準色から補色・類似色・トライアド・テトラードなど7種類の配色パターンを自動生成します。WCAG 2.1コントラスト比チェック、Tailwind CSSクラス表示、PNG書き出し、HEX/RGB/HSL値の確認にも対応しています。
使い方
- カラーピッカーまたはHEX入力欄で基準色を選択します
- 補色・類似色・三角色相など各配色パターンが自動表示されます
- Tailwind CSSクラス・HSL・RGB値を同時に確認できます
- WCAGコントラスト比で白・黒背景との読みやすさを確認します
- 「全コピー」でHEX値をまとめてコピー、またはPNGでダウンロードします
こんな時に便利
- Webサイトのブランドカラーに合う配色パターンを素早く探したいとき
- WCAGのアクセシビリティ基準（4.5:1以上）を満たす色の組み合わせを確認するとき
- TailwindのカラーユーティリティクラスとHEX値を対照したいとき
よくある質問
Q. 補色・類似色・三角配色はどう使い分ければいいですか？
補色（180°対向）はコントラストが強くCTAや強調に最適。類似色は調和しやすくナビゲーションやグラデーションに向いています。三角配色はバランスの良い活発な印象を与えます。
Q. WCAGのコントラスト比はどんな基準ですか？
WCAG 2.1 AA基準は通常テキストに4.5:1、大きいテキストに3:1以上が必要です。AAA基準はそれぞれ7:1・4.5:1。本ツールでは白・黒背景とのコントラスト比を即座に確認できます。
Q. 生成したパレットをコードにそのまま使えますか？
「全コピー」ボタンでHEX値をまとめてコピーできます。PNG書き出しも可能なのでデザインレビューやクライアント共有にそのまま使えます。