← Back to Editor

#96B4AA · #ADC7BA · #C0D3CF · #E8E3DD · #ECC3B1

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#96B4AA

Jade · DarkGray · Lake Green

HEX
#96B4AA
RGB
rgb(150, 180, 170)
HSL
hsl(160, 17%, 65%)
HSB
hsb(160, 17%, 71%)
CMYK
cmyk(17%, 0%, 6%, 29%)
Oklch
oklch(74.5% 0.036 173.1)

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

#ADC7BA

Jade · Silver · Apple Green

HEX
#ADC7BA
RGB
rgb(173, 199, 186)
HSL
hsl(150, 19%, 73%)
HSB
hsb(150, 13%, 78%)
CMYK
cmyk(13%, 0%, 7%, 22%)
Oklch
oklch(80.6% 0.033 164.0)

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

#C0D3CF

Jade · LightGray · Glacier Blue

HEX
#C0D3CF
RGB
rgb(192, 211, 207)
HSL
hsl(167, 18%, 79%)
HSB
hsb(167, 9%, 83%)
CMYK
cmyk(9%, 0%, 2%, 17%)
Oklch
oklch(85.1% 0.021 181.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#E8E3DD

Goose Yellow · Beige · Peach Orange

HEX
#E8E3DD
RGB
rgb(232, 227, 221)
HSL
hsl(33, 19%, 89%)
HSB
hsb(33, 5%, 91%)
CMYK
cmyk(0%, 2%, 5%, 9%)
Oklch
oklch(91.8% 0.010 72.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#ECC3B1

Apricot · LightPink · Peach Orange

HEX
#ECC3B1
RGB
rgb(236, 195, 177)
HSL
hsl(18, 61%, 81%)
HSB
hsb(18, 25%, 93%)
CMYK
cmyk(0%, 17%, 25%, 7%)
Oklch
oklch(84.8% 0.053 45.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96B4AA
B597A1

Analogous

97B59C
96B4AA
97B0B5

Triadic

96B4AA
AB97B5
B5AB97

Split-Comp.

96B4AA
B597B0
B59C97

Tetradic

96B4AA
9C97B5
B597A1
B0B597

Contrast Matrix WCAG 2.1 Contrast

96B4AA
ADC7BA
C0D3CF
E8E3DD
ECC3B1
—
1.2
Fail
1.4
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.0
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
1.4
Fail
1.1
Fail
1.0
Fail
1.3
Fail
—
White BG
2.2Fail
1.8Fail
1.6Fail
1.3Fail
1.6Fail
Black BG
9.4AAA
11.7AAA
13.5AAA
16.5AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3AC
B8B8BD
C8C8D0
E6E6DE
DADAB5

Deuteranopia

A19FAD
B7B5BE
C7C6D0
E6E6DF
DDE0B6

Tritanopia

98AEAF
AEC0C0
C1D1D1
E8E0E0
EAB9BA

Achromatopsia

AAAAAA
BEBEBE
CDCDCD
E4E4E4
CDCDCD

Shades & Tints Shades & Tints

#96B4AA

Dark
Light

#ADC7BA

Dark
Light

#C0D3CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96b4aa;
  --color-2: #adc7ba;
  --color-3: #c0d3cf;
  --color-4: #e8e3dd;
  --color-5: #ecc3b1;
}

SCSS

$color-1: #96b4aa;
$color-2: #adc7ba;
$color-3: #c0d3cf;
$color-4: #e8e3dd;
$color-5: #ecc3b1;

TAILWIND

colors: {
  'brand-1': '#96b4aa',
  'brand-2': '#adc7ba',
  'brand-3': '#c0d3cf',
  'brand-4': '#e8e3dd',
  'brand-5': '#ecc3b1',
}

RGB Array

[150, 180, 170], [173, 199, 186], [192, 211, 207], [232, 227, 221], [236, 195, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #96B4AA, #ADC7BA, #C0D3CF, #E8E3DD, #ECC3B1 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #96b4aa; --color-2: #adc7ba; --color-3: #c0d3cf; --color-4: #e8e3dd; --color-5: #ecc3b1. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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