配色ジェネレーターツール

ベースカラーを選択すると、補色・類似色・トライアドなどの調和配色を自動生成します。

生成パレット

#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以上)を満たすことが推奨されています。

関連ツール