← Back to Editor

#DAE1E7 · #C8C7CC · #C8A69A · #C28567 · #786366

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

WorkspaceReadingData Visualization

Color Details Color Details

#DAE1E7

Sky Blue · Lavender · Sky Blue

HEX
#DAE1E7
RGB
rgb(218, 225, 231)
HSL
hsl(208, 21%, 88%)
HSB
hsb(208, 6%, 91%)
CMYK
cmyk(6%, 3%, 0%, 9%)
Oklch
oklch(90.6% 0.011 243.7)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#C8C7CC

Silver Gray · Silver · Pearl Gray

HEX
#C8C7CC
RGB
rgb(200, 199, 204)
HSL
hsl(252, 5%, 79%)
HSB
hsb(252, 2%, 80%)
CMYK
cmyk(2%, 2%, 0%, 20%)
Oklch
oklch(83.2% 0.007 295.4)

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

#C8A69A

Apricot · Tan · Warm Sun

HEX
#C8A69A
RGB
rgb(200, 166, 154)
HSL
hsl(16, 29%, 69%)
HSB
hsb(16, 23%, 78%)
CMYK
cmyk(0%, 17%, 23%, 22%)
Oklch
oklch(75.2% 0.044 40.4)

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

#C28567

Tangerine · DarkSalmon · Warm Sun

HEX
#C28567
RGB
rgb(194, 133, 103)
HSL
hsl(20, 43%, 58%)
HSB
hsb(20, 47%, 76%)
CMYK
cmyk(0%, 31%, 47%, 24%)
Oklch
oklch(67.1% 0.087 47.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#786366

Crimson · DimGray · Passion Red

HEX
#786366
RGB
rgb(120, 99, 102)
HSL
hsl(351, 10%, 43%)
HSB
hsb(351, 17%, 47%)
CMYK
cmyk(0%, 18%, 15%, 53%)
Oklch
oklch(52.1% 0.027 8.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DAE1E7
E7E0DA

Analogous

DAE7E6
DAE1E7
DADAE7

Triadic

DAE1E7
E7DAE1
E1E7DA

Split-Comp.

DAE1E7
E7DADA
E7E6DA

Tetradic

DAE1E7
E6DAE7
E7E0DA
DAE7DA

Contrast Matrix WCAG 2.1 Contrast

DAE1E7
C8C7CC
C8A69A
C28567
786366
—
1.3
Fail
1.7
Fail
2.3
Fail
4.2
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
3.3
AA Large
1.7
Fail
1.3
Fail
—
1.4
Fail
2.5
Fail
2.3
Fail
1.8
Fail
1.4
Fail
—
1.8
Fail
4.2
AA Large
3.3
AA Large
2.5
Fail
1.8
Fail
—
White BG
1.3Fail
1.7Fail
2.2Fail
3.1AA Large
5.6AA
Black BG
15.9AAA
12.5AAA
9.4AAA
6.8AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDE6
C8C8CB
B9B99D
A8A76E
6F6F65

Deuteranopia

DDDCE5
C8C8CA
BBBE9E
ABB070
707265

Tritanopia

DAE4E4
C8CACA
C69FA0
BF7475
776565

Achromatopsia

E0E0E0
C8C8C8
AFAFAF
949494
6A6A6A

Shades & Tints Shades & Tints

#DAE1E7

Dark
Light

#C8C7CC

Dark
Light

#C8A69A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dae1e7;
  --color-2: #c8c7cc;
  --color-3: #c8a69a;
  --color-4: #c28567;
  --color-5: #786366;
}

SCSS

$color-1: #dae1e7;
$color-2: #c8c7cc;
$color-3: #c8a69a;
$color-4: #c28567;
$color-5: #786366;

TAILWIND

colors: {
  'brand-1': '#dae1e7',
  'brand-2': '#c8c7cc',
  'brand-3': '#c8a69a',
  'brand-4': '#c28567',
  'brand-5': '#786366',
}

RGB Array

[218, 225, 231], [200, 199, 204], [200, 166, 154], [194, 133, 103], [120, 99, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DAE1E7, #C8C7CC, #C8A69A, #C28567, #786366 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #dae1e7; --color-2: #c8c7cc; --color-3: #c8a69a; --color-4: #c28567; --color-5: #786366. 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. 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 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