← Back to Editor

#B9D3DF · #9CDED5 · #77EDD3 · #53FCD2 · #33383B

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

#B9D3DF

Sky Blue · LightBlue · Glacier Blue

HEX
#B9D3DF
RGB
rgb(185, 211, 223)
HSL
hsl(199, 37%, 80%)
HSB
hsb(199, 17%, 87%)
CMYK
cmyk(17%, 5%, 0%, 13%)
Oklch
oklch(85.1% 0.033 227.3)

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

#9CDED5

Jade · LightBlue · Lake Green

HEX
#9CDED5
RGB
rgb(156, 222, 213)
HSL
hsl(172, 50%, 74%)
HSB
hsb(172, 30%, 87%)
CMYK
cmyk(30%, 0%, 4%, 13%)
Oklch
oklch(85.4% 0.068 185.4)

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

#77EDD3

Jade · SkyBlue · Lake Green

HEX
#77EDD3
RGB
rgb(119, 237, 211)
HSL
hsl(167, 77%, 70%)
HSB
hsb(167, 50%, 93%)
CMYK
cmyk(50%, 0%, 11%, 7%)
Oklch
oklch(87.0% 0.114 177.2)

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

#53FCD2

Jade · Turquoise · Lake Green

HEX
#53FCD2
RGB
rgb(83, 252, 210)
HSL
hsl(165, 97%, 66%)
HSB
hsb(165, 67%, 99%)
CMYK
cmyk(67%, 0%, 17%, 1%)
Oklch
oklch(89.4% 0.150 172.7)

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

#33383B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#33383B
RGB
rgb(51, 56, 59)
HSL
hsl(203, 7%, 22%)
HSB
hsb(203, 14%, 23%)
CMYK
cmyk(14%, 5%, 0%, 77%)
Oklch
oklch(33.7% 0.009 233.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9D3DF
DFC5B9

Analogous

B9DFD8
B9D3DF
B9C0DF

Triadic

B9D3DF
DFB9D3
D3DFB9

Split-Comp.

B9D3DF
DFB9C0
DFD8B9

Tetradic

B9D3DF
D8B9DF
DFC5B9
C0DFB9

Contrast Matrix WCAG 2.1 Contrast

B9D3DF
9CDED5
77EDD3
53FCD2
33383B
—
1.0
Fail
1.1
Fail
1.2
Fail
7.6
AAA
1.0
Fail
—
1.1
Fail
1.2
Fail
7.8
AAA
1.1
Fail
1.1
Fail
—
1.1
Fail
8.4
AAA
1.2
Fail
1.2
Fail
1.1
Fail
—
9.2
AAA
7.6
AAA
7.8
AAA
8.4
AAA
9.2
AAA
—
White BG
1.6Fail
1.5Fail
1.4Fail
1.3Fail
11.9AAA
Black BG
13.4AAA
13.8AAA
14.8AAA
16.2AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4DC
B9B9D7
AAABD9
9C9EDC
35353A

Deuteranopia

C3C1DB
B5B0D8
A39ADB
9286DF
35353A

Tritanopia

BADAD9
9FD9D9
7DDEDF
5BE4E6
333A3A

Achromatopsia

CDCDCD
C9C9C9
C7C7C7
C5C5C5
373737

Shades & Tints Shades & Tints

#B9D3DF

Dark
Light

#9CDED5

Dark
Light

#77EDD3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9d3df;
  --color-2: #9cded5;
  --color-3: #77edd3;
  --color-4: #53fcd2;
  --color-5: #33383b;
}

SCSS

$color-1: #b9d3df;
$color-2: #9cded5;
$color-3: #77edd3;
$color-4: #53fcd2;
$color-5: #33383b;

TAILWIND

colors: {
  'brand-1': '#b9d3df',
  'brand-2': '#9cded5',
  'brand-3': '#77edd3',
  'brand-4': '#53fcd2',
  'brand-5': '#33383b',
}

RGB Array

[185, 211, 223], [156, 222, 213], [119, 237, 211], [83, 252, 210], [51, 56, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9D3DF, #9CDED5, #77EDD3, #53FCD2, #33383B 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: #b9d3df; --color-2: #9cded5; --color-3: #77edd3; --color-4: #53fcd2; --color-5: #33383b. 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