ウェブサイトの配色：実際のページレイアウトで見る40のパレット

よいウェブサイトの配色とは、ページの大部分に落ち着いた背景色を1つ使い、コントラスト4.5:1以上の濃い文字色を合わせ、ボタンとリンクにはブランドのアクセントカラーを1色だけ使うものです。ここでは、オリジナルの配色40種を実際に動くページレイアウトで紹介し、それぞれにダークモード、コントラストの数値、コピーできるCSSとTailwindのコードを付けています。

以下は、このページのために作った40の配色です。それぞれをヒーロー、ボタン、料金カードのある小さなランディングページに適用しているので、色見本の並びとしてではなく、訪問者が目にするのと同じ形で判断できます。どの配色にもライト版とダーク版、実測したコントラスト比、そしてコピーしてすぐ使える2つの形式（素のCSS変数とTailwind CSS v4の@themeブロック）があり、デザイントークンに変換する方法のメモも付いています。

このコレクションの使い方

ウェブサイトの配色の選び方

1. パレットではなくブランドカラーから始める

すでにロゴの色があるなら、それがアクセントカラーです。ほかの色はすべてそれを中心に組み立てます。背景、文字色、カード用の少し明るい面の色、補足の行に使う控えめな文字色、そしてアクセントの上に載せる文字色です。先にきれいなパレットを選んでからロゴを無理に当てはめると、2種類の青が張り合うサイトになってしまいます。

まだブランドカラーがない場合は、その事業が訪問者にまず何を感じてほしいかで選びます。深い青や緑は慎重で実績がある印象、温かい赤やオレンジはエネルギッシュでおいしそうな印象、くすんだアースカラーは自然で穏やかな印象を与えます。これは慣習であって決まりではありません。競合がみな青だからこそ、ティールの水道業者が目立つこともあります。

2. 60-30-10の比率を出発点にする

60-30-10の法則はインテリアデザインから来たものです。部屋のおよそ60%を主となる色、30%をサブカラー、10%をアクセントカラーにします。ウェブサイトでは次のように置き換えられます。

割合ウェブページでの役割この配色での変数
約60%ページの背景と広い余白--bg
約30%文字、カード、パネル、フッター、ボーダー--text, --surface, --muted
約10%ボタン、リンク、アクティブ状態、1画面に1つの強調--accent, --on-accent

要点はアクセントを控えめに使うことです。何もかもがアクセントカラーなら、どれも行動を促すボタンになりません。数値は測定ではなく目安として使いましょう。ページを目を細めて見たとき、アクセントが画面の4分の1を覆っているなら使いすぎです。

3. 気に入る前にコントラストを確認する

Web Content Accessibility Guidelines（WCAG 2.2）は、多くのアクセシビリティ関連の法律や監査で使われるコントラストの基準を定めています。

対象最低限（AA）強化（AAA）WCAGの達成基準
本文4.5:17:11.4.3と1.4.6
大きな文字（18pt以上、または太字で14pt以上）3:14.5:11.4.3と1.4.6
ボタン、入力欄の枠線、意味を持つアイコン隣接する色に対して3:1AAAレベルなし1.4.11

このページの配色はすべて、ライト版とダーク版の両方で、本文、控えめな文字、アクセント上のボタンラベルが4.5:1を満たしています。大きな太字のラベルについてはWCAGの要件より厳しい基準ですが、ボタンの文字は小さいことが多いため、本文と同じ基準にしました。

比率は目分量ではなく、WCAGの相対輝度の計算式で求めています。hex値を変えたら、カラーコントラストチェッカーで確認し直してください。JavaScriptで書くと同じ計算は次のとおりです。

// WCAG 2.x contrast ratio between two hex colors
function luminance(hex) {
  const [r, g, b] = [0, 2, 4].map((i) => {
    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

contrast("#141a2e", "#f7f8fc"); // 16.26, AAA

4. ダーク版は意図して設計する

ライトのパレットを反転させても、うまくいくことはまずありません。ここでのダーク版は、4つの習慣に従っています。

5. 実際のレイアウトで試す

色見本ではバランスよく見える色も、ページ全体に使うと重く感じられることがあります。だからこそ、下の各配色はヒーローと料金カードで見せています。決める前に、自分のホームページに配色を当ててみて、屋外でスマートフォンで確認し、メインのボタンが最初に目に入るかを確かめましょう。

40の配色の一覧

コントラストの列は「ライト / ダーク」を示します。名前をクリックするとプレビューに移動します。

配色グループアクセント文字のコントラストボタンのコントラスト
Midnight LaunchSaaSとテック#3b4fe016.3 / 16.06.2 / 4.6
Signal MintSaaSとテック#0e7c6615.4 / 15.75.1 / 11.5
Graphite VoltSaaSとテック#c43d1616.2 / 15.95.2 / 6.2
Cloud IrisSaaSとテック#6a3fd115.8 / 16.16.5 / 4.7
Dev ConsoleSaaSとテック#13795b16.7 / 15.75.4 / 11.2
Ledger Navy金融と法律#1d4f9115.8 / 15.98.1 / 6.0
Vault Green金融と法律#1f6b3e15.0 / 15.76.5 / 9.5
Counsel Oxblood金融と法律#8a2a2b16.7 / 16.18.6 / 5.3
Steady Slate金融と法律#3e5f7d15.0 / 15.96.7 / 6.6
Brass Audit金融と法律#8a641416.1 / 15.75.4 / 9.6
Clinic Aqua健康とウェルネス#0b728514.2 / 15.85.6 / 9.8
Calm Sage健康とウェルネス#4f7a3a14.7 / 15.85.0 / 8.6
Soft Lavender健康とウェルネス#7445b015.2 / 16.16.5 / 5.1
Dental Bright健康とウェルネス#1769c215.1 / 16.05.5 / 6.3
Studio Clay健康とウェルネス#a4502a15.5 / 15.95.6 / 6.6
Tomato Table飲食とホスピタリティ#c0381f16.5 / 16.05.5 / 5.8
Espresso Bar飲食とホスピタリティ#7a4a2a15.6 / 15.87.4 / 7.0
Citrus Market飲食とホスピタリティ#b45a0015.8 / 15.84.8 / 8.1
Bistro Olive飲食とホスピタリティ#5c6b1f15.1 / 15.65.9 / 10.5
Berry Bakery飲食とホスピタリティ#b0285a16.2 / 16.16.4 / 5.4
Gallery Inkクリエイティブとポートフォリオ#e0301e18.1 / 16.04.5 / 5.6
Poster Cobaltクリエイティブとポートフォリオ#2340d816.6 / 16.17.5 / 4.7
Neon Studioクリエイティブとポートフォリオ#c0129a17.1 / 16.05.5 / 5.8
Paper Sketchクリエイティブとポートフォリオ#b5462a13.9 / 16.05.4 / 6.1
Film Tealクリエイティブとポートフォリオ#00756e15.0 / 15.75.6 / 11.6
Hardhat Orange地域の職人仕事と住まいのサービス#c4520a16.1 / 15.94.6 / 7.3
Pipeline Blue地域の職人仕事と住まいのサービス#0b5cad15.8 / 15.96.7 / 6.5
Roofline Charcoal地域の職人仕事と住まいのサービス#b3261e15.6 / 16.06.5 / 5.4
Fresh Lawn地域の職人仕事と住まいのサービス#2f7a1f15.5 / 15.75.3 / 9.9
Spark Electric地域の職人仕事と住まいのサービス#a15c0016.7 / 15.85.2 / 8.7
Forest Trail自然とアウトドア#2d6a4f14.8 / 15.86.4 / 8.7
Desert Dusk自然とアウトドア#b04a2815.1 / 15.95.5 / 6.3
Glacier Lake自然とアウトドア#14708f15.0 / 15.85.6 / 8.8
Moss and Stone自然とアウトドア#5a6b3a14.7 / 15.95.8 / 8.5
Coastal Dune自然とアウトドア#1f6f8b14.6 / 15.85.7 / 8.3
Noir Goldラグジュアリーとファッション#86651a17.3 / 15.75.4 / 9.4
Velvet Plumラグジュアリーとファッション#6d216016.5 / 16.010.3 / 5.8
Ivory Emeraldラグジュアリーとファッション#0f5f4615.7 / 15.77.7 / 11.2
Rose Atelierラグジュアリーとファッション#9c3d4a15.9 / 16.16.6 / 5.6
Onyx Sapphireラグジュアリーとファッション#24409a17.2 / 16.09.2 / 4.9
全40件を表示中

SaaSとテックの配色

プロダクトサイトには、メインの操作のためのはっきりしたアクセントと、情報の多い画面のための落ち着いたニュートラルカラーが必要です。この5つは背景を白に近く保ち、色はボタンとリンクに使っています。

Midnight Launch

Midnight料金 · お問い合わせ

チームが本当に読むリリースノートを

#586eb6の控えめなテキスト。

始める

スターター

$19

プランを選ぶ
色ライトダーク
背景#f7f8fc#10121b
面#ffffff#1a1b29
文字#141a2e#ededf3
控えめな文字#586eb6#81859c
アクセント#3b4fe0#5869e5
アクセント上の文字#ffffff#ffffff
コントラスト
文字16.26:1 AAA16.02:1 AAA
控えめな文字4.58:1 AA5.13:1 AA
ボタン6.21:1 AA4.60:1 AA

CSS変数 

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --text: #141a2e;
  --muted: #586eb6;
  --accent: #3b4fe0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1b29;
    --text: #ededf3;
    --muted: #81859c;
    --accent: #5869e5;
    --on-accent: #ffffff;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Signal Mint

Signal料金 · お問い合わせ

適切な担当者を起こす稼働監視アラート

#357e70の控えめなテキスト。

始める

チーム

$29

プランを選ぶ
色ライトダーク
背景#f4faf8#101b19
面#ffffff#1a2926
文字#0f2420#edf3f2
控えめな文字#357e70#7e9a95
アクセント#0e7c66#55e7ca
アクセント上の文字#ffffff#101b19
コントラスト
文字15.37:1 AAA15.68:1 AAA
控えめな文字4.55:1 AA5.82:1 AA
ボタン5.13:1 AA11.46:1 AAA

CSS変数 

:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --text: #0f2420;
  --muted: #357e70;
  --accent: #0e7c66;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b19;
    --surface: #1a2926;
    --text: #edf3f2;
    --muted: #7e9a95;
    --accent: #55e7ca;
    --on-accent: #101b19;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Graphite Volt

Graphite料金 · お問い合わせ

コーヒーが冷める前に請求書を送信

#6e6e81の控えめなテキスト。

始める

個人

$12

プランを選ぶ
色ライトダーク
背景#f5f5f2#1b1310
面#ffffff#291d1a
文字#18181a#f3eeed
控えめな文字#6e6e81#9a857e
アクセント#c43d16#e77655
アクセント上の文字#ffffff#1b1310
コントラスト
文字16.23:1 AAA15.92:1 AAA
控えめな文字4.57:1 AA5.26:1 AA
ボタン5.22:1 AA6.21:1 AA

CSS変数 

:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #18181a;
  --muted: #6e6e81;
  --accent: #c43d16;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #e77655;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cloud Iris

Cloud料金 · お問い合わせ

顧客からのあらゆる質問を1つの受信箱に

#7367b2の控えめなテキスト。

始める

グロース

$49

プランを選ぶ
色ライトダーク
背景#f8f7fd#13101b
面#ffffff#1e1a29
文字#1e1a33#eeedf3
控えめな文字#7367b2#89819c
アクセント#6a3fd1#8c6bdc
アクセント上の文字#ffffff#13101b
コントラスト
文字15.76:1 AAA16.14:1 AAA
控えめな文字4.57:1 AA5.09:1 AA
ボタン6.47:1 AA4.70:1 AA

CSS変数 

:root {
  --bg: #f8f7fd;
  --surface: #ffffff;
  --text: #1e1a33;
  --muted: #7367b2;
  --accent: #6a3fd1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101b;
    --surface: #1e1a29;
    --text: #eeedf3;
    --muted: #89819c;
    --accent: #8c6bdc;
    --on-accent: #13101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dev Console

Dev料金 · お問い合わせ

すべてのプルリクエストにデプロイプレビューを

#537768の控えめなテキスト。

始める

プロ

$24

プランを選ぶ
色ライトダーク
背景#f3f6f4#101b18
面#ffffff#1a2924
文字#101714#edf3f1
控えめな文字#537768#7e9a92
アクセント#13795b#58e5bb
アクセント上の文字#ffffff#101b18
コントラスト
文字16.71:1 AAA15.68:1 AAA
控えめな文字4.59:1 AA5.81:1 AA
ボタン5.37:1 AA11.19:1 AAA

CSS変数 

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --text: #101714;
  --muted: #537768;
  --accent: #13795b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a92;
    --accent: #58e5bb;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

金融と法律の配色

銀行、会計事務所、法律事務所は信頼で評価されるため、ここでは彩度の低い深いアクセントを使い、装飾は最小限にしています。それでもアクセントはボタンとして機能する必要があるため、どれもラベルとの組み合わせで4.5:1を満たしています。

Ledger Navy

Ledger料金 · お問い合わせ

従業員5〜50人の事務所向けの記帳代行

#3a70c5の控えめなテキスト。

始める

月次決算

$240

プランを選ぶ
色ライトダーク
背景#f6f7f9#10151b
面#ffffff#1a2029
文字#0f1d33#edeff3
控えめな文字#3a70c5#7e8a9a
アクセント#1d4f91#5e95df
アクセント上の文字#ffffff#10151b
コントラスト
文字15.75:1 AAA15.93:1 AAA
控えめな文字4.55:1 AA5.23:1 AA
ボタン8.14:1 AAA5.97:1 AA

CSS変数 

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f1d33;
  --muted: #3a70c5;
  --accent: #1d4f91;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2029;
    --text: #edeff3;
    --muted: #7e8a9a;
    --accent: #5e95df;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Vault Green

Vault料金 · お問い合わせ

自動で進む貯蓄目標

#417b59の控えめなテキスト。

始める

プラス

$6

プランを選ぶ
色ライトダーク
背景#f5f7f3#101b15
面#ffffff#1a2920
文字#13241a#edf3ef
控えめな文字#417b59#7e9a8a
アクセント#1f6b3e#69d394
アクセント上の文字#ffffff#101b15
コントラスト
文字15.04:1 AAA15.69:1 AAA
控えめな文字4.64:1 AA5.78:1 AA
ボタン6.50:1 AA9.54:1 AAA

CSS変数 

:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --text: #13241a;
  --muted: #417b59;
  --accent: #1f6b3e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b15;
    --surface: #1a2920;
    --text: #edf3ef;
    --muted: #7e9a8a;
    --accent: #69d394;
    --on-accent: #101b15;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Counsel Oxblood

Counsel料金 · お問い合わせ

労働法の相談を、わかりやすい言葉で

#a65c45の控えめなテキスト。

始める

初回相談

$150

プランを選ぶ
色ライトダーク
背景#faf7f5#1b1010
面#ffffff#291a1a
文字#24140f#f3eded
控えめな文字#a65c45#9a7e7f
アクセント#8a2a2b#d26a6b
アクセント上の文字#ffffff#1b1010
コントラスト
文字16.66:1 AAA16.09:1 AAA
控えめな文字4.65:1 AA5.02:1 AA
ボタン8.58:1 AAA5.33:1 AA

CSS変数 

:root {
  --bg: #faf7f5;
  --surface: #ffffff;
  --text: #24140f;
  --muted: #a65c45;
  --accent: #8a2a2b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1010;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a7e7f;
    --accent: #d26a6b;
    --on-accent: #1b1010;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Steady Slate

Steady料金 · お問い合わせ

毎月同じ日に実行される給与計算

#59718dの控えめなテキスト。

始める

コア

$39

プランを選ぶ
色ライトダーク
背景#f4f6f8#12161a
面#ffffff#1c2127
文字#1a2129#edf0f3
控えめな文字#59718d#7e8d9a
アクセント#3e5f7d#7da0bf
アクセント上の文字#ffffff#12161a
コントラスト
文字14.99:1 AAA15.89:1 AAA
控えめな文字4.65:1 AA5.33:1 AA
ボタン6.69:1 AA6.62:1 AA

CSS変数 

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2129;
  --muted: #59718d;
  --accent: #3e5f7d;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --surface: #1c2127;
    --text: #edf0f3;
    --muted: #7e8d9a;
    --accent: #7da0bf;
    --on-accent: #12161a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Brass Audit

Brass料金 · お問い合わせ

確定申告書を4月までに作成・提出

#847048の控えめなテキスト。

始める

個人向け

$180

プランを選ぶ
色ライトダーク
背景#fbf9f4#1b1810
面#ffffff#29241a
文字#211c12#f3f1ed
控えめな文字#847048#9a917e
アクセント#8a6414#e6b856
アクセント上の文字#ffffff#1b1810
コントラスト
文字16.10:1 AAA15.71:1 AAA
控えめな文字4.54:1 AA5.68:1 AA
ボタン5.37:1 AA9.58:1 AAA

CSS変数 

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --text: #211c12;
  --muted: #847048;
  --accent: #8a6414;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a917e;
    --accent: #e6b856;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

健康とウェルネスの配色

クリニック、セラピスト、スタジオは、清潔で安心できる印象を求めます。涼しげな青と緑が中心で、診療所らしさを和らげたいスパや理学療法院向けに、温かいクレイ色の選択肢も1つ入れています。

Clinic Aqua

Clinic料金 · お問い合わせ

かかりつけ医の予約がその週のうちに取れます

#267c8bの控えめなテキスト。

始める

予約なし

$0

プランを選ぶ
色ライトダーク
背景#f3f9fa#10191b
面#ffffff#1a2629
文字#0d2a2f#edf2f3
控えめな文字#267c8b#7e969a
アクセント#0b7285#55d0e7
アクセント上の文字#ffffff#10191b
コントラスト
文字14.21:1 AAA15.80:1 AAA
控えめな文字4.55:1 AA5.71:1 AA
ボタン5.59:1 AA9.82:1 AAA

CSS変数 

:root {
  --bg: #f3f9fa;
  --surface: #ffffff;
  --text: #0d2a2f;
  --muted: #267c8b;
  --accent: #0b7285;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191b;
    --surface: #1a2629;
    --text: #edf2f3;
    --muted: #7e969a;
    --accent: #55d0e7;
    --on-accent: #10191b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Calm Sage

Calm料金 · お問い合わせ

朝と夜のガイド付き呼吸法クラス

#5a7a4dの控えめなテキスト。

始める

ドロップイン

$15

プランを選ぶ
色ライトダーク
背景#f6f8f3#141a11
面#ffffff#1f271b
文字#1c2618#eff3ed
控えめな文字#5a7a4d#889a7e
アクセント#4f7a3a#92c17c
アクセント上の文字#ffffff#141a11
コントラスト
文字14.66:1 AAA15.78:1 AAA
控えめな文字4.54:1 AA5.88:1 AA
ボタン5.03:1 AA8.55:1 AAA

CSS変数 

:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #1c2618;
  --muted: #5a7a4d;
  --accent: #4f7a3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f271b;
    --text: #eff3ed;
    --muted: #889a7e;
    --accent: #92c17c;
    --on-accent: #141a11;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Soft Lavender

Soft料金 · お問い合わせ

自宅の静かな部屋から受けられるカウンセリング

#7d65a8の控えめなテキスト。

始める

1回のセッション

$90

プランを選ぶ
色ライトダーク
背景#f9f7fc#15101b
面#ffffff#201a28
文字#251d33#efedf3
控えめな文字#7d65a8#8d819c
アクセント#7445b0#9974c8
アクセント上の文字#ffffff#15101b
コントラスト
文字15.16:1 AAA16.11:1 AAA
控えめな文字4.59:1 AA5.13:1 AA
ボタン6.52:1 AA5.07:1 AA

CSS変数 

:root {
  --bg: #f9f7fc;
  --surface: #ffffff;
  --text: #251d33;
  --muted: #7d65a8;
  --accent: #7445b0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101b;
    --surface: #201a28;
    --text: #efedf3;
    --muted: #8d819c;
    --accent: #9974c8;
    --on-accent: #15101b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dental Bright

Dental料金 · お問い合わせ

クリーニング、定期検診、夜間診療

#3373bdの控えめなテキスト。

始める

初診検査

$79

プランを選ぶ
色ライトダーク
背景#f4f8fd#10151b
面#ffffff#1a2129
文字#0f2238#edf0f3
控えめな文字#3373bd#7e8c9a
アクセント#1769c2#559be7
アクセント上の文字#ffffff#10151b
コントラスト
文字15.08:1 AAA16.03:1 AAA
控えめな文字4.55:1 AA5.33:1 AA
ボタン5.47:1 AA6.31:1 AA

CSS変数 

:root {
  --bg: #f4f8fd;
  --surface: #ffffff;
  --text: #0f2238;
  --muted: #3373bd;
  --accent: #1769c2;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559be7;
    --on-accent: #10151b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Studio Clay

Studio料金 · お問い合わせ

マッサージと理学療法をひとつ屋根の下で

#9e6042の控えめなテキスト。

始める

60分

$95

プランを選ぶ
色ライトダーク
背景#fbf6f2#1b1410
面#ffffff#291e1a
文字#2b1a12#f3efed
控えめな文字#9e6042#9a877e
アクセント#a4502a#d78865
アクセント上の文字#ffffff#1b1410
コントラスト
文字15.54:1 AAA15.93:1 AAA
控えめな文字4.65:1 AA5.32:1 AA
ボタン5.59:1 AA6.58:1 AA

CSS変数 

:root {
  --bg: #fbf6f2;
  --surface: #ffffff;
  --text: #2b1a12;
  --muted: #9e6042;
  --accent: #a4502a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291e1a;
    --text: #f3efed;
    --muted: #9a877e;
    --accent: #d78865;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

飲食とホスピタリティの配色

飲食店や食品店は、食欲が温かい色に反応するため、より温かく目立つアクセントを使えます。料理の写真が真っ白な背景で冷たく見えないよう、背景はわずかにクリーム色にしています。

Tomato Table

Tomato料金 · お問い合わせ

薪窯ピザと、仲間と囲む長いテーブル

#b35944の控えめなテキスト。

始める

ファミリー向けコース

$58

プランを選ぶ
色ライトダーク
背景#fff8f3#1b1210
面#ffffff#291c1a
文字#2a1510#f3eeed
控えめな文字#b35944#9a837e
アクセント#c0381f#e46e58
アクセント上の文字#ffffff#1b1210
コントラスト
文字16.46:1 AAA16.01:1 AAA
控えめな文字4.51:1 AA5.19:1 AA
ボタン5.49:1 AA5.85:1 AA

CSS変数 

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --text: #2a1510;
  --muted: #b35944;
  --accent: #c0381f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291c1a;
    --text: #f3eeed;
    --muted: #9a837e;
    --accent: #e46e58;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Espresso Bar

Espresso料金 · お問い合わせ

毎週火曜日に焙煎するシングルオリジンの豆

#916548の控えめなテキスト。

始める

340 g入り1袋

$18

プランを選ぶ
色ライトダーク
背景#f8f3ee#1b1510
面#fffdfa#29201a
文字#241912#f3efed
控えめな文字#916548#9a897e
アクセント#7a4a2a#cd956f
アクセント上の文字#ffffff#1b1510
コントラスト
文字15.58:1 AAA15.83:1 AAA
控えめな文字4.58:1 AA5.38:1 AA
ボタン7.39:1 AAA7.00:1 AAA

CSS変数 

:root {
  --bg: #f8f3ee;
  --surface: #fffdfa;
  --text: #241912;
  --muted: #916548;
  --accent: #7a4a2a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1510;
    --surface: #29201a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #cd956f;
    --on-accent: #1b1510;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Citrus Market

Citrus料金 · お問い合わせ

金曜の朝に届くフルーツボックス

#82732fの控えめなテキスト。

始める

スモールボックス

$32

プランを選ぶ
色ライトダーク
背景#fffbef#1b1610
面#ffffff#29211a
文字#24200d#f3f0ed
控えめな文字#82732f#9a8c7e
アクセント#b45a00#e79e55
アクセント上の文字#ffffff#1b1610
コントラスト
文字15.77:1 AAA15.83:1 AAA
控えめな文字4.57:1 AA5.50:1 AA
ボタン4.77:1 AA8.06:1 AAA

CSS変数 

:root {
  --bg: #fffbef;
  --surface: #ffffff;
  --text: #24200d;
  --muted: #82732f;
  --accent: #b45a00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29211a;
    --text: #f3f0ed;
    --muted: #9a8c7e;
    --accent: #e79e55;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Bistro Olive

Bistro料金 · お問い合わせ

季節ごとに変わる短いメニュー

#6c743fの控えめなテキスト。

始める

テイスティングメニュー

$65

プランを選ぶ
色ライトダーク
背景#f7f6ee#191b10
面#ffffff#26291a
文字#1f2112#f2f3ed
控えめな文字#6c743f#959a7e
アクセント#5c6b1f#bed369
アクセント上の文字#ffffff#191b10
コントラスト
文字15.08:1 AAA15.61:1 AAA
控えめな文字4.60:1 AA5.97:1 AA
ボタン5.87:1 AA10.54:1 AAA

CSS変数 

:root {
  --bg: #f7f6ee;
  --surface: #ffffff;
  --text: #1f2112;
  --muted: #6c743f;
  --accent: #5c6b1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191b10;
    --surface: #26291a;
    --text: #f2f3ed;
    --muted: #959a7e;
    --accent: #bed369;
    --on-accent: #191b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Berry Bakery

Berry料金 · お問い合わせ

2日前までに注文するレイヤーケーキ

#b74e6aの控えめなテキスト。

始める

6インチのケーキ

$42

プランを選ぶ
色ライトダーク
背景#fdf5f7#1b1014
面#ffffff#291a1f
文字#2c1219#f3edef
控えめな文字#b74e6a#9a7e89
アクセント#b0285a#db618e
アクセント上の文字#ffffff#1b1014
コントラスト
文字16.21:1 AAA16.07:1 AAA
控えめな文字4.54:1 AA5.06:1 AA
ボタン6.37:1 AA5.41:1 AA

CSS変数 

:root {
  --bg: #fdf5f7;
  --surface: #ffffff;
  --text: #2c1219;
  --muted: #b74e6a;
  --accent: #b0285a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1014;
    --surface: #291a1f;
    --text: #f3edef;
    --muted: #9a7e89;
    --accent: #db618e;
    --on-accent: #1b1014;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

クリエイティブとポートフォリオの配色

ポートフォリオやスタジオは、もっと冒険できます。ここでは印刷されたポスターのように、黒に近い文字と強いアクセント1色を組み合わせ、残りの色は作品そのものに任せています。

Poster Cobalt

Poster料金 · お問い合わせ

50枚単位のシルクスクリーン印刷

#7d6a6aの控えめなテキスト。

始める

A2プリント

$70

プランを選ぶ
色ライトダーク
背景#f6f4ef#10121b
面#ffffff#1a1c29
文字#151515#edeef3
控えめな文字#7d6a6a#7e839a
アクセント#2340d8#6077e6
アクセント上の文字#ffffff#10121b
コントラスト
文字16.61:1 AAA16.12:1 AAA
控えめな文字4.61:1 AA4.98:1 AA
ボタン7.51:1 AAA4.69:1 AA

CSS変数 

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #151515;
  --muted: #7d6a6a;
  --accent: #2340d8;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1c29;
    --text: #edeef3;
    --muted: #7e839a;
    --accent: #6077e6;
    --on-accent: #10121b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Neon Studio

Neon料金 · お問い合わせ

音楽リリースのためのモーショングラフィックス

#785ec7の控えめなテキスト。

始める

リリックビデオ

$900

プランを選ぶ
色ライトダーク
背景#f7f5ff#1b1019
面#ffffff#291a25
文字#160f2b#f3edf1
控えめな文字#785ec7#9a7e94
アクセント#c0129a#e755c7
アクセント上の文字#ffffff#1b1019
コントラスト
文字17.11:1 AAA16.03:1 AAA
控えめな文字4.61:1 AA5.10:1 AA
ボタン5.53:1 AA5.75:1 AA

CSS変数 

:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --text: #160f2b;
  --muted: #785ec7;
  --accent: #c0129a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a25;
    --text: #f3edf1;
    --muted: #9a7e94;
    --accent: #e755c7;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Paper Sketch

Paper料金 · お問い合わせ

町やトレイルのイラストマップ

#7b6f5eの控えめなテキスト。

始める

オーダーメイドの地図

$650

プランを選ぶ
色ライトダーク
背景#f9f6ef#1b1210
面#fffdf8#291d1a
文字#2a2620#f3eeed
控えめな文字#7b6f5e#9a847e
アクセント#b5462a#da7a62
アクセント上の文字#ffffff#1b1210
コントラスト
文字13.93:1 AAA16.01:1 AAA
控えめな文字4.55:1 AA5.24:1 AA
ボタン5.42:1 AA6.09:1 AA

CSS変数 

:root {
  --bg: #f9f6ef;
  --surface: #fffdf8;
  --text: #2a2620;
  --muted: #7b6f5e;
  --accent: #b5462a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a847e;
    --accent: #da7a62;
    --on-accent: #1b1210;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Film Teal

Film料金 · お問い合わせ

非営利団体のための短編ドキュメンタリー

#45767dの控えめなテキスト。

始める

3分間の映像

$3,200

プランを選ぶ
色ライトダーク
背景#f2f6f6#101b1a
面#ffffff#1a2928
文字#142224#edf3f2
控えめな文字#45767d#7e9a98
アクセント#00756e#55e7de
アクセント上の文字#ffffff#101b1a
コントラスト
文字15.02:1 AAA15.67:1 AAA
控えめな文字4.66:1 AA5.83:1 AA
ボタン5.57:1 AA11.62:1 AAA

CSS変数 

:root {
  --bg: #f2f6f6;
  --surface: #ffffff;
  --text: #142224;
  --muted: #45767d;
  --accent: #00756e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b1a;
    --surface: #1a2928;
    --text: #edf3f2;
    --muted: #7e9a98;
    --accent: #55e7de;
    --on-accent: #101b1a;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

地域の職人仕事と住まいのサービスの配色

水道、屋根、電気、造園の業者には、日中の屋外でもスマートフォンの画面で目立つ電話ボタンが必要です。ここでのアクセントはどれも視認性の高い色で、ラベルも読みやすさを保っています。

Hardhat Orange

Hardhat料金 · お問い合わせ

キッチンと浴室のリフォームを最初から最後まで

#736f62の控えめなテキスト。

始める

現地調査

無料

プランを選ぶ
色ライトダーク
背景#f8f6f2#1b1410
面#ffffff#291f1a
文字#1b1a17#f3efed
控えめな文字#736f62#9a897e
アクセント#c4520a#e78e55
アクセント上の文字#ffffff#1b1410
コントラスト
文字16.12:1 AAA15.93:1 AAA
控えめな文字4.66:1 AA5.42:1 AA
ボタン4.61:1 AA7.28:1 AAA

CSS変数 

:root {
  --bg: #f8f6f2;
  --surface: #ffffff;
  --text: #1b1a17;
  --muted: #736f62;
  --accent: #c4520a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291f1a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #e78e55;
    --on-accent: #1b1410;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Pipeline Blue

Pipeline料金 · お問い合わせ

水道管の破裂？今夜、配管工が駆けつけます

#3c71b1の控えめなテキスト。

始める

出張料

$89

プランを選ぶ
色ライトダーク
背景#f3f6fa#10161b
面#ffffff#1a2129
文字#0f1c2c#edf0f3
控えめな文字#3c71b1#7e8c9a
アクセント#0b5cad#559ee7
アクセント上の文字#ffffff#10161b
コントラスト
文字15.84:1 AAA15.93:1 AAA
控えめな文字4.62:1 AA5.30:1 AA
ボタン6.67:1 AA6.45:1 AA

CSS変数 

:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --text: #0f1c2c;
  --muted: #3c71b1;
  --accent: #0b5cad;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559ee7;
    --on-accent: #10161b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Roofline Charcoal

Roofline料金 · お問い合わせ

屋根板1枚ずつの写真付きで行う屋根修理

#7f6c6cの控えめなテキスト。

始める

点検

$120

プランを選ぶ
色ライトダーク
背景#f5f5f5#1b1110
面#ffffff#291a1a
文字#1c1c1c#f3eded
控えめな文字#7f6c6c#9a807e
アクセント#b3261e#e36059
アクセント上の文字#ffffff#1b1110
コントラスト
文字15.63:1 AAA16.00:1 AAA
控えめな文字4.52:1 AA5.08:1 AA
ボタン6.54:1 AA5.36:1 AA

CSS変数 

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #7f6c6c;
  --accent: #b3261e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a807e;
    --accent: #e36059;
    --on-accent: #1b1110;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Fresh Lawn

Fresh料金 · お問い合わせ

毎週の芝刈りと春の片付け

#4f7c47の控えめなテキスト。

始める

週1回の訪問

$45

プランを選ぶ
色ライトダーク
背景#f4f8f1#121b10
面#ffffff#1c291a
文字#152113#eef3ed
控えめな文字#4f7c47#839a7e
アクセント#2f7a1f#79d864
アクセント上の文字#ffffff#121b10
コントラスト
文字15.53:1 AAA15.70:1 AAA
控えめな文字4.54:1 AA5.79:1 AA
ボタン5.35:1 AA9.93:1 AAA

CSS変数 

:root {
  --bg: #f4f8f1;
  --surface: #ffffff;
  --text: #152113;
  --muted: #4f7c47;
  --accent: #2f7a1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b10;
    --surface: #1c291a;
    --text: #eef3ed;
    --muted: #839a7e;
    --accent: #79d864;
    --on-accent: #121b10;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Spark Electric

Spark料金 · お問い合わせ

分電盤の増設とEV充電器の設置

#737359の控えめなテキスト。

始める

充電器の設置

$650

プランを選ぶ
色ライトダーク
背景#fbfaf2#1b1610
面#ffffff#29221a
文字#1a1a14#f3f0ed
控えめな文字#737359#9a8e7e
アクセント#a15c00#e7a855
アクセント上の文字#ffffff#1b1610
コントラスト
文字16.69:1 AAA15.83:1 AAA
控えめな文字4.64:1 AA5.60:1 AA
ボタン5.19:1 AA8.67:1 AAA

CSS変数 

:root {
  --bg: #fbfaf2;
  --surface: #ffffff;
  --text: #1a1a14;
  --muted: #737359;
  --accent: #a15c00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29221a;
    --text: #f3f0ed;
    --muted: #9a8e7e;
    --accent: #e7a855;
    --on-accent: #1b1610;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

自然とアウトドアの配色

アウトドアブランド、農園、ツアー会社、エコ製品向けです。オフホワイトに土を思わせるアクセントを合わせ、ダークモードはコードエディターではなく夕暮れのような雰囲気にしています。

Forest Trail

Forest料金 · お問い合わせ

少人数のガイド付きハイキング

#4a7958の控えめなテキスト。

始める

半日

$55

プランを選ぶ
色ライトダーク
背景#f3f6f2#111a16
面#ffffff#1a2822
文字#16241a#edf3f0
控えめな文字#4a7958#7e9a8e
アクセント#2d6a4f#77c5a3
アクセント上の文字#ffffff#111a16
コントラスト
文字14.81:1 AAA15.79:1 AAA
控えめな文字4.63:1 AA5.83:1 AA
ボタン6.39:1 AA8.71:1 AAA

CSS変数 

:root {
  --bg: #f3f6f2;
  --surface: #ffffff;
  --text: #16241a;
  --muted: #4a7958;
  --accent: #2d6a4f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --surface: #1a2822;
    --text: #edf3f0;
    --muted: #7e9a8e;
    --accent: #77c5a3;
    --on-accent: #111a16;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Desert Dusk

Desert料金 · お問い合わせ

日の出と日没の渓谷ツアー

#976646の控えめなテキスト。

始める

サンセットツアー

$75

プランを選ぶ
色ライトダーク
背景#fbf5ee#1b1310
面#ffffff#291d1a
文字#2b1d14#f3eeed
控えめな文字#976646#9a857e
アクセント#b04a28#db8061
アクセント上の文字#ffffff#1b1310
コントラスト
文字15.05:1 AAA15.92:1 AAA
控えめな文字4.51:1 AA5.26:1 AA
ボタン5.45:1 AA6.34:1 AA

CSS変数 

:root {
  --bg: #fbf5ee;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #976646;
  --accent: #b04a28;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #db8061;
    --on-accent: #1b1310;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Glacier Lake

Glacier料金 · お問い合わせ

時間単位のカヤックレンタル

#37749aの控えめなテキスト。

始める

2時間

$40

プランを選ぶ
色ライトダーク
背景#f1f6f9#10181b
面#ffffff#1a2529
文字#10222d#edf1f3
控えめな文字#37749a#7e939a
アクセント#14708f#55c2e7
アクセント上の文字#ffffff#10181b
コントラスト
文字14.97:1 AAA15.81:1 AAA
控えめな文字4.67:1 AA5.59:1 AA
ボタン5.61:1 AA8.78:1 AAA

CSS変数 

:root {
  --bg: #f1f6f9;
  --surface: #ffffff;
  --text: #10222d;
  --muted: #37749a;
  --accent: #14708f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #55c2e7;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Moss and Stone

Moss料金 · お問い合わせ

水やりがほとんど要らない在来植物の庭

#68725aの控えめなテキスト。

始める

庭のプラン

$300

プランを選ぶ
色ライトダーク
背景#f4f5f0#171912
面#ffffff#23261c
文字#1f221b#f1f3ed
控えめな文字#68725a#909a7e
アクセント#5a6b3a#a7bb81
アクセント上の文字#ffffff#171912
コントラスト
文字14.71:1 AAA15.86:1 AAA
控えめな文字4.63:1 AA6.00:1 AA
ボタン5.84:1 AA8.50:1 AAA

CSS変数 

:root {
  --bg: #f4f5f0;
  --surface: #ffffff;
  --text: #1f221b;
  --muted: #68725a;
  --accent: #5a6b3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171912;
    --surface: #23261c;
    --text: #f1f3ed;
    --muted: #909a7e;
    --accent: #a7bb81;
    --on-accent: #171912;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Coastal Dune

Coastal料金 · お問い合わせ

海まで歩いてすぐのビーチコテージ

#5c727cの控えめなテキスト。

始める

1泊あたり

$210

プランを選ぶ
色ライトダーク
背景#f9f6ef#10181b
面#ffffff#1a2529
文字#1d2427#edf1f3
控えめな文字#5c727c#7e939a
アクセント#1f6f8b#61bcdc
アクセント上の文字#ffffff#10181b
コントラスト
文字14.59:1 AAA15.81:1 AAA
控えめな文字4.68:1 AA5.59:1 AA
ボタン5.67:1 AA8.33:1 AAA

CSS変数 

:root {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --text: #1d2427;
  --muted: #5c727c;
  --accent: #1f6f8b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #61bcdc;
    --on-accent: #10181b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

ラグジュアリーとファッションの配色

宝飾店、ブティックホテル、ファッションブランドは、たいてい抑制を求めます。静かな背景、濃い文字、そして控えめに使う豊かなアクセント1色です。

Noir Gold

Noir料金 · お問い合わせ

受注製作の手仕上げの指輪

#7a6e62の控えめなテキスト。

始める

ご相談

無料

プランを選ぶ
色ライトダーク
背景#f8f6f1#1b1810
面#ffffff#29241a
文字#141210#f3f1ed
控えめな文字#7a6e62#9a927e
アクセント#86651a#e0b85d
アクセント上の文字#ffffff#1b1810
コントラスト
文字17.30:1 AAA15.71:1 AAA
控えめな文字4.59:1 AA5.73:1 AA
ボタン5.40:1 AA9.44:1 AAA

CSS変数 

:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --text: #141210;
  --muted: #7a6e62;
  --accent: #86651a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a927e;
    --accent: #e0b85d;
    --on-accent: #1b1810;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Velvet Plum

Velvet料金 · お問い合わせ

週末に借りられるイブニングウェア

#a5538eの控えめなテキスト。

始める

週末レンタル

$120

プランを選ぶ
色ライトダーク
背景#f9f5f8#1b1019
面#ffffff#291a26
文字#24121f#f3edf2
控えめな文字#a5538e#9a7e95
アクセント#6d2160#d26ac0
アクセント上の文字#ffffff#1b1019
コントラスト
文字16.46:1 AAA16.04:1 AAA
控えめな文字4.60:1 AA5.10:1 AA
ボタン10.31:1 AAA5.78:1 AA

CSS変数 

:root {
  --bg: #f9f5f8;
  --surface: #ffffff;
  --text: #24121f;
  --muted: #a5538e;
  --accent: #6d2160;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a26;
    --text: #f3edf2;
    --muted: #9a7e95;
    --accent: #d26ac0;
    --on-accent: #1b1019;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Ivory Emerald

Ivory料金 · お問い合わせ

古い港を見下ろす12室のホテル

#3e7c65の控えめなテキスト。

始める

ガーデンルーム

$340

プランを選ぶ
色ライトダーク
背景#f8f7f2#101b18
面#ffffff#1a2924
文字#10201a#edf3f1
控えめな文字#3e7c65#7e9a91
アクセント#0f5f46#58e5b9
アクセント上の文字#ffffff#101b18
コントラスト
文字15.74:1 AAA15.68:1 AAA
控えめな文字4.58:1 AA5.80:1 AA
ボタン7.65:1 AAA11.18:1 AAA

CSS変数 

:root {
  --bg: #f8f7f2;
  --surface: #ffffff;
  --text: #10201a;
  --muted: #3e7c65;
  --accent: #0f5f46;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a91;
    --accent: #58e5b9;
    --on-accent: #101b18;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Rose Atelier

Rose料金 · お問い合わせ

2回の試着が含まれるブライダルのお直し

#a65b57の控えめなテキスト。

始める

試着パッケージ

$280

プランを選ぶ
色ライトダーク
背景#fcf6f5#1b1012
面#ffffff#281a1c
文字#2a1716#f3eded
控えめな文字#a65b57#9a7e82
アクセント#9c3d4a#c9747f
アクセント上の文字#ffffff#1b1012
コントラスト
文字15.93:1 AAA16.07:1 AAA
控えめな文字4.62:1 AA5.03:1 AA
ボタン6.60:1 AA5.57:1 AA

CSS変数 

:root {
  --bg: #fcf6f5;
  --surface: #ffffff;
  --text: #2a1716;
  --muted: #a65b57;
  --accent: #9c3d4a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1012;
    --surface: #281a1c;
    --text: #f3eded;
    --muted: #9a7e82;
    --accent: #c9747f;
    --on-accent: #1b1012;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Onyx Sapphire

Onyx料金 · お問い合わせ

認定技術者による時計のメンテナンス

#586db6の控えめなテキスト。

始める

フルサービス

$450

プランを選ぶ
色ライトダーク
背景#f5f6f8#10131b
面#ffffff#1a1d29
文字#0e1220#edeef3
控えめな文字#586db6#7e859a
アクセント#24409a#627eda
アクセント上の文字#ffffff#10131b
コントラスト
文字17.25:1 AAA16.03:1 AAA
控えめな文字4.54:1 AA5.05:1 AA
ボタン9.23:1 AAA4.88:1 AA

CSS変数 

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #0e1220;
  --muted: #586db6;
  --accent: #24409a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131b;
    --surface: #1a1d29;
    --text: #edeef3;
    --muted: #7e859a;
    --accent: #627eda;
    --on-accent: #10131b;
  }
}

Tailwind v4 

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

コードブロックの使い方

素のCSS変数

CSSブロックは:rootに6つの変数を定義し、@media (prefers-color-scheme: dark)の中で再定義しています。そのため、JavaScriptなしで訪問者のシステム設定に従います。どこでも使えます。

body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }
.small { color: var(--muted); }
.button { background: var(--accent); color: var(--on-accent); }

手動の切り替えも必要な場合は、ダークの値を:root[data-theme="dark"] { ... }のような2つ目のルールにコピーし、トグルからその属性を設定します。

Tailwind CSS v4

Tailwind v4では、テーマの値はCSSの@themeブロック内に置かれ、--color-*という名前の変数はどれも色のユーティリティになります。つまり--color-accentからbg-accent、text-accent、border-accentが使えるようになります。各配色のTailwindブロックは、@theme inlineでそれらの名前をその上のCSS変数に対応付けています。これは、ほかの変数を参照するテーマ値のためにTailwindが説明している方法です。@import "tailwindcss";の後に、まずCSS変数、次に@themeブロックを貼り付けます。ユーティリティはメディアクエリが変更するのと同じ変数を指しているので、ダークモードもそのまま機能します。

<section class="bg-bg text-text">
  <div class="bg-surface rounded-xl p-6">
    <p class="text-muted">Starter plan</p>
    <a class="bg-accent text-on-accent rounded-lg px-4 py-2">Get started</a>
  </div>
</section>

Tailwind v3を使っていますか？その場合は、同じライトのhex値をtailwind.config.jsのtheme.extend.colorsに入れてください。1つのアクセントから50〜950の濃淡スケール全体を生成したいなら、Tailwindカラーパレットジェネレーターが使えます。

デザイントークン

配色をデザイントークンのツールに取り込むには、6つの役割をDesign Tokens Community GroupのJSON形式のトークンに対応付けます。$typeをcolor、hexを$valueとし、lightとdarkの2つのグループに分けます。

{
  "color": {
    "light": { "accent": { "$type": "color", "$value": "#3b4fe0" } },
    "dark":  { "accent": { "$type": "color", "$value": "#5869e5" } }
  }
}

Style Dictionaryなど、この形式を読み込めるツールは、CSS、iOS、Androidの値に変換できます。

配色でよくある失敗

自分の配色を作るためのツール

配色を試すレイアウトはヒーローセクションや料金表のコンポーネントから探し、色に合う書体はウェブサイトにおすすめのフォントから選びましょう。

よくある質問

ウェブサイトによい配色とは？

ページの大部分を覆う落ち着いた背景、その背景に対して4.5:1以上のコントラストを持つ濃い文字色、そしてボタンとリンク専用のアクセントカラー1色を備えた配色です。アクセントはブランドに合わせ、その上のボタンラベルも4.5:1を満たす必要があります。

ウェブサイトには何色使うべき？

ほとんどのサイトは5〜6の役割で足ります。背景、カード用の面、メインの文字、控えめな文字、アクセント、そしてアクセントの上に使う文字色です。赤、琥珀色、緑は、エラー、警告、成功のメッセージにだけ追加します。

ウェブデザインの60-30-10の法則とは？

インテリアデザインから借りた比率の目安です。およそ60%を主となる色（ページの背景）、30%をサブカラー（文字、カード、パネル）、10%をアクセント（ボタン、リンク、強調）にします。アクセントを少なく保つことで、注目を集められます。

WCAGが文字に求めるコントラスト比は？

WCAG 2.2のレベルAAでは、通常の文字に4.5:1以上、大きな文字（18ポイント以上、または太字で14ポイント以上）に3:1以上が求められます。レベルAAAではそれぞれ7:1と4.5:1に上がります。ボタン、入力欄の枠線、意味を持つアイコンには、周囲に対して3:1が必要です。

これらの配色は商用サイトで使えますか？

はい。これらのパレットはこのページのために私たちが作ったもので、個人・商用を問わずどんなプロジェクトでもクレジット表記なしで使えます。

配色のダークモード版はどう作りますか？

単純に反転させないでください。ブランドの色相で色みを付けたごく暗い背景、オフホワイトの文字色、そして見えるように明るくしたアクセントを使います。そのうえで、文字とボタンラベルのコントラストを確認し直します。ボタンラベルは白から暗い色に切り替える必要があるかもしれません。

プレビュー

ライトまたはダークのプレビュー

ライト

ダーク

雰囲気で絞り込む

すべて

SaaS

金融

健康

飲食

クリエイティブ

職人仕事

自然

ラグジュアリー

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る