配色ジェネレーターツール
ベースカラーを選択すると、補色・類似色・トライアドなどの調和配色を自動生成します。
生成パレット
#3B82F6rgb(59, 130, 246)
#F9CD85rgb(249, 205, 133)
#F6AF3Crgb(246, 175, 60)
#DB8B0Argb(219, 139, 10)
#0950C3rgb(9, 80, 195)
使い方
カラーピッカーまたはHEXコード入力欄でベースカラーを選択します。配色タイプ(補色・類似色・トライアド・スプリット)を選ぶと、色彩理論に基づいた5色のパレットが自動生成されます。
各色のHEXコードとRGB値が表示され、ワンクリックでコピーできます。「画像ダウンロード」ボタンでパレットをPNG画像として保存することも可能です。Webデザイン、UIデザイン、プレゼン資料の配色検討にご活用ください。
よくある質問
関連知識
色彩理論の基礎は、ヨハネス・イッテンの色相環(12色環)に遡ります。HSL色空間では色相(Hue: 0-360°)、彩度(Saturation: 0-100%)、明度(Lightness: 0-100%)の3軸で色を表現します。補色は色相差180°、トライアドは120°間隔、スプリット補色は150°と210°の位置です。
Webデザインではアクセシビリティの観点から、WCAG 2.1のコントラスト比基準(通常テキスト4.5:1以上、大きなテキスト3:1以上)を満たすことが推奨されています。