色を決める前の確認を一画面で

できること

配色は、基準となる色とその値さえ固まれば一気に進みます。このツールに基準色を入力すると、HEX・RGB・HSL・CSS変数の形で値を表示し、そのままコピーできます。日本の伝統色、Web UI向けの色、海外で使いやすい色など、目的別のパレットも用意しています。

画像を読み込めば主色を抽出できるので、写真やサムネイルの雰囲気に合わせて配色を決めたいときにも使えます。CSSグラデーションの生成にも対応しています。

配色の例

たとえばブランドカラーが #0071e3（青）だとして、これを基準色に入れると同系のトーン違いや、背景に敷いたときに文字が読めるかのコントラストの目安が分かります。本文の文字色（濃いグレー）と背景（白〜淡色）の組み合わせを先に決めておくと、ページ全体で「読みやすさ」を保ったまま色を展開できます。決めた値は CSS変数としてコピーして、そのまま実装に渡せます。

使う場面

• Webサイト・LPの配色：主色・文字色・背景色の3点を、コントラストを見ながら決められます。
• 資料・スライド：本文とアクセントの色を統一し、見出しの強調色を選べます。
• 写真に合わせる：サムネイルやバナーの写真から主色を取り、馴染む配色を作れます。
• 実装への受け渡し：HEX/RGB/CSS変数をコピーして、デザインから実装へそのまま渡せます。

使う流れ

まず基準色を入力し、文字色とのコントラストを確認します。必要に応じて目的別パレットや画像の主色抽出から色を選び、最後にCSSグラデーションやCSS変数をコピーします。画像の色抽出を含め、処理はすべてブラウザ内で行い、外部へは送りません。

確認事項

読みやすさの確認はコントラスト比を目安にしますが、最終的には実際の画面で、文字サイズや背景・周囲の色とあわせて見直してください。モニタや環境によって色の見え方は変わるため、印刷や別端末で使う場合は実物での確認をおすすめします。