#AAB3AB + #C4CBB7 + #EBEFC9 + #EEE0B7 + #E8CAAF · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#AAB3AB

Ash · DarkGray · Silver Sand

HEX

#AAB3AB

RGB

rgb(170, 179, 171)

HSL

hsl(127, 6%, 68%)

HSB

hsb(127, 5%, 70%)

CMYK

cmyk(5%, 0%, 4%, 30%)

Oklch

oklch(75.7% 0.015 148.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C4CBB7

Willow Green · Silver · Apple Green

HEX

#C4CBB7

RGB

rgb(196, 203, 183)

HSL

hsl(81, 16%, 76%)

HSB

hsb(81, 10%, 80%)

CMYK

cmyk(3%, 0%, 10%, 20%)

Oklch

oklch(83.1% 0.028 122.8)

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

#EBEFC9

Fresh Green · Beige · Lemon Cream

HEX

#EBEFC9

RGB

rgb(235, 239, 201)

HSL

hsl(66, 54%, 86%)

HSB

hsb(66, 16%, 94%)

CMYK

cmyk(2%, 0%, 16%, 6%)

Oklch

oklch(93.9% 0.050 112.2)

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

#EEE0B7

Goose Yellow · Wheat · Lemon Cream

HEX

#EEE0B7

RGB

rgb(238, 224, 183)

HSL

hsl(45, 62%, 83%)

HSB

hsb(45, 23%, 93%)

CMYK

cmyk(0%, 6%, 23%, 7%)

Oklch

oklch(90.8% 0.056 91.4)

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

#E8CAAF

Apricot · Wheat · Peach Orange

HEX

#E8CAAF

RGB

rgb(232, 202, 175)

HSL

hsl(28, 55%, 80%)

HSB

hsb(28, 25%, 91%)

CMYK

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

Oklch

oklch(85.7% 0.050 64.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AAB3AB

B2A9B1

Analogous

ACB2A9

AAB3AB

A9B2AF

Triadic

AAB3AB

AAA9B2

B2AAA9

Split-Comp.

AAB3AB

AFA9B2

B2A9AC

Tetradic

AAB3AB

A9ACB2

B2A9B1

B2AFA9

Contrast Matrix WCAG 2.1 Contrast

AAB3AB	C4CBB7	EBEFC9	EEE0B7	E8CAAF
—	1.3 Fail	1.8 Fail	1.6 Fail	1.4 Fail
1.3 Fail	—	1.4 Fail	1.3 Fail	1.1 Fail
1.8 Fail	1.4 Fail	—	1.1 Fail	1.3 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.4 Fail	1.1 Fail	1.3 Fail	1.2 Fail	—

White BG

2.2Fail

1.7Fail

1.2Fail

1.3Fail

1.6Fail

Black BG

9.7AAA

12.6AAA

17.7AAA

16.0AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAEAD

C7C7BC

EDEDD2

E8E8C1

DBDBB6

Deuteranopia

ADADAD

C7C6BD

EDECD4

E9EAC3

DDDFB7

Tritanopia

AAAEAF

C4C0C1

EBD9DB

EDC9CA

E6BBBC

Achromatopsia

AFAFAF

C7C7C7

E9E9E9

E0E0E0

D0D0D0

Shades & Tints Shades & Tints

#AAB3AB

Dark

Light

#C4CBB7

Dark

Light

#EBEFC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aab3ab;
  --color-2: #c4cbb7;
  --color-3: #ebefc9;
  --color-4: #eee0b7;
  --color-5: #e8caaf;
}

SCSS

$color-1: #aab3ab;
$color-2: #c4cbb7;
$color-3: #ebefc9;
$color-4: #eee0b7;
$color-5: #e8caaf;

TAILWIND

colors: {
  'brand-1': '#aab3ab',
  'brand-2': '#c4cbb7',
  'brand-3': '#ebefc9',
  'brand-4': '#eee0b7',
  'brand-5': '#e8caaf',
}

RGB Array

[170, 179, 171], [196, 203, 183], [235, 239, 201], [238, 224, 183], [232, 202, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AAB3AB, #C4CBB7, #EBEFC9, #EEE0B7, #E8CAAF 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: #aab3ab; --color-2: #c4cbb7; --color-3: #ebefc9; --color-4: #eee0b7; --color-5: #e8caaf. 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