配色ジェネレーター

配色を作り、色を固定し、文字のコントラストを確認して PNG 保存や CSS コピーができます。無料・登録不要。ブラウザ内で動きます。

Space キーでも生成できます。

背景

#F7F5EF

文字

#202C39

メイン

#D8A47F

サブ

#A3B18A

アクセント

#596F62

カードのプレビュー

はじめの一歩

この配色を使ったシンプルなカードです。

はじめる

文字のコントラスト

文字 / 背景

#202C39 / #F7F5EF

13.01:1

文字サイズAAAAA
通常合格合格
大合格合格

文字 / メインボタン

#202C39 / #D8A47F

6.44:1

文字サイズAAAAA
通常合格不合格
大合格合格

コントラストの判定は表示中の2組の配色だけが対象のため、使用前に実際のデザインで文字サイズと色の組み合わせを確認してください。

WCAG 2.2 · 通常: AA ≥ 4.5、AAA ≥ 7 · 大: AA ≥ 3、AAA ≥ 4.5。大きい文字 = 24px 以上、または太字 18.67px 以上。判定は丸める前の比率で行います。

この色で Wi-Fi 案内を作る → wi-qr.com

仕組み

  • 配色を生成し、残したい色を固定します。
  • カードのプレビューで、文字と背景・文字とメインボタンの 2 組のコントラストを確認します。
  • PNG を保存するか、CSS 変数をコピーします。

ヒント

  • HEX を編集すると、その色が決まり固定されます。
  • 元に戻すで前の配色に戻せます。
  • 通常の文字は 4.5:1 以上を目安にしてください。

よくある質問

無料ですか?
はい。登録も不要です。
色はアップロードされますか?
作成・ダウンロード・コピーした配色の色は、ツール改善のため記録します。名前やIPアドレスは含みません。
コントラストは何を判定しますか?
背景の上の文字と、メインボタンの上の文字だけです。
何を書き出せますか?
1600 × 1000 の PNG、または CSS カスタムプロパティ 5 つです。