ツール一覧 / 配色パレット生成

配色パレット生成ツール
(Web用・CSS変数つき)

ブランドカラーを1色決めるだけで、明暗の段階・文字色・背景色を機械的に作ります。 同時にコントラスト比を判定するので、読めない配色をそのまま公開せずに済みます。

無料登録不要ブラウザ内で完結WCAG判定つき

ブランドカラー

ロゴやメインカラーの色を入れてください。以降はすべてこの1色から計算します。

色の段階

クリックでコピーできます。

相性のいい色

プレビュー

見出しのサンプルです

本文はこのくらいの読みやすさになります。実際の背景と文字の組み合わせで確認してください。

ボタン

コントラスト比の判定

WCAG基準です。本文は 4.5以上(AA)、大きな文字は 3.0以上が目安。

組み合わせ本文大きい文字

CSS変数


      
コントラスト比は読めるかどうかの最低ラインであって、美しさの保証ではありません。 数値を満たしていても、彩度の高い色同士は目が疲れます。プレビューで実際の見え方を確認してください。
この配色をそのままサイトに使えます

AETHER のテーマは全デザインがCSS変数(--accent など)経由なので、生成した値を貼るだけで配色が切り替わります。

AETHER を見る

ほかの道具も見る

72本すべてを見る →

1色から機械的に作る理由

配色で迷う原因は、選択肢が多すぎることです。ブランドカラーを1色だけ決めて、 あとは明度と彩度を規則的にずらして作ると、まとまりのある配色になります。 感覚で色を足していくより、破綻しません。

コントラスト比は「読めるか」の話です

薄いグレーの文字は洗練されて見えますが、明るい場所のスマートフォンでは読めません。 WCAGのAA基準(本文4.5以上)は、視力や環境に幅がある人でも読める最低ラインです。 デザインの好みより先に、ここを満たしているか確認してください。

アクセントカラーは「使わない」ほうが効きます

アクセントカラーをあちこちに使うと、どこが重要か分からなくなります。 押してほしいボタン1つに絞ると、その1つが際立ちます。 生成される段階色は、背景やボーダーなど控えめな用途に使ってください。

このツールについて

入力内容はブラウザの中だけで処理され、サーバーに送信されることはありません。