← Back to Editor

#BDF4FB · #76BABB · #3D1D24 · #73BCC3 · #9FDDEA

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

#BDF4FB

Sky Blue · LightBlue · Glacier Blue

HEX
#BDF4FB
RGB
rgb(189, 244, 251)
HSL
hsl(187, 89%, 86%)
HSB
hsb(187, 25%, 98%)
CMYK
cmyk(25%, 3%, 0%, 2%)
Oklch
oklch(93.2% 0.056 205.9)

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

#76BABB

Slate Blue · MediumAquaMarine · Lake Green

HEX
#76BABB
RGB
rgb(118, 186, 187)
HSL
hsl(181, 34%, 60%)
HSB
hsb(181, 37%, 73%)
CMYK
cmyk(37%, 1%, 0%, 27%)
Oklch
oklch(74.4% 0.069 197.0)

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

#3D1D24

Crimson · DarkSlateGray · Deep Berry

HEX
#3D1D24
RGB
rgb(61, 29, 36)
HSL
hsl(347, 36%, 18%)
HSB
hsb(347, 52%, 24%)
CMYK
cmyk(0%, 52%, 41%, 76%)
Oklch
oklch(27.8% 0.051 6.9)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#73BCC3

Sky Blue · MediumAquaMarine · Lake Green

HEX
#73BCC3
RGB
rgb(115, 188, 195)
HSL
hsl(185, 40%, 61%)
HSB
hsb(185, 41%, 76%)
CMYK
cmyk(41%, 4%, 0%, 24%)
Oklch
oklch(75.0% 0.074 203.5)

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

#9FDDEA

Sky Blue · LightBlue · Glacier Blue

HEX
#9FDDEA
RGB
rgb(159, 221, 234)
HSL
hsl(190, 64%, 77%)
HSB
hsb(190, 32%, 92%)
CMYK
cmyk(32%, 6%, 0%, 8%)
Oklch
oklch(86.0% 0.065 212.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDF4FB
FBC3BC

Analogous

BCFBE3
BDF4FB
BCD4FB

Triadic

BDF4FB
FBBCF4
F4FBBC

Split-Comp.

BDF4FB
FBBCD4
FBE3BC

Tetradic

BDF4FB
E3BCFB
FBC3BC
D4FBBC

Contrast Matrix WCAG 2.1 Contrast

BDF4FB
76BABB
3D1D24
73BCC3
9FDDEA
—
1.8
Fail
12.5
AAA
1.8
Fail
1.2
Fail
1.8
Fail
—
6.8
AA
1.0
Fail
1.5
Fail
12.5
AAA
6.8
AA
—
6.9
AA
10.0
AAA
1.8
Fail
1.0
Fail
6.9
AA
—
1.4
Fail
1.2
Fail
1.5
Fail
10.0
AAA
1.4
Fail
—
White BG
1.2Fail
2.2Fail
15.0AAA
2.2Fail
1.5Fail
Black BG
17.5AAA
9.5AAA
1.4Fail
9.7AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5F9
9394BB
2F2F22
9393C1
BABAE7

Deuteranopia

D2CEF9
908ABB
313322
8E89C1
B6B2E6

Tritanopia

C0F8F8
79BBBB
3B2121
77C0C0
A2E4E4

Achromatopsia

E4E4E4
A6A6A6
272727
A7A7A7
CCCCCC

Shades & Tints Shades & Tints

#BDF4FB

Dark
Light

#76BABB

Dark
Light

#3D1D24

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdf4fb;
  --color-2: #76babb;
  --color-3: #3d1d24;
  --color-4: #73bcc3;
  --color-5: #9fddea;
}

SCSS

$color-1: #bdf4fb;
$color-2: #76babb;
$color-3: #3d1d24;
$color-4: #73bcc3;
$color-5: #9fddea;

TAILWIND

colors: {
  'brand-1': '#bdf4fb',
  'brand-2': '#76babb',
  'brand-3': '#3d1d24',
  'brand-4': '#73bcc3',
  'brand-5': '#9fddea',
}

RGB Array

[189, 244, 251], [118, 186, 187], [61, 29, 36], [115, 188, 195], [159, 221, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BDF4FB, #76BABB, #3D1D24, #73BCC3, #9FDDEA 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: #bdf4fb; --color-2: #76babb; --color-3: #3d1d24; --color-4: #73bcc3; --color-5: #9fddea. 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