Color Harmony

Color Harmony is a free browser-based tool. Supported files are processed locally whenever possible, with no installation required.

Base color

Hex

Hue 216°

Saturation 100%

Lightness 57%

Color wheel

点は現在の配色位置を示します。色相・彩度・明度を動かすと即時更新します。

Generated palette クリックでHEXをコピー

CSS variables

Usage tips

Color basics

補色はそのまま同じ面積で使えますか？

強い対比になるため、主色を広く、補色をボタンや強調など小さな面積に使うとまとまりやすくなります。

文字色の白・黒は何で決まりますか？

各色とのコントラスト比を計算し、より読みやすい方をサンプル文字色にしています。