#4DEE5A

緑系の色

#4dee5a は「緑」系の色です。RGB(77, 238, 90)、HSL(125°, 83%, 62%)、CMYK(68%, 0%, 62%, 7%)。最も近い色名は springgreen。白背景とのコントラスト比は 1.53:1、黒背景は 13.69:1。濃淡、配色、色覚シミュレーションも確認できます。

カラーコード

HEX	`#4dee5a`
RGB	`rgb(77 238 90)`
RGB (legacy)	`rgb(77, 238, 90)`
RGB %	`rgb(30% 93% 35%)`
HSL	`hsl(125 83% 62%)`
HSV / HSB	`hsv(125, 68%, 93%)`
HWB	`hwb(125 30% 7%)`
CMYK	`cmyk(68%, 0%, 62%, 7%)`
CIELAB (D50)	`lab(83.74 -64.53 56.92)`
LCH	`lch(83.74 86.04 138.59)`
OKLab	`oklab(0.8362 -0.1886 0.1355)`
OKLCH	`oklch(0.8362 0.2322 144.3)`
10進数	`5107290`

色の特性

色調	緑
最も近い色名	springgreen ΔE 4.8
最も近いWebセーフカラー	#66ff66
色相	125°
彩度 (HSL / HSV)	83% / 68%
輝度 (HSL)	62%
明度 (HSV)	93%
明るさ (Rec.601 / Rec.709)	68% / 76%
相対輝度（WCAG）	0.6347
赤 / 緑 / 青	77 / 238 / 90

WCAG 2.2 コントラスト比

白背景 (#ffffff)

1.53:1

AA 通常 (4.5:1) · 基準未満AA 大きい文字 (3:1) · 基準未満AAA 通常 (7:1) · 基準未満

黒背景 (#000000)

13.69:1

AA 通常 (4.5:1) · 合格AA 大きい文字 (3:1) · 合格AAA 通常 (7:1) · 合格

カスタム比較 Aa Bb 123

APCA コントラスト Lc（参考値） — 文字色として白背景／黒背景: Lc 24.2 / -79 · 背景色として白文字／黒文字: Lc -27.4 / 79.6

明度スケール（OKLCH 50〜950）

同じ色相・彩度のまま明るさだけを均等に変えた11段階です。デザインシステムのカラートークンにそのまま使えます。

50#e1ffe0 100#b8ffb7 200#67fe6f 300#4dee5a 400#24bf38 500#00a324 600#00871c 700#006c14 800#00520d 900#003906 950#002002

ティント（白を混ぜる）

0%#4dee5a 10%#5ff06b 20%#71f17b 30%#82f38c 40%#94f59c 50%#a6f7ad 60%#b8f8bd 70%#caface 80%#dbfcde 90%#edfdef

シェード（黒を混ぜる）

0%#4dee5a 10%#45d651 20%#3ebe48 30%#36a73f 40%#2e8f36 50%#27772d 60%#1f5f24 70%#17471b 80%#0f3012 90%#081809

配色パターン

色覚シミュレーション

色覚の多様性を持つ人には、この色が次のように見えると推定されます（Machado 2009）。

一般色覚#4dee5a P型（1型）色覚#f2d949 D型（2型）色覚#dfcc67 T型（3型）色覚#18e8cf 全色盲（明るさのみ）#d1d1d1

近い色名

springgreen · ΔE 4.8#00ff7f mediumspringgreen · ΔE 6.2#00fa9a lawngreen · ΔE 6.5#7cfc00 lime · ΔE 7#00ff00 chartreuse · ΔE 7.3#7fff00

CSSでの使い方

:root {
  --color-brand: #4dee5a;
  --color-brand-oklch: oklch(83.62% 0.2322 144.3);
}
.text { color: var(--color-brand); }
.background { background-color: var(--color-brand); }
.border { border: 1px solid rgb(77 238 90 / 50%); }
/* Tailwind CSS */
<div class="bg-[#4dee5a] text-[#4dee5a] border-[#4dee5a]">