← Back to Editor

#D4CDC5 · #5B88A5 · #F4F4F2 · #191013 · #243A69

cool

A 5-color cool 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

#D4CDC5

Goose Yellow · LightGray · Peach Orange

HEX
#D4CDC5
RGB
rgb(212, 205, 197)
HSL
hsl(32, 15%, 80%)
HSB
hsb(32, 7%, 83%)
CMYK
cmyk(0%, 3%, 7%, 17%)
Oklch
oklch(85.2% 0.013 71.3)

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

#5B88A5

Slate Blue · CadetBlue · Navy Blue

HEX
#5B88A5
RGB
rgb(91, 136, 165)
HSL
hsl(204, 29%, 50%)
HSB
hsb(204, 45%, 65%)
CMYK
cmyk(45%, 18%, 0%, 35%)
Oklch
oklch(60.6% 0.066 237.6)

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

#F4F4F2

Fresh Green · SeaShell · Cloud White

HEX
#F4F4F2
RGB
rgb(244, 244, 242)
HSL
hsl(60, 8%, 95%)
HSB
hsb(60, 1%, 96%)
CMYK
cmyk(0%, 0%, 1%, 4%)
Oklch
oklch(96.7% 0.003 106.4)

Traditional「Fresh Green」· Paint「Cloud White」· Creative Morning Mist

#191013

Dark Violet · Black · Raspberry

HEX
#191013
RGB
rgb(25, 16, 19)
HSL
hsl(340, 22%, 8%)
HSB
hsb(340, 36%, 10%)
CMYK
cmyk(0%, 36%, 24%, 90%)
Oklch
oklch(18.6% 0.016 357.0)

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

#243A69

Indigo · DarkSlateGray · Prussian Blue

HEX
#243A69
RGB
rgb(36, 58, 105)
HSL
hsl(221, 49%, 28%)
HSB
hsb(221, 66%, 41%)
CMYK
cmyk(66%, 45%, 0%, 59%)
Oklch
oklch(35.6% 0.086 263.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CDC5
C4CBD4

Analogous

D4C5C4
D4CDC5
D3D4C4

Triadic

D4CDC5
C4D4CD
CDC4D4

Split-Comp.

D4CDC5
C4D3D4
C5C4D4

Tetradic

D4CDC5
C4D4C5
C4CBD4
D4C4D3

Contrast Matrix WCAG 2.1 Contrast

D4CDC5
5B88A5
F4F4F2
191013
243A69
—
2.4
Fail
1.4
Fail
11.9
AAA
7.1
AAA
2.4
Fail
—
3.5
AA Large
4.9
AA
2.9
Fail
1.4
Fail
3.5
AA Large
—
17.0
AAA
10.1
AAA
11.9
AAA
4.9
AA
17.0
AAA
—
1.7
Fail
7.1
AAA
2.9
Fail
10.1
AAA
1.7
Fail
—
White BG
1.6Fail
3.8AA Large
1.1Fail
18.7AAA
11.1AAA
Black BG
13.3AAA
5.5AA
19.1AAA
1.1Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1C7
6E6F9E
F4F4F2
151512
2E2E5E

Deuteranopia

D1D2C7
6C699C
F4F4F3
161612
2C2B5B

Tritanopia

D4C8C9
5D9897
F4F3F3
191212
255553

Achromatopsia

CECECE
7E7E7E
F4F4F4
131313
393939

Shades & Tints Shades & Tints

#D4CDC5

Dark
Light

#5B88A5

Dark
Light

#F4F4F2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4cdc5;
  --color-2: #5b88a5;
  --color-3: #f4f4f2;
  --color-4: #191013;
  --color-5: #243a69;
}

SCSS

$color-1: #d4cdc5;
$color-2: #5b88a5;
$color-3: #f4f4f2;
$color-4: #191013;
$color-5: #243a69;

TAILWIND

colors: {
  'brand-1': '#d4cdc5',
  'brand-2': '#5b88a5',
  'brand-3': '#f4f4f2',
  'brand-4': '#191013',
  'brand-5': '#243a69',
}

RGB Array

[212, 205, 197], [91, 136, 165], [244, 244, 242], [25, 16, 19], [36, 58, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D4CDC5, #5B88A5, #F4F4F2, #191013, #243A69 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: #d4cdc5; --color-2: #5b88a5; --color-3: #f4f4f2; --color-4: #191013; --color-5: #243a69. 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 cool-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