Webサイト配色プレビュー
5色をWebページに当てはめて配色を確認。文字のコントラストをチェックし、CSS変数を書き出せます。
関連ツール： 読みやすい文字色ジェネレーター , ランダムグラデーション生成ツール , ランダム5色パレット生成 など
5色の使い道を決める
単色のsRGB HEXカラーを3桁または6桁で入力してください。#は省略できます。変更はすぐにプレビューへ反映されます。
空白・カンマ・セミコロンで区切り、ページ背景、カード背景、ページ文字、ボタン背景、ボタン文字の順に入力してください。有効な5色がそろうと即座に適用されます。適用後に色を入れ替えることもできます。
Webページの配色プレビュー
一般的なWeb要素に配色を適用した表示用サンプルです。ナビゲーションとボタンは見た目を確認するためのものです。
次のアイデアが生まれる場所。
Webサイトやポートフォリオ、ダッシュボードを制作する前に、ページ全体で色がどう調和するかを確認しましょう。
小さなアイデアを、わかりやすく
カードは情報をまとめるのに便利です。ページ背景とカード背景のどちらでも本文が読みやすいか確認してください。
作品を見る表示中の文字と背景のコントラスト
ページ文字 / ページ背景
#1E293B / #F1F5F9
コントラスト比： 13.35:1
- 通常文字 AA（4.5:1）: 適合
- 通常文字 AAA（7:1）: 適合
- 大きな文字 AA（3:1）: 適合
カード文字 / カード背景
#1E293B / #FFFFFF
コントラスト比： 14.63:1
- 通常文字 AA（4.5:1）: 適合
- 通常文字 AAA（7:1）: 適合
- 大きな文字 AA（3:1）: 適合
ボタン文字 / ボタン背景
#FFFFFF / #1D4ED8
コントラスト比： 6.70:1
- 通常文字 AA（4.5:1）: 適合
- 通常文字 AAA（7:1）: 不適合
- 大きな文字 AA（3:1）: 適合
WCAG 2のsRGB計算式で、単色の文字と背景の3組を確認します。判定には丸める前の値を使い、小数点以下2桁で表示します。大きな文字は通常の太さで24 CSS px以上、太字で18⅔ CSS px以上です。
配色をCSS変数で書き出す
プレビューと同じ5色をカスタムプロパティとして出力します。スタイルシートに追加し、var(--palette-background)、var(--palette-surface)、var(--palette-text)、var(--palette-primary)、var(--palette-on-primary)で参照してください。
Webサイトの配色を確認する方法
- 5色のHEXを個別に入力するか、リストを貼り付けます。5色パレット生成ツールから開くこともできます。
- ページ・カード・文字・ボタンに色を割り当てます。入れ替えメニューで別の組み合わせを試せます。
- プレビューと3組のコントラストを確認し、CSS変数をコピーするか.cssファイルを保存します。
配色の試し方
- 淡いページ背景、白いカード、濃い文字、青いボタンのサンプルで、企業サイトの配色を検討できます。
- ページ背景と文字色を入れ替えてダークな配色を試し、カードとボタンのコントラストも確認しましょう。
- 写真やブランドカラーから選んだ5色を画面要素に割り当て、文字の読みやすさを比較できます。
よくある質問
色の濃淡を作るツールとの違いは？
このツールは手持ちの5色をページの役割に割り当て、Webページ上で見比べるためのものです。明るい色や暗い色を新たに生成するのではなく、役割を入れ替えて既存パレットの使い方を試せます。
どの色同士のコントラストを確認しますか？
ページ文字とページ背景、ページ文字とカード背景、ボタン文字とボタン背景の3組です。それぞれについて通常文字AA・通常文字AAA・大きな文字AAの判定を表示します。
4.50:1と表示されているのにAA不適合になるのはなぜ？
表示値は小数点以下2桁に丸めていますが、判定には丸める前の値を使います。実際の比率が4.5:1をわずかに下回る場合、表示が4.50:1でも通常文字AAには適合しません。
CSSを書き出すだけでサイトの配色が変わりますか？
5つのCSSカスタムプロパティを書き出し、サイトの背景、文字、ボタンのスタイルから参照して配色を適用できます。
入力した色は保存・送信されますか？
編集した色はこのブラウザータブ内で処理され、解析イベントには含まれません。パレット生成ツールから開く場合は同じタブの一時的なセッションストレージで受け渡し、正常に読み込むと削除します。残したい場合はコピーまたはダウンロードしてください。
配色はこのブラウザータブ内で処理され、色の値は解析イベントやURLに含まれません。生成ツールから明示的に送ったパレットは、同じタブの一時的なセッションストレージで受け渡され、読み込み後に削除されます。保存するにはコピーまたはダウンロードしてください。
このツールは便利でしたか？チームと共有して、作業をよりスムーズにしましょう。
役に立った場合は を、改善が必要な場合は を押してください。優先的に対応します。