← Back to Editor

#FAF8B1 · #1D9044 · #BDDB8B · #87C16C · #53A854

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#FAF8B1

Fresh Green · Wheat · Lemon Cream

HEX
#FAF8B1
RGB
rgb(250, 248, 177)
HSL
hsl(58, 88%, 84%)
HSB
hsb(58, 29%, 98%)
CMYK
cmyk(0%, 1%, 29%, 2%)
Oklch
oklch(96.4% 0.090 106.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#1D9044

Pine Green · SeaGreen · Forest Green

HEX
#1D9044
RGB
rgb(29, 144, 68)
HSL
hsl(140, 66%, 34%)
HSB
hsb(140, 80%, 56%)
CMYK
cmyk(80%, 0%, 53%, 44%)
Oklch
oklch(57.5% 0.150 149.4)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#BDDB8B

Willow Green · Tan · Apple Green

HEX
#BDDB8B
RGB
rgb(189, 219, 139)
HSL
hsl(82, 53%, 70%)
HSB
hsb(82, 37%, 86%)
CMYK
cmyk(14%, 0%, 37%, 14%)
Oklch
oklch(85.1% 0.109 125.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#87C16C

Celadon · DarkSeaGreen · Olive Green

HEX
#87C16C
RGB
rgb(135, 193, 108)
HSL
hsl(101, 41%, 59%)
HSB
hsb(101, 44%, 76%)
CMYK
cmyk(30%, 0%, 44%, 24%)
Oklch
oklch(75.1% 0.130 136.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#53A854

Celadon · MediumSeaGreen · Olive Green

HEX
#53A854
RGB
rgb(83, 168, 84)
HSL
hsl(121, 34%, 49%)
HSB
hsb(121, 51%, 66%)
CMYK
cmyk(51%, 0%, 50%, 34%)
Oklch
oklch(65.8% 0.146 143.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAF8B1
B2B5FA

Analogous

FAD4B2
FAF8B1
D9FAB2

Triadic

FAF8B1
B2FAF8
F8B2FA

Split-Comp.

FAF8B1
B2D9FA
D4B2FA

Tetradic

FAF8B1
B2FAD4
B2B5FA
FAB2D9

Contrast Matrix WCAG 2.1 Contrast

FAF8B1
1D9044
BDDB8B
87C16C
53A854
—
3.7
AA Large
1.4
Fail
1.9
Fail
2.7
Fail
3.7
AA Large
—
2.7
Fail
1.9
Fail
1.4
Fail
1.4
Fail
2.7
Fail
—
1.4
Fail
1.9
Fail
1.9
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
2.7
Fail
1.4
Fail
1.9
Fail
1.4
Fail
—
White BG
1.1Fail
4.1AA Large
1.5Fail
2.1Fail
3.0Fail
Black BG
19.1AAA
5.1AA
13.7AAA
9.9AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9C2
4F5056
CACA9E
A0A181
787968

Deuteranopia

F9F9C6
483F5B
C8C6A3
9D9886
736D6D

Tritanopia

FAD0D3
236568
BEAEB1
8A9194
57787C

Achromatopsia

F1F1F1
656565
C9C9C9
A6A6A6
858585

Shades & Tints Shades & Tints

#FAF8B1

Dark
Light

#1D9044

Dark
Light

#BDDB8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faf8b1;
  --color-2: #1d9044;
  --color-3: #bddb8b;
  --color-4: #87c16c;
  --color-5: #53a854;
}

SCSS

$color-1: #faf8b1;
$color-2: #1d9044;
$color-3: #bddb8b;
$color-4: #87c16c;
$color-5: #53a854;

TAILWIND

colors: {
  'brand-1': '#faf8b1',
  'brand-2': '#1d9044',
  'brand-3': '#bddb8b',
  'brand-4': '#87c16c',
  'brand-5': '#53a854',
}

RGB Array

[250, 248, 177], [29, 144, 68], [189, 219, 139], [135, 193, 108], [83, 168, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FAF8B1, #1D9044, #BDDB8B, #87C16C, #53A854 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #faf8b1; --color-2: #1d9044; --color-3: #bddb8b; --color-4: #87c16c; --color-5: #53a854. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This nature-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color