← Back to Editor

#B0DDCE · #84C2BC · #4D829F · #354E6B · #1D1936

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

#B0DDCE

Jade · LightBlue · Glacier Blue

HEX
#B0DDCE
RGB
rgb(176, 221, 206)
HSL
hsl(160, 40%, 78%)
HSB
hsb(160, 20%, 87%)
CMYK
cmyk(20%, 0%, 7%, 13%)
Oklch
oklch(86.1% 0.051 172.7)

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

#84C2BC

Jade · MediumAquaMarine · Lake Green

HEX
#84C2BC
RGB
rgb(132, 194, 188)
HSL
hsl(174, 34%, 64%)
HSB
hsb(174, 32%, 76%)
CMYK
cmyk(32%, 0%, 3%, 24%)
Oklch
oklch(77.0% 0.064 188.3)

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

#4D829F

Slate Blue · SteelBlue · Navy Blue

HEX
#4D829F
RGB
rgb(77, 130, 159)
HSL
hsl(201, 35%, 46%)
HSB
hsb(201, 52%, 62%)
CMYK
cmyk(52%, 18%, 0%, 38%)
Oklch
oklch(58.1% 0.072 233.8)

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

#354E6B

Indigo · DarkSlateGray · Prussian Blue

HEX
#354E6B
RGB
rgb(53, 78, 107)
HSL
hsl(212, 34%, 31%)
HSB
hsb(212, 50%, 42%)
CMYK
cmyk(50%, 27%, 0%, 58%)
Oklch
oklch(41.7% 0.058 252.8)

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

#1D1936

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1D1936
RGB
rgb(29, 25, 54)
HSL
hsl(248, 37%, 15%)
HSB
hsb(248, 54%, 21%)
CMYK
cmyk(46%, 54%, 0%, 79%)
Oklch
oklch(23.5% 0.055 287.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0DDCE
DDB0BF

Analogous

B0DDB8
B0DDCE
B0D6DD

Triadic

B0DDCE
CEB0DD
DDCEB0

Split-Comp.

B0DDCE
DDB0D6
DDB8B0

Tetradic

B0DDCE
B8B0DD
DDB0BF
D6DDB0

Contrast Matrix WCAG 2.1 Contrast

B0DDCE
84C2BC
4D829F
354E6B
1D1936
—
1.4
Fail
2.8
Fail
5.7
AA
11.3
AAA
1.4
Fail
—
2.1
Fail
4.2
AA Large
8.4
AAA
2.8
Fail
2.1
Fail
—
2.0
Fail
4.0
AA Large
5.7
AA
4.2
AA Large
2.0
Fail
—
2.0
Fail
11.3
AAA
8.4
AAA
4.0
AA Large
2.0
Fail
—
White BG
1.5Fail
2.0Fail
4.2AA Large
8.6AAA
16.9AAA
Black BG
14.1AAA
10.4AAA
5.0AA
2.5Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C4D2
9F9FBD
646498
404064
1B1B2F

Deuteranopia

C1BED3
9B97BE
615D96
3E3C62
1C1C2D

Tritanopia

B2D4D5
87BFBF
509291
365E5D
1D2928

Achromatopsia

CECECE
AFAFAF
757575
4A4A4A
1E1E1E

Shades & Tints Shades & Tints

#B0DDCE

Dark
Light

#84C2BC

Dark
Light

#4D829F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0ddce;
  --color-2: #84c2bc;
  --color-3: #4d829f;
  --color-4: #354e6b;
  --color-5: #1d1936;
}

SCSS

$color-1: #b0ddce;
$color-2: #84c2bc;
$color-3: #4d829f;
$color-4: #354e6b;
$color-5: #1d1936;

TAILWIND

colors: {
  'brand-1': '#b0ddce',
  'brand-2': '#84c2bc',
  'brand-3': '#4d829f',
  'brand-4': '#354e6b',
  'brand-5': '#1d1936',
}

RGB Array

[176, 221, 206], [132, 194, 188], [77, 130, 159], [53, 78, 107], [29, 25, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0DDCE, #84C2BC, #4D829F, #354E6B, #1D1936 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b0ddce; --color-2: #84c2bc; --color-3: #4d829f; --color-4: #354e6b; --color-5: #1d1936. 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. 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