← Back to Editor

#DAD8C5 · #C5B8B0 · #A39691 · #587189 · #222731

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DAD8C5

Fresh Green · LightGray · Lemon Cream

HEX
#DAD8C5
RGB
rgb(218, 216, 197)
HSL
hsl(54, 22%, 81%)
HSB
hsb(54, 10%, 85%)
CMYK
cmyk(0%, 1%, 10%, 15%)
Oklch
oklch(87.9% 0.026 102.0)

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

#C5B8B0

Apricot · Silver · Warm Sun

HEX
#C5B8B0
RGB
rgb(197, 184, 176)
HSL
hsl(23, 15%, 73%)
HSB
hsb(23, 11%, 77%)
CMYK
cmyk(0%, 7%, 11%, 23%)
Oklch
oklch(79.1% 0.019 53.9)

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

#A39691

Tangerine · DarkGray · Silver Sand

HEX
#A39691
RGB
rgb(163, 150, 145)
HSL
hsl(17, 9%, 60%)
HSB
hsb(17, 11%, 64%)
CMYK
cmyk(0%, 8%, 11%, 36%)
Oklch
oklch(68.3% 0.017 42.3)

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

#587189

Slate Blue · SlateGray · Navy Blue

HEX
#587189
RGB
rgb(88, 113, 137)
HSL
hsl(209, 22%, 44%)
HSB
hsb(209, 36%, 54%)
CMYK
cmyk(36%, 18%, 0%, 46%)
Oklch
oklch(53.8% 0.048 247.7)

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

#222731

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#222731
RGB
rgb(34, 39, 49)
HSL
hsl(220, 18%, 16%)
HSB
hsb(220, 31%, 19%)
CMYK
cmyk(31%, 20%, 0%, 81%)
Oklch
oklch(27.2% 0.020 264.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DAD8C5
C4C6D9

Analogous

D9CCC4
DAD8C5
D1D9C4

Triadic

DAD8C5
C4D9D7
D7C4D9

Split-Comp.

DAD8C5
C4D1D9
CCC4D9

Tetradic

DAD8C5
C4D9CC
C4C6D9
D9C4D1

Contrast Matrix WCAG 2.1 Contrast

DAD8C5
C5B8B0
A39691
587189
222731
—
1.3
Fail
2.0
Fail
3.5
AA Large
10.4
AAA
1.3
Fail
—
1.5
Fail
2.6
Fail
7.7
AAA
2.0
Fail
1.5
Fail
—
1.8
Fail
5.2
AA
3.5
AA Large
2.6
Fail
1.8
Fail
—
3.0
Fail
10.4
AAA
7.7
AAA
5.2
AA
3.0
Fail
—
White BG
1.4Fail
1.9Fail
2.9Fail
5.1AA
15.0AAA
Black BG
14.6AAA
10.9AAA
7.3AAA
4.1AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9CA
BFBFB2
9D9D92
636383
24242F

Deuteranopia

D9D9CB
C0C1B2
9E9F93
616082
24242E

Tritanopia

DACDCE
C4B3B4
A29393
597F7E
222D2C

Achromatopsia

D6D6D6
BBBBBB
999999
6C6C6C
272727

Shades & Tints Shades & Tints

#DAD8C5

Dark
Light

#C5B8B0

Dark
Light

#A39691

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dad8c5;
  --color-2: #c5b8b0;
  --color-3: #a39691;
  --color-4: #587189;
  --color-5: #222731;
}

SCSS

$color-1: #dad8c5;
$color-2: #c5b8b0;
$color-3: #a39691;
$color-4: #587189;
$color-5: #222731;

TAILWIND

colors: {
  'brand-1': '#dad8c5',
  'brand-2': '#c5b8b0',
  'brand-3': '#a39691',
  'brand-4': '#587189',
  'brand-5': '#222731',
}

RGB Array

[218, 216, 197], [197, 184, 176], [163, 150, 145], [88, 113, 137], [34, 39, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DAD8C5, #C5B8B0, #A39691, #587189, #222731 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: #dad8c5; --color-2: #c5b8b0; --color-3: #a39691; --color-4: #587189; --color-5: #222731. 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 general-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