← Back to Editor

#CDD7CC · #B2C7DA · #84AFBF · #4399B4 · #2B3B3A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CDD7CC

Celadon · LightGray · Mint Green

HEX
#CDD7CC
RGB
rgb(205, 215, 204)
HSL
hsl(115, 12%, 82%)
HSB
hsb(115, 5%, 84%)
CMYK
cmyk(5%, 0%, 5%, 16%)
Oklch
oklch(86.8% 0.018 142.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#B2C7DA

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#B2C7DA
RGB
rgb(178, 199, 218)
HSL
hsl(208, 35%, 78%)
HSB
hsb(208, 18%, 85%)
CMYK
cmyk(18%, 9%, 0%, 15%)
Oklch
oklch(82.0% 0.035 245.5)

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

#84AFBF

Sky Blue · DarkGray · Lake Green

HEX
#84AFBF
RGB
rgb(132, 175, 191)
HSL
hsl(196, 32%, 63%)
HSB
hsb(196, 31%, 75%)
CMYK
cmyk(31%, 8%, 0%, 25%)
Oklch
oklch(72.9% 0.052 222.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#4399B4

Slate Blue · SteelBlue · Mint Ice

HEX
#4399B4
RGB
rgb(67, 153, 180)
HSL
hsl(194, 46%, 48%)
HSB
hsb(194, 63%, 71%)
CMYK
cmyk(63%, 15%, 0%, 29%)
Oklch
oklch(64.1% 0.091 221.7)

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

#2B3B3A

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2B3B3A
RGB
rgb(43, 59, 58)
HSL
hsl(176, 16%, 20%)
HSB
hsb(176, 27%, 23%)
CMYK
cmyk(27%, 0%, 2%, 77%)
Oklch
oklch(33.8% 0.021 191.4)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD7CC
D6CCD7

Analogous

D2D7CC
CDD7CC
CCD7D0

Triadic

CDD7CC
CCCDD7
D7CCCD

Split-Comp.

CDD7CC
D0CCD7
D7CCD2

Tetradic

CDD7CC
CCD2D7
D6CCD7
D7D0CC

Contrast Matrix WCAG 2.1 Contrast

CDD7CC
B2C7DA
84AFBF
4399B4
2B3B3A
—
1.2
Fail
1.6
Fail
2.2
Fail
7.9
AAA
1.2
Fail
—
1.4
Fail
1.9
Fail
6.7
AA
1.6
Fail
1.4
Fail
—
1.4
Fail
5.0
AA
2.2
Fail
1.9
Fail
1.4
Fail
—
3.6
AA Large
7.9
AAA
6.7
AA
5.0
AA
3.6
AA Large
—
White BG
1.5Fail
1.7Fail
2.4Fail
3.3AA Large
11.7AAA
Black BG
14.2AAA
12.1AAA
8.9AAA
6.5AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1CF
BBBBD5
9797BB
6869AD
32323A

Deuteranopia

D1D0CF
BAB8D4
9491BA
635DAC
31303A

Tritanopia

CED1D1
B3D2D1
86B8B7
47A8A7
2C3A3A

Achromatopsia

D3D3D3
C3C3C3
A4A4A4
828282
363636

Shades & Tints Shades & Tints

#CDD7CC

Dark
Light

#B2C7DA

Dark
Light

#84AFBF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd7cc;
  --color-2: #b2c7da;
  --color-3: #84afbf;
  --color-4: #4399b4;
  --color-5: #2b3b3a;
}

SCSS

$color-1: #cdd7cc;
$color-2: #b2c7da;
$color-3: #84afbf;
$color-4: #4399b4;
$color-5: #2b3b3a;

TAILWIND

colors: {
  'brand-1': '#cdd7cc',
  'brand-2': '#b2c7da',
  'brand-3': '#84afbf',
  'brand-4': '#4399b4',
  'brand-5': '#2b3b3a',
}

RGB Array

[205, 215, 204], [178, 199, 218], [132, 175, 191], [67, 153, 180], [43, 59, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD7CC, #B2C7DA, #84AFBF, #4399B4, #2B3B3A 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: #cdd7cc; --color-2: #b2c7da; --color-3: #84afbf; --color-4: #4399b4; --color-5: #2b3b3a. 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