配色パレットジェネレーター
1色選ぶだけで調和した5色パレットを自動生成。CSS変数コードをコピーしてすぐ使えます
- メインカラー--color-main#3b82f6rgb(59, 130, 246)
- 補色--color-complement#f6af3crgb(246, 175, 60)
- アナログ1--color-analog-1#523cf6rgb(82, 60, 246)
- アナログ2--color-analog-2#3ce0f6rgb(60, 224, 246)
- アクセント--color-accent#06327argb(6, 50, 122)
:root {
--color-main: #3b82f6;
--color-complement: #f6af3c;
--color-analog-1: #523cf6;
--color-analog-2: #3ce0f6;
--color-accent: #06327a;
}使い方
- カラーピッカー（🎨マーク）をクリックして好きな色を選ぶか、 プリセットのカラーボタンをクリックしよう。
- 5色パレットが即座に生成されるよ。 スウォッチの「📋 コピー」ボタンで1色ずつコピーできるし、
- 「📋 CSSをコピー」 ボタンで 5色すべてのCSS変数コードをコピーして、 自分のスタイルシートに貼り付けよう！
このツールでできること
ベースカラーを1色選ぶだけで、配色ルール（補色、類似色、トライアド等）に基づいたカラーパレットを自動生成できるツールだよ。Webサイトの配色に迷った時、デザインの基本に沿った色の組み合わせがすぐ見つかる。
配色ルール解説
- 補色（Complementary）
- 色相環で正反対の色。コントラストが強く、アクセントカラーに最適。
- 類似色（Analogous）
- 色相環で隣り合う色。統一感があって落ち着いた配色になるよ。
- トライアド（Triadic）
- 色相環で120度ずつ離れた3色。バランスが良くて華やかな印象。
- 分裂補色（Split-complementary）
- 補色の両隣の2色を使う。補色より柔らかいコントラスト。
よくある質問
- Q. Webサイトの配色は何色がいい？
- A. 基本は3色（メイン60%、サブ30%、アクセント10%）がバランスいいよ。多すぎるとごちゃごちゃするから、まずは3色で始めてみて。
- Q. 補色と類似色の違いは？
- A. 補色は正反対の色で目立つ組み合わせ（赤と緑など）。類似色は隣り合う色で馴染む組み合わせ（青と紫など）。目的に応じて使い分けよう。
- Q. 配色のアクセシビリティって何？
- A. 文字色と背景色のコントラスト比が十分かどうかのこと。WCAG基準では4.5:1以上が推奨。このツールで生成した色は、実際に使う前にコントラストチェックしてね。
こんな時に使おう
- ポートフォリオサイト: 類似色で統一感のある落ち着いたデザイン
- LPのCTAボタン: 補色をアクセントに使って目立たせる
- ダークモード対応: 同じ色相で明度を調整した配色パターン
このツールを使って作ってみよう
色のことをもっと知りたい
よくある質問
- Q. 配色に自信がないときはどうすればいい？
- まずメインカラー1色を決めて、このツールの「補色」や「類似色」で自動生成するのが安全。色数は3〜5色に抑えると統一感が出る。
- Q. ダークモード用の配色はどう作る？
- ライトモードの色をそのまま暗い背景に載せると眩しい。彩度を少し下げて明度を調整する。コントラストチェッカーで読みやすさを確認しよう。