カラーパレットジェネレーター
ベースカラーから調和したカラーパレットを生成します。補色、類似色、三色、四色、単色スキームをhex/RGB/HSLコードで作成できます。
Color harmony
Generated Palette
Base
hsl(217, 91%, 60%)
#3C83F6
Complement
hsl(37, 91%, 60%)
#F6AF3C
CSS Variables
:root {
--color-1: #3C83F6;
--color-2: #F6AF3C;
}カラーパレットジェネレーターの使い方
- 1カラーピッカーまたはhex入力を使用してベースカラーを入力します。
- 2ハーモニータイプ（補色、類似色、三色など）を選択します。
- 3生成されたパレットとすべてのカラーコードを表示します。
- 4個別のカラーまたはパレット全体のカラー変数をコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
色調和とは何ですか？▾
色調和とは、カラーホイール上の位置に基づいた色の美的に心地よい組み合わせです。主な調和タイプ：補色（反対の色、高コントラスト — 例：青＋オレンジ）、類似色（隣接する色、調和的 — 例：青、青緑、緑）、三角形配色（120°等間隔の3色 — 例：赤、黄、青）、正方形配色（90°間隔の4色）、分割補色（ベース色＋補色に隣接する2色）。モノクロは1つの色相のティントとシェードを使用します。
補色はどのように機能しますか？▾
補色はカラーホイール上で直接反対（180°離れた）位置にある色です。例：赤＋緑、青＋オレンジ、黄＋紫。並べると最大のコントラストと振動を生み出します。補色の組み合わせが多すぎると圧倒的になるため、一方を支配色（70%）、他方をアクセント（30%）として使用してください。類似色（15〜30°離れた）は組み合わせやすいですが、ダイナミックさは少なくなります。
60-30-10の配色ルールとは何ですか？▾
60-30-10ルールはバランスの取れた色使いのためのデザイン原則です：60%が支配色（通常はニュートラルまたはブランドカラー）、30%がセカンダリカラー（支配色を補完する）、10%がアクセントカラー（強調、コールトゥアクション、ハイライト用）。これにより視覚的な階層が生まれ、特定の色がデザインを圧倒するのを防ぎます。例：60%ホワイト、30%ネイビーブルー、10%ブライトオレンジ。この比率により目が自然に構図の中を動きます。
ティント、シェード、トーンとは何ですか？▾
ティント：色に白を混ぜる — 明るさが増します。シェード：色に黒を混ぜる — 明るさが減ります。トーン：色にグレーを混ぜる — 彩度が下がります。HSLでは：ティントはLを100%に向けて増加させ、シェードはLを0%に向けて減少させ、トーンはSを0%に向けて減少させます。デザインシステム（Tailwind、Material、Radix）は各ベースカラーに10段階のティント/シェードスケール（50〜950）を使用します。これによりUI要素全体で一貫した視覚的なウェイトが作成されます。
アクセシビリティのための色の選び方は？▾
WCAG 2.1では、通常テキストに対して少なくとも4.5:1、大きなテキスト（18pt/14pt太字）に対して3:1のコントラスト比が必要です。コントラスト比 = (L1 + 0.05) / (L2 + 0.05)（LはRelative luminance）。ツールで各色ペアを確認してください。ダークモードの考慮事項：白地で読みやすい色が黒地では読みにくい場合があります。意味のために色だけに頼らないでください（赤=エラー、緑=成功）— アイコンやテキストラベルも使用してください。