← Back to Editor

#B7C7D3 · #72A7BB · #1967BB · #A8CDBC · #CADDC8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#B7C7D3

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#B7C7D3
RGB
rgb(183, 199, 211)
HSL
hsl(206, 24%, 77%)
HSB
hsb(206, 13%, 83%)
CMYK
cmyk(13%, 6%, 0%, 17%)
Oklch
oklch(82.1% 0.024 240.2)

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

#72A7BB

Slate Blue · CadetBlue · Lake Green

HEX
#72A7BB
RGB
rgb(114, 167, 187)
HSL
hsl(196, 35%, 59%)
HSB
hsb(196, 39%, 73%)
CMYK
cmyk(39%, 11%, 0%, 27%)
Oklch
oklch(69.9% 0.063 223.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#1967BB

Indigo · SteelBlue · Navy Blue

HEX
#1967BB
RGB
rgb(25, 103, 187)
HSL
hsl(211, 76%, 42%)
HSB
hsb(211, 87%, 73%)
CMYK
cmyk(87%, 45%, 0%, 27%)
Oklch
oklch(51.5% 0.151 254.4)

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

#A8CDBC

Jade · Silver · Apple Green

HEX
#A8CDBC
RGB
rgb(168, 205, 188)
HSL
hsl(152, 27%, 73%)
HSB
hsb(152, 18%, 80%)
CMYK
cmyk(18%, 0%, 8%, 20%)
Oklch
oklch(81.7% 0.046 165.7)

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

#CADDC8

Celadon · LightGray · Mint Green

HEX
#CADDC8
RGB
rgb(202, 221, 200)
HSL
hsl(114, 24%, 83%)
HSB
hsb(114, 10%, 87%)
CMYK
cmyk(9%, 0%, 10%, 13%)
Oklch
oklch(87.8% 0.035 142.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7C7D3
D2C2B6

Analogous

B6D2D1
B7C7D3
B6B8D2

Triadic

B7C7D3
D2B6C6
C6D2B6

Split-Comp.

B7C7D3
D2B6B8
D2D1B6

Tetradic

B7C7D3
D1B6D2
D2C2B6
B8D2B6

Contrast Matrix WCAG 2.1 Contrast

B7C7D3
72A7BB
1967BB
A8CDBC
CADDC8
—
1.5
Fail
3.3
AA Large
1.0
Fail
1.2
Fail
1.5
Fail
—
2.2
Fail
1.5
Fail
1.8
Fail
3.3
AA Large
2.2
Fail
—
3.3
AA Large
4.0
AA Large
1.0
Fail
1.5
Fail
3.3
AA Large
—
1.2
Fail
1.2
Fail
1.8
Fail
4.0
AA Large
1.2
Fail
—
White BG
1.7Fail
2.6Fail
5.7AA
1.7Fail
1.4Fail
Black BG
12.1AAA
8.0AAA
3.7AA Large
12.1AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBED0
8989B6
3B3BA7
B8B8C0
D2D2CD

Deuteranopia

BDBCCF
8682B5
3630A2
B6B3C1
D1D0CE

Tritanopia

B8CECD
75B2B2
1D9793
AAC3C4
CBD1D2

Achromatopsia

C4C4C4
999999
595959
C0C0C0
D5D5D5

Shades & Tints Shades & Tints

#B7C7D3

Dark
Light

#72A7BB

Dark
Light

#1967BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7c7d3;
  --color-2: #72a7bb;
  --color-3: #1967bb;
  --color-4: #a8cdbc;
  --color-5: #caddc8;
}

SCSS

$color-1: #b7c7d3;
$color-2: #72a7bb;
$color-3: #1967bb;
$color-4: #a8cdbc;
$color-5: #caddc8;

TAILWIND

colors: {
  'brand-1': '#b7c7d3',
  'brand-2': '#72a7bb',
  'brand-3': '#1967bb',
  'brand-4': '#a8cdbc',
  'brand-5': '#caddc8',
}

RGB Array

[183, 199, 211], [114, 167, 187], [25, 103, 187], [168, 205, 188], [202, 221, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7C7D3, #72A7BB, #1967BB, #A8CDBC, #CADDC8 is ideal for: health products, baby brands, fresh-style blogs, 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: #b7c7d3; --color-2: #72a7bb; --color-3: #1967bb; --color-4: #a8cdbc; --color-5: #caddc8. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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