← Back to Editor

#DFDFDD · #D2CCD0 · #C4C3C8 · #ADB4BE · #8D97A3

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

#DFDFDD

Plain White · LightGray · Cloud White

HEX
#DFDFDD
RGB
rgb(223, 223, 221)
HSL
hsl(60, 3%, 87%)
HSB
hsb(60, 1%, 87%)
CMYK
cmyk(0%, 0%, 1%, 13%)
Oklch
oklch(90.3% 0.003 106.5)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#D2CCD0

Silver Gray · LightGray · Pearl Gray

HEX
#D2CCD0
RGB
rgb(210, 204, 208)
HSL
hsl(320, 6%, 81%)
HSB
hsb(320, 3%, 82%)
CMYK
cmyk(0%, 3%, 1%, 18%)
Oklch
oklch(85.1% 0.009 337.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#C4C3C8

Silver Gray · Silver · Pearl Gray

HEX
#C4C3C8
RGB
rgb(196, 195, 200)
HSL
hsl(252, 4%, 77%)
HSB
hsb(252, 3%, 78%)
CMYK
cmyk(2%, 3%, 0%, 22%)
Oklch
oklch(81.9% 0.007 295.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#ADB4BE

Azure · Silver · Cobalt Blue

HEX
#ADB4BE
RGB
rgb(173, 180, 190)
HSL
hsl(215, 12%, 71%)
HSB
hsb(215, 9%, 75%)
CMYK
cmyk(9%, 5%, 0%, 25%)
Oklch
oklch(76.7% 0.016 257.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#8D97A3

Azure · LightSlateGray · Navy Blue

HEX
#8D97A3
RGB
rgb(141, 151, 163)
HSL
hsl(213, 11%, 60%)
HSB
hsb(213, 13%, 64%)
CMYK
cmyk(13%, 7%, 0%, 36%)
Oklch
oklch(67.2% 0.021 252.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFDFDD
DDDDDF

Analogous

DFDEDD
DFDFDD
DEDFDD

Triadic

DFDFDD
DDDFDF
DFDDDF

Split-Comp.

DFDFDD
DDDEDF
DEDDDF

Tetradic

DFDFDD
DDDFDE
DDDDDF
DFDDDE

Contrast Matrix WCAG 2.1 Contrast

DFDFDD
D2CCD0
C4C3C8
ADB4BE
8D97A3
—
1.2
Fail
1.3
Fail
1.6
Fail
2.2
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.9
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
2.2
Fail
1.9
Fail
1.7
Fail
1.4
Fail
—
White BG
1.3Fail
1.6Fail
1.8Fail
2.1Fail
3.0Fail
Black BG
15.7AAA
13.3AAA
12.0AAA
10.0AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFDD
CFCFCF
C4C4C7
B0B0BC
9191A0

Deuteranopia

DFDFDE
D0D0CF
C4C4C7
B0AFBB
91909F

Tritanopia

DFDEDE
D2CECE
C4C6C6
ADBAB9
8E9E9D

Achromatopsia

DFDFDF
CECECE
C4C4C4
B3B3B3
959595

Shades & Tints Shades & Tints

#DFDFDD

Dark
Light

#D2CCD0

Dark
Light

#C4C3C8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfdfdd;
  --color-2: #d2ccd0;
  --color-3: #c4c3c8;
  --color-4: #adb4be;
  --color-5: #8d97a3;
}

SCSS

$color-1: #dfdfdd;
$color-2: #d2ccd0;
$color-3: #c4c3c8;
$color-4: #adb4be;
$color-5: #8d97a3;

TAILWIND

colors: {
  'brand-1': '#dfdfdd',
  'brand-2': '#d2ccd0',
  'brand-3': '#c4c3c8',
  'brand-4': '#adb4be',
  'brand-5': '#8d97a3',
}

RGB Array

[223, 223, 221], [210, 204, 208], [196, 195, 200], [173, 180, 190], [141, 151, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DFDFDD, #D2CCD0, #C4C3C8, #ADB4BE, #8D97A3 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: #dfdfdd; --color-2: #d2ccd0; --color-3: #c4c3c8; --color-4: #adb4be; --color-5: #8d97a3. 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