配色理論ビジュアライザー
色相環の関係から、バランスのよいカラーパレットを組み立てます。
基準色
色相環
点は現在の配色位置を示します。色相・彩度・明度を動かすと即時更新します。
生成パレット クリックでHEXをコピー
CSS変数
使い分けのヒント
配色の基本
補色はそのまま同じ面積で使えますか？
強い対比になるため、主色を広く、補色をボタンや強調など小さな面積に使うとまとまりやすくなります。
文字色の白・黒は何で決まりますか？
各色とのコントラスト比を計算し、より読みやすい方をサンプル文字色にしています。