ベースカラーから補色・類似色・トライアドなどの配色パターンを自動生成します。
色相環で正反対に位置する色。強いコントラストを生み、注意を引きたい要素に効果的。
ベース
#3b82f6
メインカラーとして最も広い面積に使用
補色
#f6af3c
アクセントやCTAボタンなど、目立たせたい要素に使用
CSSエクスポート
:root {
--palette-1: #3b82f6; /* ベース */
--palette-2: #f6af3c; /* 補色 */
}カラーパレット生成でできること
ベースカラーを選ぶだけで、補色・類似色・トライアド・分裂補色・テトラードの5種類の配色パターンを自動生成できるツールです。各色の用途ガイドやCSS変数のエクスポート機能も備えており、Webデザインの配色選びを効率化します。
使い方
- ベースカラー選択
- カラーピッカーまたはHEXコードの直接入力で基準となる色を指定します。
- 配色パターン選択
- 補色・類似色・トライアド・分裂補色・テトラードの5種類からドロップダウンで選べます。
- 配色パターン説明
- 選択中のパターンの特徴と効果的な使い方がブルーのパネルに表示されます。
- パレットプレビュー
- 生成された各色がカラースウォッチで表示され、ラベル・HEXコード・用途ガイドを確認できます。
- CSSエクスポート
- 生成した配色をCSS変数（:root形式）として表示し、コピーボタンでクリップボードに取得できます。