← Back to Editor

#303045 · #566B75 · #9AADA9 · #D1C1BC · #E8C4C1

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

#303045

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#303045
RGB
rgb(48, 48, 69)
HSL
hsl(240, 18%, 23%)
HSB
hsb(240, 30%, 27%)
CMYK
cmyk(30%, 30%, 0%, 73%)
Oklch
oklch(31.9% 0.037 284.1)

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

#566B75

Slate Blue · DimGray · Mint Ice

HEX
#566B75
RGB
rgb(86, 107, 117)
HSL
hsl(199, 15%, 40%)
HSB
hsb(199, 26%, 46%)
CMYK
cmyk(26%, 9%, 0%, 54%)
Oklch
oklch(51.4% 0.030 228.4)

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

#9AADA9

Jade · DarkGray · Lake Green

HEX
#9AADA9
RGB
rgb(154, 173, 169)
HSL
hsl(167, 10%, 64%)
HSB
hsb(167, 11%, 68%)
CMYK
cmyk(11%, 0%, 2%, 32%)
Oklch
oklch(73.2% 0.022 181.6)

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

#D1C1BC

Peach Pink · Silver · Coral Red

HEX
#D1C1BC
RGB
rgb(209, 193, 188)
HSL
hsl(14, 19%, 78%)
HSB
hsb(14, 10%, 82%)
CMYK
cmyk(0%, 8%, 10%, 18%)
Oklch
oklch(82.3% 0.019 38.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E8C4C1

Peach Pink · Pink · Cherry Blossom

HEX
#E8C4C1
RGB
rgb(232, 196, 193)
HSL
hsl(5, 46%, 83%)
HSB
hsb(5, 17%, 91%)
CMYK
cmyk(0%, 16%, 17%, 9%)
Oklch
oklch(85.0% 0.041 23.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303045
454530

Analogous

303B45
303045
3B3045

Triadic

303045
453030
304530

Split-Comp.

303045
453B30
3B4530

Tetradic

303045
45303B
454530
30453B

Contrast Matrix WCAG 2.1 Contrast

303045
566B75
9AADA9
D1C1BC
E8C4C1
—
2.3
Fail
5.5
AA
7.4
AAA
8.0
AAA
2.3
Fail
—
2.4
Fail
3.2
AA Large
3.5
AA Large
5.5
AA
2.4
Fail
—
1.4
Fail
1.5
Fail
7.4
AAA
3.2
AA Large
1.4
Fail
—
1.1
Fail
8.0
AAA
3.5
AA Large
1.5
Fail
1.1
Fail
—
White BG
12.8AAA
5.6AA
2.4Fail
1.7Fail
1.6Fail
Black BG
1.6Fail
3.8AA Large
8.9AAA
12.1AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303040
5F5F73
A2A2AA
CACABD
D8D8C2

Deuteranopia

30303F
5E5C72
A1A0AA
CBCCBE
DBDDC2

Tritanopia

303C3B
577170
9BABAB
D0BEBE
E6C2C2

Achromatopsia

323232
666666
A7A7A7
C5C5C5
CECECE

Shades & Tints Shades & Tints

#303045

Dark
Light

#566B75

Dark
Light

#9AADA9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303045;
  --color-2: #566b75;
  --color-3: #9aada9;
  --color-4: #d1c1bc;
  --color-5: #e8c4c1;
}

SCSS

$color-1: #303045;
$color-2: #566b75;
$color-3: #9aada9;
$color-4: #d1c1bc;
$color-5: #e8c4c1;

TAILWIND

colors: {
  'brand-1': '#303045',
  'brand-2': '#566b75',
  'brand-3': '#9aada9',
  'brand-4': '#d1c1bc',
  'brand-5': '#e8c4c1',
}

RGB Array

[48, 48, 69], [86, 107, 117], [154, 173, 169], [209, 193, 188], [232, 196, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #303045, #566B75, #9AADA9, #D1C1BC, #E8C4C1 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: #303045; --color-2: #566b75; --color-3: #9aada9; --color-4: #d1c1bc; --color-5: #e8c4c1. 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