green

#008000

CSS color

Overview

A frequent source of confusion, the CSS keyword green is not the pure additive primary but the darker rgb(0, 128, 0), hex #008000 — a green held at half brightness. The fully lit additive green primary is instead named lime in CSS. Green occupies the 120-degree position on the hue wheel and is one of the sixteen basic HTML colors inherited from the original web palette. Sitting between yellow and cyan in the spectrum, it is the channel to which human vision is most sensitive, which is why green contributes the largest share of perceived luminance in most color-weighting formulas. Its restrained value makes it a common choice for text and interface accents where the brighter lime would be visually harsh.

Green (#008000) is the pure mid-range green of the CSS named color set, a fully saturated medium-depth green at exactly half luminosity. It is one of the three primary colors of the RGB model and carries universal associations with nature, health, growth, and ecological responsibility. In web design, it is used for success states, environmental branding, and natural product identity.

On this page

カラー値

HEX

#008000

RGB

0, 128, 0

HSL

120.0, 100.0%, 25.1%

HSV

120.0, 100.0%, 50.2%

CMYK

100.0%, 0.0%, 100.0%, 49.8%

OKLCH

0.5198 0.1769 142.5

プロパティ

寒色 暗い 最も近い： green

色彩心理学

Dark greens like forest and hunter green convey wealth, tradition, and prestige. They are associated with old money, ivy-league institutions, and deep woodland environments. These tones express stability and endurance, suggesting something that has stood the test of time.

Design Usage

Dark green excels in banking, insurance, and heritage brand identities where trust is paramount. It creates elegant, authoritative headers and navigation bars that feel established and dependable. Pair it with gold, cream, or light gray for a classic combination that signals reliability and quality.

カラーハーモニー

補色

#008000

#800080

類似色

#408000

#008040

#008000

トライアド

#008000

#000080

#800000

スプリット補色

#008000

#400080

#800040

テトラード

#008000

#004080

#800080

#804000

色覚異常シミュレーション

オリジナル

#008000

第1色覚異常

#37391F

第2色覚異常

#302626

第3色覚異常

#06373D

全色盲

#5C5C5C

CSS使用法

background-color: #008000;
color: #008000;
border-color: #008000;
最も近いTailwind： Green 600 #16A34A

Tailwindシェード

50
#F1FEF1
100
#DEFCDE
200
#B8FFB8
300
#85FF85
400
#42FF42
500
#00FF00
600
#00CC00
700
#00A300
800
#008000
900
#055C05
950
#033A03

コントラストチェッカー

白背景のテキスト

5.14:1

AA Pass AAA Fail

黒背景のテキスト

4.09:1

AA Fail AAA Fail

比較する

#008000
#800080
#008000
#FFFFFF
#000000
#008000

関連記事

チュートリアル

CSS color-mix()：ブラウザでネイティブにカラーをブレンド

1月 26, 2026
チュートリアル

カラーピッカーWebコンポーネントをゼロから構築する

1月 21, 2026
チュートリアル

知覚的色空間：Lab、LCH、Oklab、OKLCH

1月 15, 2026

よくある質問

What are the RGB, HSL, and CMYK values of #008000?

RGB(0, 128, 0) · HSL(120.0, 100.0%, 25.1%) · CMYK(100.0%, 0.0%, 100.0%, 49.8%)

Does #008000 meet WCAG contrast on white?

5.14:1 — WCAG AA 合格, AAA 不合格 for normal text.

What text color is readable on #008000?

Use FFFFFF text on a #008000 background; contrast on black is 4.09:1.