カラーパレット生成ツール

配色の自動生成とコントラスト比チェック

基準色を選択

#3c83f6

色の微調整

生成されたパレット

モノクロマティック(明度変化)

類似色

補色

比率:

トライアド

アクセシビリティガイド

WCAG 2.1 ガイドラインに基づくコントラスト比の基準:

  • 4.5:1以上 - 通常テキストのAAレベル
  • 3:1以上 - 大きいテキスト(18pt以上)のAAレベル
  • 7:1以上 - 通常テキストのAAAレベル
  • 4.5:1以上 - 大きいテキストのAAAレベル

※ 各色をクリックするとクリップボードにコピーされます

よくある質問

Q. 生成した配色はサーバーに保存されますか?

A. いいえ。パレットの生成やコントラスト比の計算はすべてブラウザ内のJavaScriptで完結しており、色データが外部に送信・保存されることはありません。ページを再読み込みすると設定はリセットされます。

Q. コントラスト比はどのような基準で計算していますか?

A. WCAG 2.1で定義された相対輝度(relative luminance)の計算式に基づき、sRGB値から比率を算出しています。数値が大きいほど背景色と文字色のコントラストが強く、視認性が高いことを示します。

Q. 「色の微調整」スライダーは何をしていますか?

A. 基準色のHSL値(色相・彩度・明度)に対してオフセットを加算し、パレット全体を一括で調整します。色相は±180°、彩度・明度は±50%の範囲で調整でき、「調整を基準色に適用」ボタンで確定した色を新たな基準色にできます。

Q. モノクロマティック・類似色・補色・トライアドはどう選ばれていますか?

A. 基準色の色相を軸に、モノクロマティックは明度を5段階変化、類似色は色相を±30°、補色は+180°、トライアドは±120°ずらして自動生成しています。いずれも色彩理論に基づく代表的な配色パターンです。

お問い合わせ

ツールに関するご要望やバグ報告は、お気軽にご連絡ください。

お問い合わせフォーム