← 戻る
文字
📝 本文やタイトルの色
読みやすさに直結します
背景
🖼️ ページ全体の背景色
サイトの印象を決めます
主色
🎯 ボタンやリンクの色
ブランドカラーになります
副色
🃏 カードや見出し背景の色
主色の薄い版が定番です
強調
✨ 注目させたい部分の色
主色と違う色にすると映えます
Space おまかせ配色 D ダーク/ライト切替 E エクスポート
テーマ:

あなたのサイトの
配色を今すぐ確認

5つの色を選ぶだけで、Webサイトの見た目をリアルタイムにプレビューできます。登録不要、無料で使えます。

リアルタイム反映

色を変えた瞬間にプレビューが更新されます。何度でも試せるので、納得いくまで調整できます。

🔍

コントラスト判定

WCAG基準のAAおよびAAAレベルで可読性を自動チェック。アクセシビリティも配慮された配色を作れます。

📦

CSSエクスポート

決まった配色はワンクリックでCSS変数としてコピー。そのままプロジェクトに貼り付けるだけ。

5
カラーロール
組み合わせ
0円
ずっと無料
AA
コントラスト判定

配色を決めたら、すぐ使える

CSSをコピーして、あなたのプロジェクトに貼り付けるだけ。

配色選びで迷わないために

Webサイトの配色は、ユーザーの第一印象を決める最も重要な要素のひとつです。良い配色は情報の優先順位を明確にし、ブランドの個性を伝えます。

基本は5つのカラーロールを決めること。文字色で読みやすさを確保し、背景色でトーンを作り、主色でブランドを表現する。副色と強調色で変化をつければ、バランスの取れた配色が完成します。

迷ったらランダム生成を何度か試して、気に入った方向性が見つかったら微調整するのがおすすめです。

コントラスト判定(WCAG 2.1)