緑のWebサイト配色:HEXコード付き6パターン

HEXコード付きのグリーン系Webサイト配色パターンを紹介。コントラスト比を検証した文字色の組み合わせと用途別の選び方で、読みやすくブランドに合う緑が見つかります。

よくある質問

Webサイトに最適な緑は何色ですか?

唯一の正解はありませんが、#166534 や #2D6A4F のような、深みがあって彩度をやや抑えた緑が最も無難な出発点です。どちらも白背景に対してWCAG AAの文字基準である4.5:1をクリアしており(それぞれ7.13:1と6.39:1)、ボタン、リンク、見出しに使えます。#22C55E のような明るい緑は白背景では基準を満たさず(2.28:1)、アイコンや暗い背景での使用にとどめるのが適切です。

Webサイトで緑と相性のよい色は何ですか?

温かみのあるオフホワイトやクリーム色(#F6F4EC)、黒に近い深緑(#081C15)、そしてアンバーやテラコッタなどの暖色アクセントが好相性です。ニュートラルカラーは純粋なグレーではなく緑寄りの色味にすると、ページ全体にまとまりが出ます。アクセントカラーは行動を促す色1色に絞りましょう。

緑は文字色としてアクセシビリティに問題ありませんか?

濃い緑は問題ありませんが、明るい緑や中間の緑は基準を満たさないことが多くあります。WCAG 2 AAでは、通常サイズの文字に4.5:1以上、大きな文字やUIコンポーネントに3:1以上が求められます。#40916C(白背景で3.83:1)のような中間トーンの緑は、大きな文字でしか基準を満たさない領域にあるため、見た目で判断せず必ず組み合わせごとに検証してください。

Webデザインにおいて緑はどんな印象を与えますか?

緑は一般に、自然、成長、健康、サステナビリティ、お金を連想させる色で、ウェルネス、金融、エネルギー、アウトドア系のサイトで多く使われます。印象は色合いによっても変わり、深いフォレストグリーンは安定感と落ち着きを、ライムは活力と現代的な印象を与えます。これらはあくまで一般的な傾向であり、必ずしも当てはまるとは限らないため、ご自身のターゲット層で検証してください。

CTAボタンに緑を使ってもよいですか?

ボタンがページ内で目立ち、ラベルのコントラストが基準を満たしていれば問題ありません。明るいページには、濃い緑のボタンに白い文字の組み合わせが有効です。緑が多用されたページでは、暖色のアクセントボタンのほうが際立つことがよくあります。判断のしかたは、コンバージョンにつながる配色の解説ガイドもご覧ください。

緑のダークモード用パレットは必要ですか?

必須ではありませんが、濃い緑の背景はそれだけでも人気のあるデザインです。ダークモードを用意する場合は、ライトモードのパレットをそのまま流用しないでください。白背景では基準を満たさない明るい緑も、黒に近い深緑の上ならよく映えます。たとえば #052E16 の上の #22C55E は6.54:1です。

結論: 緑を使ったWebサイトでは、ボタン・リンク・見出しに #166534 や #2D6A4F のような深い緑、背景に #F6F4EC や #F0FDF4 のような色味を帯びたオフホワイトを使いましょう。#22C55E のような明るい緑は、暗い背景や装飾だけに使います。明るい背景上の濃い緑はWCAG AAの文字基準である4.5:1を満たしますが、白背景上の明るい緑は満たしません(白背景上の #22C55E は2.28:1です)。

以下では、HEX値、実測したコントラスト比、向いているサイトの種類とともに、6つの緑のパレットを紹介します。すべての比率はWCAGの相対輝度の計算式で算出しており、任意の組み合わせをコントラストチェッカーで自分で確認することもできます。

画面上で緑の扱いが難しい理由

緑は輝度の中間域に位置します。中間の緑は鮮やかに見えますが、白の上では文字色として明るすぎることが多く、黒の上では暗すぎることが多いのです。ロゴでは見栄えのよい緑が、ボタンの色としては基準を満たさないことがあるのはこのためです。

実践的なルールは、スウォッチ上の見た目ではなくコントラスト比で緑を選ぶことです。通常の文字では4.5:1以上を目安にしてください。大きな文字(目安として24px以上の標準ウェイト、または19px以上の太字)や、入力欄の枠線・アイコンなどのUIコンポーネントでは、最低3:1が必要です。

HEXコード付き 緑のWebサイト配色6パターン

各パレットには、背景色、文字色、ボタンやリンク用のアクセントカラー、そして重要な組み合わせのコントラスト比を載せています。

1. フォレストとクリーム(エディトリアル、アウトドア、飲食向け)

役割HEX組み合わせと比率
背景#F6F4EC
文字・見出し#1B4332背景上:10.06:1
ボタン/リンク#2D6A4Fその上の白文字:6.39:1
ソフトパネル#95D5B2その上の #1B4332 の文字:6.56:1

温かみがあり、落ち着いていて読みやすい配色です。クリーム色の背景が無機質な印象を和らげます。レストラン、農産物の直売店、旅行、長文コンテンツのサイトに向いています。

2. フレッシュミント(ウェルネス、クリニック、健康コンテンツ向け)

役割HEX組み合わせと比率
背景#F0FDF4
文字・見出し#14532D背景上:8.70:1
ボタン#15803Dその上の白文字:5.02:1
ダークバンド#052E16その上の #DCFCE7 の文字:13.57:1

明るく清潔感のある配色です。ボタンの緑はAA基準をわずかに上回る程度なので、ボタンのラベルは標準以上の太さにし、色付きのパネルの上には置かないでください。

3. セージとオリーブ(スタジオ、インテリア、ハンドメイド向け)

役割HEX組み合わせと比率
背景#E9F5DB
文字・見出し#31572C背景上:7.33:1
ボタン#4F772Dその上の白文字:5.24:1
ハイライト#90A955その上の #132A13 の文字:5.84:1

落ち着いたアースカラー系のパレットです。緑を使いつつも主張しすぎたくない、ポートフォリオやブティック系ブランドによく合います。

4. ディープグリーンのダークテーマ(フィンテック、SaaS、プレミアム向け)

役割HEX組み合わせと比率
背景#081C15
文字#B7E4C7背景上:12.58:1
アクセント/リンク#40916C背景上:4.62:1
カード#1B4332その上の #95D5B2 の文字:6.56:1

暗い背景では、中間の緑もアクセントとして機能します。ただし #40916C は #081C15 の上では基準を満たしますが、白の上では満たさない(3.83:1)ため、明るいセクションには流用しないでください。

5. ダークグリーンにネオンライム(イベント、クリエイター、若者向けブランド)

役割HEX組み合わせと比率
背景#1A2E05
見出し/ボタン#A3E635背景上:9.69:1
代替の明るい色#22C55E#052E16 の上:6.54:1

エネルギッシュで視認性も非常に高い配色です。暗い下地の上に明るいライムを置いているためです。使いすぎは禁物で、ページ全体がライムだとすぐに目が疲れてしまいます。

6. ティールグリーン(SaaS、ヘルステック、サステナビリティ向け)

役割HEX組み合わせと比率
背景#CCFBF1
文字・見出し#134E4A背景上:8.41:1
ボタン#0F766Eその上の白文字:5.47:1

青みがかった緑で、「自然」というより先進的でテクニカルな印象になります。オーガニックな雰囲気は避けて緑を使いたいときに最適です。

基準を満たさない緑と、代わりに使う色

基準を満たさない例組み合わせ比率代替案
明るい緑のボタン#22C55E と白文字2.28:1#15803D と白文字(5.02:1)
白背景上のライム色リンク白背景上の #65A30D3.09:1白背景上の #4D7C0F(4.99:1)
中間の緑の本文テキスト白背景上の #40916C3.83:1白背景上の #2D6A4F(6.39:1)

中間トーンの色は3:1の基準は満たすので、大きな見出し、アイコン、枠線には使えますが、本文や小さなリンクには使えません。何が問題になりやすいかについてはコントラストが不十分な配色の例を、より良い組み合わせ全般については高コントラストのカラーパレットのガイドをご覧ください。

自分だけの緑のパレットを作る手順

  1. まず緑の役割を決める。 ブランドカラーなのか、行動を促す色なのか、単なるアクセントなのか。ブランド専用の緑なら、どんな色合いでも構いません。行動を促す緑は、コントラストを満たす必要があります。
  2. 暗いアンカーカラーを選ぶ。 #14532D から #2D6A4F あたりの緑から始めます。これが明るい背景上での見出し、リンク、ボタンの色になります。
  3. 背景に色味を加える。 純白ではなく、ごく薄い緑や温かみのあるクリーム色(例:#F0FDF4 や #F6F4EC)を使います。色味を付けたあとは、文字のコントラストを再確認してください。
  4. 緑以外のアクセントを1色加える。 緑の多いページでは、アンバーやテラコッタを使うとボタンが際立ちます。ラベルのコントラストも確認しましょう。たとえば #FEF3C7 の上の #92400E は6.37:1です。
  5. 文字と背景のすべての組み合わせをテストする。 見出し、本文、リンク、ボタン、プレースホルダーをチェッカーにかけます。本文サイズで4.5:1を下回るものは、より濃い、またはより薄い色に調整が必要です。
  6. ホバー時と無効時の状態も確認する。 ホバー時の色は、気づかないうちに基準割れしやすい部分です。
  7. パレットを名前付きトークンで保存する。 brand-900、brand-700、brand-100 のような変数名にしておけば、後からの変更が1行の修正で済みます。Tailwind CSSのカラーのガイドで、この色の段階スケールの考え方を紹介しており、上記のHEXの一部もこの方式のスケールに由来しています。

サイトの種類別:どの緑を選ぶか

  • サステナビリティ、エネルギー、非営利団体: フォレストとクリーム、またはセージ。このムードの実例はGreenfield Renewablesテンプレートでご覧いただけます。
  • 健康・ウェルネス: フレッシュミントまたはティールグリーン。
  • 金融・SaaS: ディープグリーンのダークテーマに、明るいアクセントを1色。
  • 飲食、農業、ガーデン: フォレストとクリームに暖色のアクセント。
  • クリエイター・イベントページ: ダークグリーンにネオンライム。使うのは見出しとボタン1つまでにとどめます。

公開前のチェックリスト(コピーして使えます)

  • [ ] 本文の文字が背景に対して4.5:1以上ある
  • [ ] 大きな文字とアイコンが3:1以上ある
  • [ ] ボタンのラベルがボタンの塗り色に対して4.5:1を満たしている
  • [ ] リンクが色だけでなく、本文と区別できる(下線が有効)
  • [ ] 明るい緑は暗い背景上か、装飾にのみ使っている
  • [ ] 緑以外のアクセントカラーは1色までにしている
  • [ ] 暗いセクションには、ライトモードの色を流用せず、検証済みの専用の組み合わせを使っている
  • [ ] パレットが名前付きトークンとして保存され、1か所で変更できる

サイト全体で何色必要か迷う場合は、Webサイトの配色ガイドで基本を、カラーパレットの用語集で本記事で使った用語の定義をご確認いただけます。

実際のサイトに緑のパレットを適用する

HEXコードが決まったら、それを適用する場所が必要です。We.Incの無料プランでは、用意されたテンプレートから最大3サイトを公開できます。プロンプトからサイトの下書きを作成するAIビルダーは、月額$20のStarterプランからご利用いただけます。こちらから登録して、背景色、文字色、ボタン色のHEXをサイトのスタイルに貼り付け、公開したページで同じコントラストチェックを実施してください。

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

Umair Ali Sadaqat

We.Inc創業者

UmairはWe.Incの創業者です。AIによるウェブサイト制作、制作会社、ウェブ制作スタジオの経営について執筆しています。

素晴らしいものを作る準備はできましたか？

立ち上げ、成長、自動化のすべてを1つのプラットフォームで行う15,000+社がWe.Incを利用しています。

無料で始める

クレジットカード不要 · 営業担当に相談する

関連: ブログ｜デジタルマーケティングと集客のヒント

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る