#FEEBAA + #77C19D + #69A770 + #8F8166 + #866657 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#FEEBAA

Goose Yellow · Wheat · Lemon Cream

HEX

#FEEBAA

RGB

rgb(254, 235, 170)

HSL

hsl(46, 98%, 83%)

HSB

hsb(46, 33%, 100%)

CMYK

cmyk(0%, 7%, 33%, 0%)

Oklch

oklch(94.0% 0.085 93.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#77C19D

Jade · MediumAquaMarine · Apple Green

HEX

#77C19D

RGB

rgb(119, 193, 157)

HSL

hsl(151, 37%, 61%)

HSB

hsb(151, 38%, 76%)

CMYK

cmyk(38%, 0%, 19%, 24%)

Oklch

oklch(75.2% 0.091 162.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#69A770

Celadon · MediumSeaGreen · Olive Green

HEX

#69A770

RGB

rgb(105, 167, 112)

HSL

hsl(127, 26%, 53%)

HSB

hsb(127, 37%, 65%)

CMYK

cmyk(37%, 0%, 33%, 35%)

Oklch

oklch(67.2% 0.103 147.0)

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

#8F8166

Ochre · Gray · Honey Gold

HEX

#8F8166

RGB

rgb(143, 129, 102)

HSL

hsl(40, 17%, 48%)

HSB

hsb(40, 29%, 56%)

CMYK

cmyk(0%, 10%, 29%, 44%)

Oklch

oklch(60.9% 0.042 83.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#866657

Tangerine · DimGray · Amber Brown

HEX

#866657

RGB

rgb(134, 102, 87)

HSL

hsl(19, 21%, 43%)

HSB

hsb(19, 35%, 53%)

CMYK

cmyk(0%, 24%, 35%, 47%)

Oklch

oklch(53.8% 0.047 46.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEEBAA

A9BDFE

Analogous

FEC0A9

FEEBAA

E7FEA9

Triadic

FEEBAA

A9FEEA

EAA9FE

Split-Comp.

FEEBAA

A9E7FE

C0A9FE

Tetradic

FEEBAA

A9FEC0

A9BDFE

FEA9E7

Contrast Matrix WCAG 2.1 Contrast

FEEBAA	77C19D	69A770	8F8166	866657
—	1.8 Fail	2.4 Fail	3.2 AA Large	4.4 AA Large
1.8 Fail	—	1.3 Fail	1.8 Fail	2.4 Fail
2.4 Fail	1.3 Fail	—	1.3 Fail	1.8 Fail
3.2 AA Large	1.8 Fail	1.3 Fail	—	1.4 Fail
4.4 AA Large	2.4 Fail	1.8 Fail	1.4 Fail	—

White BG

1.2Fail

2.1Fail

2.9Fail

3.8AA Large

5.2AA

Black BG

17.7AAA

9.9AAA

7.4AAA

5.5AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6BA

9798A6

84847D

89896D

78785B

Deuteranopia

F7F8BE

938DA8

807C81

8A8B6E

7A7C5C

Tritanopia

FDC6C9

7BADAE

6C888A

8E7273

845D5E

Achromatopsia

E9E9E9

A7A7A7

8E8E8E

828282

6E6E6E

Shades & Tints Shades & Tints

#FEEBAA

Dark

Light

#77C19D

Dark

Light

#69A770

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #feebaa;
  --color-2: #77c19d;
  --color-3: #69a770;
  --color-4: #8f8166;
  --color-5: #866657;
}

SCSS

$color-1: #feebaa;
$color-2: #77c19d;
$color-3: #69a770;
$color-4: #8f8166;
$color-5: #866657;

TAILWIND

colors: {
  'brand-1': '#feebaa',
  'brand-2': '#77c19d',
  'brand-3': '#69a770',
  'brand-4': '#8f8166',
  'brand-5': '#866657',
}

RGB Array

[254, 235, 170], [119, 193, 157], [105, 167, 112], [143, 129, 102], [134, 102, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FEEBAA, #77C19D, #69A770, #8F8166, #866657 is ideal for: corporate websites, product showcases, portfolios. 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: #feebaa; --color-2: #77c19d; --color-3: #69a770; --color-4: #8f8166; --color-5: #866657. 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. 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