カラーパレット生成ツール（無料・登録不要）
ベースカラーを選ぶだけで補色・類似色・トライアドなど6配色を自動生成。HEX/RGB/HSLをワンクリックコピー・CSS/Tailwind/SCSS形式で一括エクスポート。WCAGコントラスト比チェック付き。登録不要・無料。
最終更新：2026年5月30日
和色プリセット（クリックで選択）
配色スキームの解説と使い方
補色（Complementary）
色相環の正反対に位置する色。強いコントラストを生み出し、ボタン・CTA・アクセントカラーに最適。使いすぎると目が疲れるため、1色をアクセントに絞って使うのがコツ。
使用例: メインカラー（青）+ アクセント（オレンジ）
類似色（Analogous）
色相環で隣り合う3色。自然で調和のとれたパレット。自然をテーマにしたデザイン・落ち着いたUI・グラデーション表現に適している。
使用例: 青 + 青紫 + 紫
トライアド（Triadic）
色相環を等間隔（120度）に3分割した色。活気があり多彩な印象。子供向けコンテンツ・エンタメサイト・ポスターデザインに。
使用例: 赤 + 青 + 黄
テトラード（Tetradic）
色相環を等間隔（90度）に4分割した色。豊かな表現が可能だが、バランスが取りにくい。1色を主役にして他を補助色として使うと調和しやすい。
使用例: 赤 + 青緑 + 青紫 + 黄
スプリット補色（Split-Complementary）
補色の代わりに補色の両隣の色を使う。補色より柔らかいコントラストで、バランスが取りやすい。初心者にもっとも扱いやすいスキームの一つ。
使用例: 青 + 黄橙 + 赤橙
モノクロマティック（Monochromatic）
同じ色相の明度・彩度違いのバリエーション。上品でまとまりのある印象。ミニマルデザイン・ダークモード・ブランドカラー展開に最適。
使用例: ダークブルー + ミディアムブルー + ライトブルー
CSS変数・Tailwind・SCSSのエクスポート活用法
CSS変数（カスタムプロパティ）
コピーしたCSSをプロジェクトの :root に貼り付けるだけで使えます。
:root {
--color-primary: #3B7DEF;
--color-secondary: #EF7B3B;
/* ...各色 */
}使い方: color: var(--color-primary);
Tailwind CSS（v3/v4）
tailwind.config.js の extend.colors に貼り付けることで独自カラーとして使えます。
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#3B7DEF',
secondary: '#EF7B3B',
}
}
}
}使い方: class="text-primary bg-secondary"
よくある質問（FAQ）
- カラーコードはどの形式を使えばいいですか？
- Webデザインでは HEX（#3B7DEF）が最も一般的です。CSS グラデーション・アニメーション計算には HSL が扱いやすく、色変換ライブラリでは RGB が標準的に使われます。本ツールはすべての形式でコピーできます。
- WCAGコントラスト比とは何ですか？
- テキストと背景色の明度の差を数値化したものです。WCAG 2.1 AA 基準では通常テキストで 4.5:1 以上、大きなテキスト（18pt以上/14pt太字以上）で 3:1 以上が必要です。アクセシビリティ対応が必要なWebサイトでは必ず確認してください。
- 補色と類似色はどちらを使えばいいですか？
- 目を引くコントラストが欲しい場合（CTA・バナー・ロゴ）は補色。自然でまとまりのある印象を作りたい場合（ランディングページ・アプリUI）は類似色がおすすめです。スプリット補色は両者の中間で扱いやすく、特に初めて配色を学ぶ方に向いています。
- 生成したパレットを保存できますか？
- 現在はブラウザ内でのコピー・エクスポートのみ対応です。URLのハッシュにカラーコードを含めることで「この配色のURL」として保存・共有できます。
- このツールのデータは外部に送信されますか？
- 送信されません。本ツールはすべての計算をブラウザ内で行っており、入力したカラーコードはサーバーに一切送信されません。
- Canva Pro・Adobe Colorと何が違いますか？
- Canva Pro・Adobe Colorはアカウント登録が必要で、一部機能が有料です。本ツールは登録不要・完全無料・ブラウザ完結で、CSS変数/Tailwind/SCSS出力に特化しています。エンジニア・デザイナーがコードに直接使える形での出力が強みです。