配色のアイデアを、使えるWebサイトの色にする

ブランド写真や参考画像がある場合、特定の場所の色は画像カラーピッカーで取得します。画像全体の主な色をまとめたいときは画像カラーパレット抽出が便利です。抽出結果は写真の色を反映したものなので、そのまま本文やボタンに適しているとは限りません。

たとえばカフェのサイトなら、クリーム色を背景に、コーヒーブラウンをアクセントに、落ち着いた緑を装飾に割り当てます。色を増やす前に役割を決めると、ページの印象を整えやすくなります。元になる画像がなければ、ランダムな配色から気になる1色を選んで始めましょう。

5色カラーパレット生成では、個別の色をロックし、未ロックの色だけを再生成できます。配色モードを選ぶと、現在の並びで最初にあるロック済みの色が新しい色の基準になります。ほかのロック済みの色は、選んだ配色関係に合わなくてもそのまま残ります。

まずブランドカラーを固定し、それに合わせる背景色や補助色を比較しましょう。ロック済みの色を並べ替えると、基準となる色も変わることがあります。すべてロックしている場合は、1色以上を解除してから再生成します。色相の調和と文字の読みやすさは、別々に確認してください。

1. 残したい主役の色を1つ選び、ロックする。
2. 配色モードを選び、未ロックの色を再生成する。
3. 背景、面、文字、アクセント、装飾など、各色の役割を決める。

色バリエーション生成では、1つの基準色から白や黒を混ぜた色、透明度を変えた色を作れます。カードの淡い背景や、ボタンの濃い状態色を探すときに役立ちます。基準色に対する黒文字と白文字のコントラスト比も表示されますが、文字色の候補を幅広く探す機能とは用途が異なります。

半透明の色は、背後の色によって見え方が変わります。実際のページに重ねて確認しましょう。デザインデータとCSSの色形式が違う場合はカラーコード変換を使い、HEXやRGB、HSLの最終値を記録します。画面上の見た目だけで引き継がないことが大切です。

読みやすい文字色ツールは、入力した単色背景に対する文字色を提案します。目標は通常文字のAAが4.5:1、通常文字のAAAが7:1、大きな文字のAAが3:1です。既存の2色はコントラストチェックで数値を確認できます。3:1は大きな文字のAA向けで、通常の本文向けではありません。

商品説明やフォームの文字は通常文字の目標で評価し、実際の書体で読み心地も確認してください。続いて、リンク、フォーカス表示、エラーメッセージ、操作時の状態の読みやすさを確認しましょう。基準の詳しい説明は下記のW3C資料を参照できます。

ランダムグラデーション生成では、2色または3色のCSS線形グラデーションを作れます。色と角度を編集して、CSSをコピーするかファイルとして保存しましょう。まず2色で試し、中間の色を明確に指定したいときに3色目を加えると調整しやすくなります。

単色背景で文字のコントラストが十分でも、グラデーション全体で十分とは限りません。文字の下に来る背景を確認し、スマートフォンでの改行や表示範囲の変化もチェックします。安定した見やすさを確保しにくい場合は、文字を単色のパネルに載せ、周囲にグラデーションを使う方法があります。

配色プレビューでは、5色をページ背景、面の背景、文字、主な操作、主な操作上の文字に割り当てます。色見本の並びがきれいでも、その役割で使いやすいとは限りません。サンプルの本文とボタンを見ながら、役割ごとに調整しましょう。

5色カラーパレット生成でプレビュー操作を明示的に選ぶと、現在の5色が背景、面、文字、主な操作、ボタン文字の順に引き継がれます。通常のリンクで開くだけでは、生成中のパレットは渡されません。この操作では現在のブラウザータブ内で色を渡し、URLには色を含めません。

プレビューからCSSカスタムプロパティをコピーし、自分のスタイルシートで各役割に対応させます。5色は実装の出発点であり、テーマ全体やアクセシビリティが自動で完成するわけではありません。本文、ボタン文字、ホバー、フォーカス、実際に組み合わせる背景を公開前に確認してください。

各色の役割、最終的なカラーコード、確認した文字色と背景色の組み合わせを記録します。「ページ背景」「主な操作ボタン」のように用途を添えると、HEXの一覧だけよりも後から使いやすくなります。グラデーションは角度と色の順番も必要なので、CSS全体を別に保存しましょう。

公開前には実際の文章で、長い本文、ホバー、キーボードフォーカス、対応している場合はライト・ダーク両方の表示を確認します。背景色や透明度を変えると、以前のコントラスト結果は使えなくなる場合があります。文字色か背景色を変更したら、その組み合わせを再確認してください。