← Back to Editor

#D1C4A9 · #92B3AA · #72A4B0 · #677D9E · #68538A

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 Library

Color Details Color Details

#D1C4A9

Goose Yellow · Silver · Sunflower

HEX
#D1C4A9
RGB
rgb(209, 196, 169)
HSL
hsl(41, 30%, 74%)
HSB
hsb(41, 19%, 82%)
CMYK
cmyk(0%, 6%, 19%, 18%)
Oklch
oklch(82.4% 0.039 85.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#92B3AA

Jade · DarkGray · Lake Green

HEX
#92B3AA
RGB
rgb(146, 179, 170)
HSL
hsl(164, 18%, 64%)
HSB
hsb(164, 18%, 70%)
CMYK
cmyk(18%, 0%, 5%, 30%)
Oklch
oklch(74.0% 0.038 176.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#72A4B0

Slate Blue · CadetBlue · Lake Green

HEX
#72A4B0
RGB
rgb(114, 164, 176)
HSL
hsl(192, 28%, 57%)
HSB
hsb(192, 35%, 69%)
CMYK
cmyk(35%, 7%, 0%, 31%)
Oklch
oklch(68.8% 0.056 214.3)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#677D9E

Azure · SlateGray · Navy Blue

HEX
#677D9E
RGB
rgb(103, 125, 158)
HSL
hsl(216, 22%, 51%)
HSB
hsb(216, 35%, 62%)
CMYK
cmyk(35%, 21%, 0%, 38%)
Oklch
oklch(58.5% 0.057 258.3)

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

#68538A

Deep Indigo · DarkSlateBlue · Violet

HEX
#68538A
RGB
rgb(104, 83, 138)
HSL
hsl(263, 25%, 43%)
HSB
hsb(263, 40%, 54%)
CMYK
cmyk(25%, 40%, 0%, 46%)
Oklch
oklch(48.7% 0.089 300.7)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1C4A9
A9B5D1

Analogous

D1B0A9
D1C4A9
C9D1A9

Triadic

D1C4A9
A9D1C4
C4A9D1

Split-Comp.

D1C4A9
A9C9D1
B0A9D1

Tetradic

D1C4A9
A9D1B0
A9B5D1
D1A9C9

Contrast Matrix WCAG 2.1 Contrast

D1C4A9
92B3AA
72A4B0
677D9E
68538A
—
1.3
Fail
1.6
Fail
2.4
Fail
3.8
AA Large
1.3
Fail
—
1.2
Fail
1.8
Fail
2.9
Fail
1.6
Fail
1.2
Fail
—
1.5
Fail
2.4
Fail
2.4
Fail
1.8
Fail
1.5
Fail
—
1.6
Fail
3.8
AA Large
2.9
Fail
2.4
Fail
1.6
Fail
—
White BG
1.7Fail
2.3Fail
2.7Fail
4.2AA Large
6.6AA
Black BG
12.2AAA
9.3AAA
7.7AAA
5.0AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBB0
A0A1AC
8888AD
717196
5F5F7D

Deuteranopia

CCCDB1
9E9CAD
8581AC
6F6E94
60627A

Tritanopia

D0B5B6
94AEAE
75ABAA
68908E
677270

Achromatopsia

C5C5C5
A8A8A8
969696
7A7A7A
606060

Shades & Tints Shades & Tints

#D1C4A9

Dark
Light

#92B3AA

Dark
Light

#72A4B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1c4a9;
  --color-2: #92b3aa;
  --color-3: #72a4b0;
  --color-4: #677d9e;
  --color-5: #68538a;
}

SCSS

$color-1: #d1c4a9;
$color-2: #92b3aa;
$color-3: #72a4b0;
$color-4: #677d9e;
$color-5: #68538a;

TAILWIND

colors: {
  'brand-1': '#d1c4a9',
  'brand-2': '#92b3aa',
  'brand-3': '#72a4b0',
  'brand-4': '#677d9e',
  'brand-5': '#68538a',
}

RGB Array

[209, 196, 169], [146, 179, 170], [114, 164, 176], [103, 125, 158], [104, 83, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1C4A9, #92B3AA, #72A4B0, #677D9E, #68538A is ideal for: brand design, premium product pages, magazine layouts. 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: #d1c4a9; --color-2: #92b3aa; --color-3: #72a4b0; --color-4: #677d9e; --color-5: #68538a. 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. 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