← Back to Editor

#D9E0E6 · #55493A · #B3A899 · #CAC0B2 · #4C543A

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

#D9E0E6

Sky Blue · LightGray · Sky Blue

HEX
#D9E0E6
RGB
rgb(217, 224, 230)
HSL
hsl(208, 21%, 88%)
HSB
hsb(208, 6%, 90%)
CMYK
cmyk(6%, 3%, 0%, 10%)
Oklch
oklch(90.3% 0.011 243.7)

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

#55493A

Ochre · DarkOliveGreen · Amber Brown

HEX
#55493A
RGB
rgb(85, 73, 58)
HSL
hsl(33, 19%, 28%)
HSB
hsb(33, 32%, 33%)
CMYK
cmyk(0%, 14%, 32%, 67%)
Oklch
oklch(41.3% 0.029 73.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#B3A899

Ginger · DarkGray · Warm Sun

HEX
#B3A899
RGB
rgb(179, 168, 153)
HSL
hsl(35, 15%, 65%)
HSB
hsb(35, 15%, 70%)
CMYK
cmyk(0%, 6%, 15%, 30%)
Oklch
oklch(73.7% 0.025 75.8)

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

#CAC0B2

Goose Yellow · Silver · Warm Sun

HEX
#CAC0B2
RGB
rgb(202, 192, 178)
HSL
hsl(35, 18%, 75%)
HSB
hsb(35, 12%, 79%)
CMYK
cmyk(0%, 5%, 12%, 21%)
Oklch
oklch(81.2% 0.022 76.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#4C543A

Grass Green · DarkOliveGreen · Forest Green

HEX
#4C543A
RGB
rgb(76, 84, 58)
HSL
hsl(78, 18%, 28%)
HSB
hsb(78, 31%, 33%)
CMYK
cmyk(10%, 0%, 31%, 67%)
Oklch
oklch(43.1% 0.042 122.1)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9E0E6
E7E0DA

Analogous

DAE7E6
D9E0E6
DADAE7

Triadic

D9E0E6
E7DAE1
E1E7DA

Split-Comp.

D9E0E6
E7DADA
E7E6DA

Tetradic

D9E0E6
E6DAE7
E7E0DA
DAE7DA

Contrast Matrix WCAG 2.1 Contrast

D9E0E6
55493A
B3A899
CAC0B2
4C543A
—
6.6
AA
1.8
Fail
1.3
Fail
6.0
AA
6.6
AA
—
3.7
AA Large
4.9
AA
1.1
Fail
1.8
Fail
3.7
AA Large
—
1.3
Fail
3.4
AA Large
1.3
Fail
4.9
AA
1.3
Fail
—
4.4
AA Large
6.0
AA
1.1
Fail
3.4
AA Large
4.4
AA Large
—
White BG
1.3Fail
8.7AAA
2.3Fail
1.8Fail
8.0AAA
Black BG
15.8AAA
2.4Fail
9.0AAA
11.7AAA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCE5
50503E
AEAE9D
C6C6B5
4F5040

Deuteranopia

DCDBE4
51513E
AFB09E
C6C7B6
4F4E42

Tritanopia

D9E3E3
544041
B29FA0
C9B8B9
4C4546

Achromatopsia

DFDFDF
4B4B4B
AAAAAA
C1C1C1
4F4F4F

Shades & Tints Shades & Tints

#D9E0E6

Dark
Light

#55493A

Dark
Light

#B3A899

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9e0e6;
  --color-2: #55493a;
  --color-3: #b3a899;
  --color-4: #cac0b2;
  --color-5: #4c543a;
}

SCSS

$color-1: #d9e0e6;
$color-2: #55493a;
$color-3: #b3a899;
$color-4: #cac0b2;
$color-5: #4c543a;

TAILWIND

colors: {
  'brand-1': '#d9e0e6',
  'brand-2': '#55493a',
  'brand-3': '#b3a899',
  'brand-4': '#cac0b2',
  'brand-5': '#4c543a',
}

RGB Array

[217, 224, 230], [85, 73, 58], [179, 168, 153], [202, 192, 178], [76, 84, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9E0E6, #55493A, #B3A899, #CAC0B2, #4C543A 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: #d9e0e6; --color-2: #55493a; --color-3: #b3a899; --color-4: #cac0b2; --color-5: #4c543a. 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