← Back to Editor

#D4CCC1 · #7D6887 · #7694B0 · #9DB5BF · #D8E3D3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4CCC1

Goose Yellow · LightGray · Peach Orange

HEX
#D4CCC1
RGB
rgb(212, 204, 193)
HSL
hsl(35, 18%, 79%)
HSB
hsb(35, 9%, 83%)
CMYK
cmyk(0%, 4%, 9%, 17%)
Oklch
oklch(84.9% 0.017 76.1)

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

#7D6887

Dark Plum · Gray · Violet

HEX
#7D6887
RGB
rgb(125, 104, 135)
HSL
hsl(281, 13%, 47%)
HSB
hsb(281, 23%, 53%)
CMYK
cmyk(7%, 23%, 0%, 47%)
Oklch
oklch(54.9% 0.053 314.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#7694B0

Slate Blue · LightSlateGray · Navy Blue

HEX
#7694B0
RGB
rgb(118, 148, 176)
HSL
hsl(209, 27%, 58%)
HSB
hsb(209, 33%, 69%)
CMYK
cmyk(33%, 16%, 0%, 31%)
Oklch
oklch(65.4% 0.054 246.9)

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

#9DB5BF

Sky Blue · DarkGray · Lake Green

HEX
#9DB5BF
RGB
rgb(157, 181, 191)
HSL
hsl(198, 21%, 68%)
HSB
hsb(198, 18%, 75%)
CMYK
cmyk(18%, 5%, 0%, 25%)
Oklch
oklch(75.8% 0.030 224.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D8E3D3

Celadon · LightGray · Mint Green

HEX
#D8E3D3
RGB
rgb(216, 227, 211)
HSL
hsl(101, 22%, 86%)
HSB
hsb(101, 7%, 89%)
CMYK
cmyk(5%, 0%, 7%, 11%)
Oklch
oklch(90.3% 0.024 135.7)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CCC1
C0C8D3

Analogous

D3C1C0
D4CCC1
D1D3C0

Triadic

D4CCC1
C0D3CB
CBC0D3

Split-Comp.

D4CCC1
C0D1D3
C1C0D3

Tetradic

D4CCC1
C0D3C1
C0C8D3
D3C0D1

Contrast Matrix WCAG 2.1 Contrast

D4CCC1
7D6887
7694B0
9DB5BF
D8E3D3
—
3.1
AA Large
2.0
Fail
1.3
Fail
1.2
Fail
3.1
AA Large
—
1.6
Fail
2.3
Fail
3.8
AA Large
2.0
Fail
1.6
Fail
—
1.5
Fail
2.4
Fail
1.3
Fail
2.3
Fail
1.5
Fail
—
1.6
Fail
1.2
Fail
3.8
AA Large
2.4
Fail
1.6
Fail
—
White BG
1.6Fail
5.0AA
3.2AA Large
2.1Fail
1.3Fail
Black BG
13.2AAA
4.2AA Large
6.6AA
9.8AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D0C4
74747F
8383A9
A7A8BD
DDDDD7

Deuteranopia

D1D2C4
75777E
817FA8
A6A4BC
DCDBD8

Tritanopia

D4C6C6
7C7A78
78A4A3
9EBBBA
D9DADB

Achromatopsia

CDCDCD
727272
8E8E8E
AFAFAF
DEDEDE

Shades & Tints Shades & Tints

#D4CCC1

Dark
Light

#7D6887

Dark
Light

#7694B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4ccc1;
  --color-2: #7d6887;
  --color-3: #7694b0;
  --color-4: #9db5bf;
  --color-5: #d8e3d3;
}

SCSS

$color-1: #d4ccc1;
$color-2: #7d6887;
$color-3: #7694b0;
$color-4: #9db5bf;
$color-5: #d8e3d3;

TAILWIND

colors: {
  'brand-1': '#d4ccc1',
  'brand-2': '#7d6887',
  'brand-3': '#7694b0',
  'brand-4': '#9db5bf',
  'brand-5': '#d8e3d3',
}

RGB Array

[212, 204, 193], [125, 104, 135], [118, 148, 176], [157, 181, 191], [216, 227, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4CCC1, #7D6887, #7694B0, #9DB5BF, #D8E3D3 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: #d4ccc1; --color-2: #7d6887; --color-3: #7694b0; --color-4: #9db5bf; --color-5: #d8e3d3. 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 general-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