#F1EEB7 + #E5EA81 + #C9DD95 + #8BCE9F + #7D9C7C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F1EEB7

Fresh Green · Wheat · Lemon Cream

HEX

#F1EEB7

RGB

rgb(241, 238, 183)

HSL

hsl(57, 67%, 83%)

HSB

hsb(57, 24%, 95%)

CMYK

cmyk(0%, 1%, 24%, 5%)

Oklch

oklch(93.8% 0.071 105.1)

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

#E5EA81

Fresh Green · Khaki · Sunflower

HEX

#E5EA81

RGB

rgb(229, 234, 129)

HSL

hsl(63, 71%, 71%)

HSB

hsb(63, 45%, 92%)

CMYK

cmyk(2%, 0%, 45%, 8%)

Oklch

oklch(91.1% 0.129 111.1)

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

#C9DD95

Willow Green · Khaki · Apple Green

HEX

#C9DD95

RGB

rgb(201, 221, 149)

HSL

hsl(77, 51%, 73%)

HSB

hsb(77, 33%, 87%)

CMYK

cmyk(9%, 0%, 33%, 13%)

Oklch

oklch(86.5% 0.096 121.1)

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

#8BCE9F

Celadon · DarkSeaGreen · Apple Green

HEX

#8BCE9F

RGB

rgb(139, 206, 159)

HSL

hsl(138, 41%, 68%)

HSB

hsb(138, 33%, 81%)

CMYK

cmyk(33%, 0%, 23%, 19%)

Oklch

oklch(79.4% 0.095 153.2)

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

#7D9C7C

Celadon · Gray · Olive Green

HEX

#7D9C7C

RGB

rgb(125, 156, 124)

HSL

hsl(118, 14%, 55%)

HSB

hsb(118, 21%, 61%)

CMYK

cmyk(20%, 0%, 21%, 39%)

Oklch

oklch(66.0% 0.058 144.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1EEB7

B7BAF1

Analogous

F1D1B7

F1EEB7

D7F1B7

Triadic

F1EEB7

B7F1EE

EEB7F1

Split-Comp.

F1EEB7

B7D7F1

D1B7F1

Tetradic

F1EEB7

B7F1D1

B7BAF1

F1B7D7

Contrast Matrix WCAG 2.1 Contrast

F1EEB7	E5EA81	C9DD95	8BCE9F	7D9C7C
—	1.1 Fail	1.2 Fail	1.5 Fail	2.6 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	2.4 Fail
1.2 Fail	1.2 Fail	—	1.2 Fail	2.1 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	1.7 Fail
2.6 Fail	2.4 Fail	2.1 Fail	1.7 Fail	—

White BG

1.2Fail

1.3Fail

1.5Fail

1.8Fail

3.0AA Large

Black BG

17.7AAA

16.4AAA

14.3AAA

11.4AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0C4

E7E79A

D2D2A6

A8A9AA

8A8B84

Deuteranopia

F0F0C8

E7E7A1

D1CFAB

A49FAD

898686

Tritanopia

F1CFD1

E5AEB3

CAB4B7

8EB3B5

7F8A8B

Achromatopsia

E9E9E9

DDDDDD

CFCFCF

B5B5B5

8F8F8F

Shades & Tints Shades & Tints

#F1EEB7

Dark

Light

#E5EA81

Dark

Light

#C9DD95

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1eeb7;
  --color-2: #e5ea81;
  --color-3: #c9dd95;
  --color-4: #8bce9f;
  --color-5: #7d9c7c;
}

SCSS

$color-1: #f1eeb7;
$color-2: #e5ea81;
$color-3: #c9dd95;
$color-4: #8bce9f;
$color-5: #7d9c7c;

TAILWIND

colors: {
  'brand-1': '#f1eeb7',
  'brand-2': '#e5ea81',
  'brand-3': '#c9dd95',
  'brand-4': '#8bce9f',
  'brand-5': '#7d9c7c',
}

RGB Array

[241, 238, 183], [229, 234, 129], [201, 221, 149], [139, 206, 159], [125, 156, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F1EEB7, #E5EA81, #C9DD95, #8BCE9F, #7D9C7C 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: #f1eeb7; --color-2: #e5ea81; --color-3: #c9dd95; --color-4: #8bce9f; --color-5: #7d9c7c. 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