#F2F7B7 + #D4E8A9 + #ADD190 + #87C486 + #659C70 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F2F7B7

Fresh Green · Wheat · Lemon Cream

HEX

#F2F7B7

RGB

rgb(242, 247, 183)

HSL

hsl(65, 80%, 84%)

HSB

hsb(65, 26%, 97%)

CMYK

cmyk(2%, 0%, 26%, 3%)

Oklch

oklch(95.7% 0.082 111.6)

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

#D4E8A9

Willow Green · Wheat · Apple Green

HEX

#D4E8A9

RGB

rgb(212, 232, 169)

HSL

hsl(79, 58%, 79%)

HSB

hsb(79, 27%, 91%)

CMYK

cmyk(9%, 0%, 27%, 9%)

Oklch

oklch(90.1% 0.085 122.4)

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

#ADD190

Celadon · DarkSeaGreen · Apple Green

HEX

#ADD190

RGB

rgb(173, 209, 144)

HSL

hsl(93, 41%, 69%)

HSB

hsb(93, 31%, 82%)

CMYK

cmyk(17%, 0%, 31%, 18%)

Oklch

oklch(81.8% 0.096 131.8)

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

#87C486

Celadon · DarkSeaGreen · Apple Green

HEX

#87C486

RGB

rgb(135, 196, 134)

HSL

hsl(119, 34%, 65%)

HSB

hsb(119, 32%, 77%)

CMYK

cmyk(31%, 0%, 32%, 23%)

Oklch

oklch(76.3% 0.107 144.1)

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

#659C70

Celadon · Gray · Olive Green

HEX

#659C70

RGB

rgb(101, 156, 112)

HSL

hsl(132, 22%, 50%)

HSB

hsb(132, 35%, 61%)

CMYK

cmyk(35%, 0%, 28%, 39%)

Oklch

oklch(64.2% 0.088 149.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F7B7

BBB6F7

Analogous

F7DCB6

F2F7B7

D1F7B6

Triadic

F2F7B7

B6F1F7

F7B6F1

Split-Comp.

F2F7B7

B6D1F7

DCB6F7

Tetradic

F2F7B7

B6F7DC

BBB6F7

F7B6D1

Contrast Matrix WCAG 2.1 Contrast

F2F7B7	D4E8A9	ADD190	87C486	659C70
—	1.2 Fail	1.5 Fail	1.8 Fail	2.9 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	2.4 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.9 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.6 Fail
2.9 Fail	2.4 Fail	1.9 Fail	1.6 Fail	—

White BG

1.1Fail

1.3Fail

1.7Fail

2.0Fail

3.2AA Large

Black BG

18.8AAA

15.9AAA

12.3AAA

10.3AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4C6

DDDDB8

BDBDA0

A1A295

7D7D7B

Deuteranopia

F4F3CA

DCDABC

BBB8A4

9E9999

7A757D

Tritanopia

F2D3D5

D5C4C7

AFACAF

8AA1A3

688385

Achromatopsia

EEEEEE

DBDBDB

BFBFBF

ABABAB

878787

Shades & Tints Shades & Tints

#F2F7B7

Dark

Light

#D4E8A9

Dark

Light

#ADD190

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f7b7;
  --color-2: #d4e8a9;
  --color-3: #add190;
  --color-4: #87c486;
  --color-5: #659c70;
}

SCSS

$color-1: #f2f7b7;
$color-2: #d4e8a9;
$color-3: #add190;
$color-4: #87c486;
$color-5: #659c70;

TAILWIND

colors: {
  'brand-1': '#f2f7b7',
  'brand-2': '#d4e8a9',
  'brand-3': '#add190',
  'brand-4': '#87c486',
  'brand-5': '#659c70',
}

RGB Array

[242, 247, 183], [212, 232, 169], [173, 209, 144], [135, 196, 134], [101, 156, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F2F7B7, #D4E8A9, #ADD190, #87C486, #659C70 is ideal for: health products, baby brands, fresh-style blogs. 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: #f2f7b7; --color-2: #d4e8a9; --color-3: #add190; --color-4: #87c486; --color-5: #659c70. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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