← Back to Editor

#FDDCD3 · #B4C1B8 · #A2959E · #907683 · #5B5E65

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 WebsiteBlogData Visualization

Color Details Color Details

#FDDCD3

Peach Pink · Bisque · Cherry Blossom

HEX
#FDDCD3
RGB
rgb(253, 220, 211)
HSL
hsl(13, 91%, 91%)
HSB
hsb(13, 17%, 99%)
CMYK
cmyk(0%, 13%, 17%, 1%)
Oklch
oklch(91.9% 0.039 35.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#B4C1B8

Celadon · Silver · Pearl Gray

HEX
#B4C1B8
RGB
rgb(180, 193, 184)
HSL
hsl(138, 9%, 73%)
HSB
hsb(138, 7%, 76%)
CMYK
cmyk(7%, 0%, 5%, 24%)
Oklch
oklch(79.8% 0.019 155.7)

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

#A2959E

Ash · DarkGray · Silver Sand

HEX
#A2959E
RGB
rgb(162, 149, 158)
HSL
hsl(318, 7%, 61%)
HSB
hsb(318, 8%, 64%)
CMYK
cmyk(0%, 8%, 2%, 36%)
Oklch
oklch(68.4% 0.020 336.7)

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

#907683

Dark Violet · Gray · Rose Pink

HEX
#907683
RGB
rgb(144, 118, 131)
HSL
hsl(330, 10%, 51%)
HSB
hsb(330, 18%, 56%)
CMYK
cmyk(0%, 18%, 9%, 44%)
Oklch
oklch(59.5% 0.037 346.7)

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

#5B5E65

Ink Gray · DimGray · Charcoal

HEX
#5B5E65
RGB
rgb(91, 94, 101)
HSL
hsl(222, 5%, 38%)
HSB
hsb(222, 10%, 40%)
CMYK
cmyk(10%, 7%, 0%, 60%)
Oklch
oklch(48.2% 0.012 267.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDDCD3
D3F4FD

Analogous

FDD3DF
FDDCD3
FDF1D3

Triadic

FDDCD3
D3FDDC
DCD3FD

Split-Comp.

FDDCD3
D3FDF1
D3DFFD

Tetradic

FDDCD3
DFFDD3
D3F4FD
F1D3FD

Contrast Matrix WCAG 2.1 Contrast

FDDCD3
B4C1B8
A2959E
907683
5B5E65
—
1.5
Fail
2.2
Fail
3.2
AA Large
5.1
AA
1.5
Fail
—
1.5
Fail
2.2
Fail
3.5
AA Large
2.2
Fail
1.5
Fail
—
1.4
Fail
2.3
Fail
3.2
AA Large
2.2
Fail
1.4
Fail
—
1.6
Fail
5.1
AA
3.5
AA Large
2.3
Fail
1.6
Fail
—
White BG
1.3Fail
1.9Fail
2.9Fail
4.1AA Large
6.5AA
Black BG
16.4AAA
11.3AAA
7.3AAA
5.1AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEED5
BABABA
9C9C9C
858580
5C5C63

Deuteranopia

F1F3D6
B9B8BB
9D9E9B
86887F
5C5C63

Tritanopia

FBD7D7
B5BCBC
A19A9A
8F7D7D
5B6262

Achromatopsia

E5E5E5
BCBCBC
9A9A9A
7F7F7F
5E5E5E

Shades & Tints Shades & Tints

#FDDCD3

Dark
Light

#B4C1B8

Dark
Light

#A2959E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fddcd3;
  --color-2: #b4c1b8;
  --color-3: #a2959e;
  --color-4: #907683;
  --color-5: #5b5e65;
}

SCSS

$color-1: #fddcd3;
$color-2: #b4c1b8;
$color-3: #a2959e;
$color-4: #907683;
$color-5: #5b5e65;

TAILWIND

colors: {
  'brand-1': '#fddcd3',
  'brand-2': '#b4c1b8',
  'brand-3': '#a2959e',
  'brand-4': '#907683',
  'brand-5': '#5b5e65',
}

RGB Array

[253, 220, 211], [180, 193, 184], [162, 149, 158], [144, 118, 131], [91, 94, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FDDCD3, #B4C1B8, #A2959E, #907683, #5B5E65 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #fddcd3; --color-2: #b4c1b8; --color-3: #a2959e; --color-4: #907683; --color-5: #5b5e65. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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