#998B7E + #AFA089 + #E0E7BB + #E2C4B9 + #E9A59C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#998B7E

Tangerine · Gray · Warm Sun

HEX

#998B7E

RGB

rgb(153, 139, 126)

HSL

hsl(29, 12%, 55%)

HSB

hsb(29, 18%, 60%)

CMYK

cmyk(0%, 9%, 18%, 40%)

Oklch

oklch(64.5% 0.025 65.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AFA089

Ginger · DarkGray · Warm Sun

HEX

#AFA089

RGB

rgb(175, 160, 137)

HSL

hsl(36, 19%, 61%)

HSB

hsb(36, 22%, 69%)

CMYK

cmyk(0%, 9%, 22%, 31%)

Oklch

oklch(71.2% 0.037 78.6)

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

#E0E7BB

Willow Green · Wheat · Mint Green

HEX

#E0E7BB

RGB

rgb(224, 231, 187)

HSL

hsl(70, 48%, 82%)

HSB

hsb(70, 19%, 91%)

CMYK

cmyk(3%, 0%, 19%, 9%)

Oklch

oklch(91.1% 0.058 114.9)

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

#E2C4B9

Apricot · Wheat · Peach Orange

HEX

#E2C4B9

RGB

rgb(226, 196, 185)

HSL

hsl(16, 41%, 81%)

HSB

hsb(16, 18%, 89%)

CMYK

cmyk(0%, 13%, 18%, 11%)

Oklch

oklch(84.3% 0.037 41.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E9A59C

Peach Pink · BurlyWood · Coral Red

HEX

#E9A59C

RGB

rgb(233, 165, 156)

HSL

hsl(7, 64%, 76%)

HSB

hsb(7, 33%, 91%)

CMYK

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

Oklch

oklch(78.5% 0.082 27.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

998B7E

7E8D9A

Analogous

9A7E7F

998B7E

9A9A7E

Triadic

998B7E

7E9A8C

8C7E9A

Split-Comp.

998B7E

7E9A9A

7E7F9A

Tetradic

998B7E

7F9A7E

7E8D9A

9A7E9A

Contrast Matrix WCAG 2.1 Contrast

998B7E	AFA089	E0E7BB	E2C4B9	E9A59C
—	1.3 Fail	2.6 Fail	2.0 Fail	1.6 Fail
1.3 Fail	—	2.0 Fail	1.6 Fail	1.3 Fail
2.6 Fail	2.0 Fail	—	1.3 Fail	1.6 Fail
2.0 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
1.6 Fail	1.3 Fail	1.6 Fail	1.2 Fail	—

White BG

3.3AA Large

2.6Fail

1.3Fail

1.6Fail

2.0Fail

Black BG

6.3AA

8.2AAA

16.3AAA

12.8AAA

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939381

A9A88F

E3E3C6

D5D5BC

CCCB9E

Deuteranopia

949582

A9AB90

E3E2C8

D7D9BC

D0D59F

Tritanopia

988484

AE9394

E0CED0

E1BEBE

E6A0A0

Achromatopsia

8E8E8E

A2A2A2

E0E0E0

CCCCCC

B8B8B8

Shades & Tints Shades & Tints

#998B7E

Dark

Light

#AFA089

Dark

Light

#E0E7BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #998b7e;
  --color-2: #afa089;
  --color-3: #e0e7bb;
  --color-4: #e2c4b9;
  --color-5: #e9a59c;
}

SCSS

$color-1: #998b7e;
$color-2: #afa089;
$color-3: #e0e7bb;
$color-4: #e2c4b9;
$color-5: #e9a59c;

TAILWIND

colors: {
  'brand-1': '#998b7e',
  'brand-2': '#afa089',
  'brand-3': '#e0e7bb',
  'brand-4': '#e2c4b9',
  'brand-5': '#e9a59c',
}

RGB Array

[153, 139, 126], [175, 160, 137], [224, 231, 187], [226, 196, 185], [233, 165, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #998B7E, #AFA089, #E0E7BB, #E2C4B9, #E9A59C 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: #998b7e; --color-2: #afa089; --color-3: #e0e7bb; --color-4: #e2c4b9; --color-5: #e9a59c. 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