← Back to Editor

#DBD6AF · #C2ABB2 · #879695 · #4B7980 · #3C4D63

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

#DBD6AF

Fresh Green · Wheat · Lemon Cream

HEX
#DBD6AF
RGB
rgb(219, 214, 175)
HSL
hsl(53, 38%, 77%)
HSB
hsb(53, 20%, 86%)
CMYK
cmyk(0%, 2%, 20%, 14%)
Oklch
oklch(87.0% 0.052 101.3)

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

#C2ABB2

Rouge · Silver · Rose Pink

HEX
#C2ABB2
RGB
rgb(194, 171, 178)
HSL
hsl(342, 16%, 72%)
HSB
hsb(342, 12%, 76%)
CMYK
cmyk(0%, 12%, 8%, 24%)
Oklch
oklch(76.3% 0.028 357.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#879695

Ash · LightSlateGray · Silver Sand

HEX
#879695
RGB
rgb(135, 150, 149)
HSL
hsl(176, 7%, 56%)
HSB
hsb(176, 10%, 59%)
CMYK
cmyk(10%, 0%, 1%, 41%)
Oklch
oklch(66.1% 0.017 191.9)

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

#4B7980

Slate Blue · SlateGray · Mint Ice

HEX
#4B7980
RGB
rgb(75, 121, 128)
HSL
hsl(188, 26%, 40%)
HSB
hsb(188, 41%, 50%)
CMYK
cmyk(41%, 5%, 0%, 50%)
Oklch
oklch(54.6% 0.051 208.0)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3C4D63

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C4D63
RGB
rgb(60, 77, 99)
HSL
hsl(214, 25%, 31%)
HSB
hsb(214, 39%, 39%)
CMYK
cmyk(39%, 22%, 0%, 61%)
Oklch
oklch(41.5% 0.043 255.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBD6AF
AEB3DB

Analogous

DBBFAE
DBD6AF
CADBAE

Triadic

DBD6AF
AEDBD5
D5AEDB

Split-Comp.

DBD6AF
AECADB
BFAEDB

Tetradic

DBD6AF
AEDBBF
AEB3DB
DBAECA

Contrast Matrix WCAG 2.1 Contrast

DBD6AF
C2ABB2
879695
4B7980
3C4D63
—
1.5
Fail
2.1
Fail
3.3
AA Large
5.9
AA
1.5
Fail
—
1.4
Fail
2.2
Fail
4.0
AA Large
2.1
Fail
1.4
Fail
—
1.6
Fail
2.8
Fail
3.3
AA Large
2.2
Fail
1.6
Fail
—
1.8
Fail
5.9
AA
4.0
AA Large
2.8
Fail
1.8
Fail
—
White BG
1.5Fail
2.2Fail
3.1AA Large
4.8AA
8.6AAA
Black BG
14.2AAA
9.8AAA
6.8AA
4.3AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9B8
B8B8B0
8D8E95
5F5F7E
43445E

Deuteranopia

D9DABB
B9BBB0
8D8C95
5C597E
42415C

Tritanopia

DBC0C2
C1AFAF
889595
4D7D7D
3D5959

Achromatopsia

D3D3D3
B3B3B3
919191
6C6C6C
4A4A4A

Shades & Tints Shades & Tints

#DBD6AF

Dark
Light

#C2ABB2

Dark
Light

#879695

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbd6af;
  --color-2: #c2abb2;
  --color-3: #879695;
  --color-4: #4b7980;
  --color-5: #3c4d63;
}

SCSS

$color-1: #dbd6af;
$color-2: #c2abb2;
$color-3: #879695;
$color-4: #4b7980;
$color-5: #3c4d63;

TAILWIND

colors: {
  'brand-1': '#dbd6af',
  'brand-2': '#c2abb2',
  'brand-3': '#879695',
  'brand-4': '#4b7980',
  'brand-5': '#3c4d63',
}

RGB Array

[219, 214, 175], [194, 171, 178], [135, 150, 149], [75, 121, 128], [60, 77, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBD6AF, #C2ABB2, #879695, #4B7980, #3C4D63 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: #dbd6af; --color-2: #c2abb2; --color-3: #879695; --color-4: #4b7980; --color-5: #3c4d63. 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