#EFE2BF + #F5A489 + #EF8184 + #A76378 + #A8C896 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#EFE2BF

Goose Yellow · Wheat · Lemon Cream

HEX

#EFE2BF

RGB

rgb(239, 226, 191)

HSL

hsl(44, 60%, 84%)

HSB

hsb(44, 20%, 94%)

CMYK

cmyk(0%, 5%, 20%, 6%)

Oklch

oklch(91.4% 0.048 90.1)

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

#F5A489

Apricot · LightSalmon · Warm Sun

HEX

#F5A489

RGB

rgb(245, 164, 137)

HSL

hsl(15, 84%, 75%)

HSB

hsb(15, 44%, 96%)

CMYK

cmyk(0%, 33%, 44%, 4%)

Oklch

oklch(79.2% 0.104 39.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#EF8184

Peach Pink · LightCoral · Coral Red

HEX

#EF8184

RGB

rgb(239, 129, 132)

HSL

hsl(358, 77%, 72%)

HSB

hsb(358, 46%, 94%)

CMYK

cmyk(0%, 46%, 45%, 6%)

Oklch

oklch(72.6% 0.135 19.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#A76378

Dark Violet · Gray · Rose Pink

HEX

#A76378

RGB

rgb(167, 99, 120)

HSL

hsl(341, 28%, 52%)

HSB

hsb(341, 41%, 65%)

CMYK

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

Oklch

oklch(58.2% 0.091 0.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#A8C896

Celadon · DarkSeaGreen · Apple Green

HEX

#A8C896

RGB

rgb(168, 200, 150)

HSL

hsl(98, 31%, 69%)

HSB

hsb(98, 25%, 78%)

CMYK

cmyk(16%, 0%, 25%, 22%)

Oklch

oklch(79.6% 0.077 134.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFE2BF

BECBEF

Analogous

EFC9BE

EFE2BF

E3EFBE

Triadic

EFE2BF

BEEFE2

E2BEEF

Split-Comp.

EFE2BF

BEE3EF

C9BEEF

Tetradic

EFE2BF

BEEFC9

BECBEF

EFBEE3

Contrast Matrix WCAG 2.1 Contrast

EFE2BF	F5A489	EF8184	A76378	A8C896
—	1.5 Fail	2.0 Fail	3.5 AA Large	1.4 Fail
1.5 Fail	—	1.3 Fail	2.2 Fail	1.1 Fail
2.0 Fail	1.3 Fail	—	1.7 Fail	1.4 Fail
3.5 AA Large	2.2 Fail	1.7 Fail	—	2.4 Fail
1.4 Fail	1.1 Fail	1.4 Fail	2.4 Fail	—

White BG

1.3Fail

2.0Fail

2.6Fail

4.5AA Large

1.8Fail

Black BG

16.3AAA

10.6AAA

8.1AAA

4.7AA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9C7

D2D190

BFBE83

8A8973

B6B6A2

Deuteranopia

EAEBCA

D7DD91

C6CE83

8E9372

B4B2A5

Tritanopia

EECED0

F19596

E98383

A46F6E

AAACAE

Achromatopsia

E2E2E2

B9B9B9

A2A2A2

7A7A7A

B9B9B9

Shades & Tints Shades & Tints

#EFE2BF

Dark

Light

#F5A489

Dark

Light

#EF8184

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #efe2bf;
  --color-2: #f5a489;
  --color-3: #ef8184;
  --color-4: #a76378;
  --color-5: #a8c896;
}

SCSS

$color-1: #efe2bf;
$color-2: #f5a489;
$color-3: #ef8184;
$color-4: #a76378;
$color-5: #a8c896;

TAILWIND

colors: {
  'brand-1': '#efe2bf',
  'brand-2': '#f5a489',
  'brand-3': '#ef8184',
  'brand-4': '#a76378',
  'brand-5': '#a8c896',
}

RGB Array

[239, 226, 191], [245, 164, 137], [239, 129, 132], [167, 99, 120], [168, 200, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #EFE2BF, #F5A489, #EF8184, #A76378, #A8C896 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: #efe2bf; --color-2: #f5a489; --color-3: #ef8184; --color-4: #a76378; --color-5: #a8c896. 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