Green 400
green-400 · #4ADE80
HEX
#4ADE80
RGB
rgb(74, 222, 128)
CMYK
cmyk(67%, 0%, 42%, 13%)
HSL
hsl(142, 69%, 58%)
LAB
lab(79.2, -59.4, 34.9)
What is Green 400?
Green 400 is the green-400 reference in the Tailwind CSS palette. Its sRGB value is #4ADE80 (rgb 74, 222, 128). It sits in the green family. The default color palette shipped with Tailwind CSS v3 by Tailwind Labs. 22 color families across 11 lightness steps (50 to 950). See disclaimer for accuracy and trademark notes.
Accessibility
WCAG 2.1 contrast checks for Green 400 as a background.
Black text on this color
White text on this color
Shades, tints & tonal scale of Green 400
An 11-step tonal scale derived from Green 400 (#4ADE80). Click any swatch to copy its HEX. Use these as a starting point for design tokens, hover states, and disabled states in a design system.
50
#F1FCF5
#F1FCF5
100
#E2FAEB
#E2FAEB
200
#C5F4D6
#C5F4D6
300
#A5EFC0
#A5EFC0
400
#77E6A0
#77E6A0
500
#4ADE80
#4ADE80
600
#3FBD6D
#3FBD6D
700
#309053
#309053
800
#21643A
#21643A
900
#133820
#133820
950
#091B0F
#091B0F
Lighter tints (mixed with white)
15%
#7EE39C
30%
#9FE9B3
45%
#B9EEC7
60%
#D0F3D8
75%
#E3F7E8
Darker shades (mixed with black)
15%
#44CF77
30%
#3EBD6C
45%
#37AA61
60%
#2E9353
75%
#237642
Color harmonies for Green 400
Classic color-theory harmonies derived from rotating the hue of Green 400. Use these to build accent palettes, brand systems, and accessible UI color pairings.
Complementary
180° opposite — strongest contrast
#4ADE80
#4ADE80
#DE4AA8
#DE4AA8
Triadic
Three colors 120° apart
#4ADE80
#4ADE80
#804ADE
#804ADE
#DE804A
#DE804A
Analogous
Two neighbors ±30° on the wheel
#5EDE4A
#5EDE4A
#4ADE80
#4ADE80
#4ADECA
#4ADECA
Split-complementary
Base + two colors flanking its complement
#4ADE80
#4ADE80
#CA4ADE
#CA4ADE
#DE4A5E
#DE4A5E
Tetradic
Two complementary pairs
#4ADE80
#4ADE80
#4AA8DE
#4AA8DE
#DE4AA8
#DE4AA8
#DE804A
#DE804A
Square
Four colors evenly spaced 90° apart
#4ADE80
#4ADE80
#4A5EDE
#4A5EDE
#DE4AA8
#DE4AA8
#DECA4A
#DECA4A
Green 400 in every color space
Full conversion of Green 400 across the color spaces designers and developers actually use — including OKLCH (the perceptually-uniform space that powers Tailwind v4 and CSS Color Module Level 4) and HWB.
HEX
#4ADE80
RGB
rgb(74, 222, 128)
CMYK
cmyk(67%, 0%, 42%, 13%)
HSL
hsl(142, 69%, 58%)
HSV
hsv(142, 67%, 87%)
HWB
hwb(142 29% 13%)
CIE Lab
lab(79.2 -59.4 34.9)
OKLCH
oklch(80.0% 0.182 151.7)
XYZ (D65)
xyz(32.84, 55.25, 29.35)
Copy-ready code for Green 400
Drop-in snippets for CSS, Tailwind, Sass, iOS Swift, and Android XML. Click the copy button on any snippet to put it on your clipboard.
CSS
color: #4ADE80;
background-color: #4ADE80;CSS variable
:root {
--color-green-400: #4ADE80;
}Tailwind config
// tailwind.config.js
colors: {
'green-400': '#4ADE80',
}Sass
$color-green-400: #4ADE80;Swift UIColor
UIColor(red: 0.290, green: 0.871, blue: 0.502, alpha: 1.0)Android XML
<color name="green-400">#4ADE80</color>Closest match in every color system
The nearest Green 400 equivalent in every other color system on this site, ranked by ΔE2000 perceptual distance. Useful when translating between design-system, web-standard, and industrial color references.
Closest in Tailwind CSS palette
Top 6 ΔE2000-closest entries within the same collection.
Closest Pantone matches
Top 6 ΔE2000-closest Pantone references. Cross-system matching is approximate — see disclaimer.
Closest RAL Classic matches
Top 6 ΔE2000-closest RAL Classic references for industrial coating cross-reference.
RAL 6019
#BDECB6
Pastel green
RAL 6018
#57A639
Yellow green
RAL 6021
#89AC76
Pale green
RAL 1000
#BEBD7F
Green beige
RAL 6017
#4C9141
May green
RAL 6027
#84C3BE
Light green
FAQ about Green 400
What is the HEX code for Green 400?
Green 400 (green-400) has the HEX code #4ADE80. In RGB it is rgb(74, 222, 128), and in CMYK it is cmyk(67%, 0%, 42%, 13%).
What is the OKLCH value of Green 400?
Green 400 converts to oklch(0.800 0.182 151.7). OKLCH is the perceptually uniform color space used by Tailwind v4 and CSS Color Module Level 4.
Is Green 400 accessible for body text?
Used as a background, Green 400 has a contrast ratio of 12.05:1 with black text and 1.74:1 with white text. WCAG 2.1 AA requires 4.5:1 for normal text. The current recommendation is to use black text and verify in real UI context.
What is the closest Pantone to Green 400?
The closest Pantone reference to Green 400 by ΔE2000 perceptual distance is Pantone 354 C (#00B140). Cross-system Pantone matching is approximate; for color-critical print work, verify with a physical Pantone guide.
What is the closest RAL color to Green 400?
The closest RAL Classic reference to Green 400 by ΔE2000 distance is RAL 6019 (Pastel green, #BDECB6). RAL is a German industrial coating standard commonly used for paint, powder coat, and architectural specification.
What is the complementary color of Green 400?
The complementary color (180° opposite on the HSL color wheel) of Green 400 is #DE4AA8. Use it for high-contrast accents, error states, or call-to-action pairings.
Data provenance & source
Tailwind CSS default palette (v3)
The default color palette shipped with Tailwind CSS v3 by Tailwind Labs Inc. Use as a reference for design tokens, web color systems, and Tailwind-based design conversations. Names like 'blue-500' are the project's own naming convention.
- Source type
- derived
- Confidence
- high
- License
- MIT
- Last reviewed
- 2026-05-24
Workflow tags
Tailwind palette values are designed for digital interfaces under sRGB. For print, convert to a process-appropriate value and proof against the substrate; do not rely on sRGB CMYK conversion for color-critical print work.