緑

植物や葉の色で、画面上では青と黄色の光の中間に位置します。自然や健康、「進んでよい」という合図を連想させます。エコブランドや銀行、確認ボタンによく使われます。

別名：グリーン, 緑色

緑 · #008000

緑の基本情報

緑（#008000）は、中間色系・暗め・鮮やかの色です。緑系の色のグループに属します。RGBの値は赤0・緑128・青0（各255段階）。主な用途：ロゴ, 自然, ウェブ, サイン・標識。

緑の濃淡：明るいトーンと暗いトーン

明るい色から暗い色の順に並んでいます。色をタップするとカラーコードをコピーできます。

緑に合う色

白爽やかで清潔感のある印象に。ベージュナチュラルでリラックスした組み合わせです。コーヒーブラウン木と葉のような組み合わせです。ネイビー涼しげで上品な組み合わせです。ピンク補色のコントラストです。黄色明るく春らしい組み合わせです。ゴールド豪華さと温かみを添えます。グレー緑を落ち着かせ、モダンにします。

緑のファッション・インテリアでの合わせ方 →

緑の配色ハーモニー

色相環にもとづいた配色です。配色ハーモニーツールでさらに多くのパターンを試せます。

補色近い色：パープル

類似色近い色：翡翠色

トライアド近い色：ネイビー, マルーン

スプリット・コンプリメンタリー近い色：藍色, バーガンディ

テトラード近い色：ウルトラバイオレット, パープル, チョコレートブラウン

緑を使ったカラーパレット

カラーコードをコピーするか、エディターで開いて自由に調整できます。

モノクロマティックパレット · 緑

類似色パレット · 緑

補色パレット · 緑

トライアドパレット · 緑

ニュートラルカラー入りパレット · 緑

アクセントカラー入りパレット · 緑

緑と文字色のコントラスト

白い文字コントラスト比 5.1:1 · AA

黒い文字コントラスト比 4.1:1 · AA（大きな文字）

WCAG 2.1の基準にもとづいています。ほかの色の組み合わせはコントラストチェッカーで確認できます。

CSSコード

:root {
  --green: #008000;
  --green-rgb: 0, 128, 0;
}
.bg { background-color: var(--green); }
.text { color: var(--green); }

緑に近い色

フォレストグリーンダークグリーン翡翠色エメラルドグリーンアップルグリーンパステルグリーンピスタチオグリーンオリーブグリーンライトグリーンモスグリーン

よくある質問

緑のカラーコードは？

緑のHEXコードは#008000です。RGBではrgb(0, 128, 0)、HSLではhsl(120, 100%, 25%)、CMYKでは100, 0, 100, 50となります。

緑の補色は何色ですか？

色相環で反対側にある補色は#800080で、パープルに近い色合いです。少量をアクセントとして使うと、強いコントラストが生まれます。

緑の上に白い文字を置いても読みやすいですか？

はい。白とのコントラスト比は5.1:1で、通常サイズの文字にも十分です（WCAG AA）。

緑に合う色は？

相性のよい色：白, ベージュ, コーヒーブラウン, ネイビー, ピンク。クリスマスらしさを狙うのでなければ、強い赤との組み合わせは避けましょう。ニュートラルカラーをはさまずに、アンダートーンの違う緑をたくさん混ぜるとごちゃついて見えます。