← Back to Editor

#C5D6DD · #B5605B · #C5C6C0 · #818B8A · #457871

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

#C5D6DD

Sky Blue · LightGray · Glacier Blue

HEX
#C5D6DD
RGB
rgb(197, 214, 221)
HSL
hsl(198, 26%, 82%)
HSB
hsb(198, 11%, 87%)
CMYK
cmyk(11%, 3%, 0%, 13%)
Oklch
oklch(86.5% 0.021 224.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#B5605B

Crimson · Sienna · Passion Red

HEX
#B5605B
RGB
rgb(181, 96, 91)
HSL
hsl(3, 38%, 53%)
HSB
hsb(3, 50%, 71%)
CMYK
cmyk(0%, 47%, 50%, 29%)
Oklch
oklch(58.7% 0.111 24.5)

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

#C5C6C0

Silver Gray · Silver · Pearl Gray

HEX
#C5C6C0
RGB
rgb(197, 198, 192)
HSL
hsl(70, 5%, 76%)
HSB
hsb(70, 3%, 78%)
CMYK
cmyk(1%, 0%, 3%, 22%)
Oklch
oklch(82.4% 0.008 114.3)

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

#818B8A

Ash · Gray · Warm Gray

HEX
#818B8A
RGB
rgb(129, 139, 138)
HSL
hsl(174, 4%, 53%)
HSB
hsb(174, 7%, 55%)
CMYK
cmyk(7%, 0%, 1%, 45%)
Oklch
oklch(62.8% 0.012 189.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#457871

Mineral Blue · SeaGreen · Mint Ice

HEX
#457871
RGB
rgb(69, 120, 113)
HSL
hsl(172, 27%, 37%)
HSB
hsb(172, 43%, 47%)
CMYK
cmyk(43%, 0%, 6%, 53%)
Oklch
oklch(53.5% 0.056 184.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5D6DD
DDCCC5

Analogous

C5DDD8
C5D6DD
C5CADD

Triadic

C5D6DD
DDC5D6
D6DDC5

Split-Comp.

C5D6DD
DDC5CA
DDD8C5

Tetradic

C5D6DD
D8C5DD
DDCCC5
CADDC5

Contrast Matrix WCAG 2.1 Contrast

C5D6DD
B5605B
C5C6C0
818B8A
457871
—
2.9
Fail
1.1
Fail
2.3
Fail
3.4
AA Large
2.9
Fail
—
2.6
Fail
1.3
Fail
1.1
Fail
1.1
Fail
2.6
Fail
—
2.0
Fail
2.9
Fail
2.3
Fail
1.3
Fail
2.0
Fail
—
1.4
Fail
3.4
AA Large
1.1
Fail
2.9
Fail
1.4
Fail
—
White BG
1.5Fail
4.4AA Large
1.7Fail
3.5AA Large
5.0AA
Black BG
14.0AAA
4.8AA
12.2AAA
6.0AA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCDDB
908F5C
C5C5C1
85858A
5B5C73

Deuteranopia

CBCADB
959C5D
C5C5C2
85848A
585473

Tritanopia

C6DADA
B15D5D
C5C3C3
828A8A
487474

Achromatopsia

D2D2D2
797979
C5C5C5
888888
686868

Shades & Tints Shades & Tints

#C5D6DD

Dark
Light

#B5605B

Dark
Light

#C5C6C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5d6dd;
  --color-2: #b5605b;
  --color-3: #c5c6c0;
  --color-4: #818b8a;
  --color-5: #457871;
}

SCSS

$color-1: #c5d6dd;
$color-2: #b5605b;
$color-3: #c5c6c0;
$color-4: #818b8a;
$color-5: #457871;

TAILWIND

colors: {
  'brand-1': '#c5d6dd',
  'brand-2': '#b5605b',
  'brand-3': '#c5c6c0',
  'brand-4': '#818b8a',
  'brand-5': '#457871',
}

RGB Array

[197, 214, 221], [181, 96, 91], [197, 198, 192], [129, 139, 138], [69, 120, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5D6DD, #B5605B, #C5C6C0, #818B8A, #457871 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: #c5d6dd; --color-2: #b5605b; --color-3: #c5c6c0; --color-4: #818b8a; --color-5: #457871. 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