#BDDCF9 + #96B3D3 + #86A4C8 + #7496BC + #6484AA · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BDDCF9

Sky Blue · LightBlue · Sky Blue

HEX

#BDDCF9

RGB

rgb(189, 220, 249)

HSL

hsl(209, 83%, 86%)

HSB

hsb(209, 24%, 98%)

CMYK

cmyk(24%, 12%, 0%, 2%)

Oklch

oklch(88.1% 0.052 246.6)

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

#96B3D3

Azure · LightSteelBlue · Cobalt Blue

HEX

#96B3D3

RGB

rgb(150, 179, 211)

HSL

hsl(211, 41%, 71%)

HSB

hsb(211, 29%, 83%)

CMYK

cmyk(29%, 15%, 0%, 17%)

Oklch

oklch(75.6% 0.056 251.1)

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

#86A4C8

Azure · DarkGray · Cobalt Blue

HEX

#86A4C8

RGB

rgb(134, 164, 200)

HSL

hsl(213, 37%, 65%)

HSB

hsb(213, 33%, 78%)

CMYK

cmyk(33%, 18%, 0%, 22%)

Oklch

oklch(70.9% 0.063 253.3)

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

#7496BC

Azure · CadetBlue · Navy Blue

HEX

#7496BC

RGB

rgb(116, 150, 188)

HSL

hsl(212, 35%, 60%)

HSB

hsb(212, 38%, 74%)

CMYK

cmyk(38%, 20%, 0%, 26%)

Oklch

oklch(66.2% 0.068 251.6)

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

#6484AA

Azure · LightSlateGray · Navy Blue

HEX

#6484AA

RGB

rgb(100, 132, 170)

HSL

hsl(213, 29%, 53%)

HSB

hsb(213, 41%, 67%)

CMYK

cmyk(41%, 22%, 0%, 33%)

Oklch

oklch(60.4% 0.069 253.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDDCF9

F9DABE

Analogous

BEF9F8

BDDCF9

BEBFF9

Triadic

BDDCF9

F9BEDC

DCF9BE

Split-Comp.

BDDCF9

F9BEBF

F9F8BE

Tetradic

BDDCF9

F8BEF9

F9DABE

BFF9BE

Contrast Matrix WCAG 2.1 Contrast

BDDCF9	96B3D3	86A4C8	7496BC	6484AA
—	1.5 Fail	1.8 Fail	2.2 Fail	2.7 Fail
1.5 Fail	—	1.2 Fail	1.4 Fail	1.8 Fail
1.8 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
2.2 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
2.7 Fail	1.8 Fail	1.5 Fail	1.3 Fail	—

White BG

1.4Fail

2.2Fail

2.6Fail

3.1AA Large

3.9AA Large

Black BG

14.8AAA

9.7AAA

8.2AAA

6.8AA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACBF2

A3A3CB

9393BF

8383B3

7272A1

Deuteranopia

C9C6F0

A19FC9

918FBD

817EB1

706E9F

Tritanopia

BFECEB

97C5C4

88B8B7

76ACAA

669A98

Achromatopsia

D6D6D6

AEAEAE

9F9F9F

909090

7F7F7F

Shades & Tints Shades & Tints

#BDDCF9

Dark

Light

#96B3D3

Dark

Light

#86A4C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bddcf9;
  --color-2: #96b3d3;
  --color-3: #86a4c8;
  --color-4: #7496bc;
  --color-5: #6484aa;
}

SCSS

$color-1: #bddcf9;
$color-2: #96b3d3;
$color-3: #86a4c8;
$color-4: #7496bc;
$color-5: #6484aa;

TAILWIND

colors: {
  'brand-1': '#bddcf9',
  'brand-2': '#96b3d3',
  'brand-3': '#86a4c8',
  'brand-4': '#7496bc',
  'brand-5': '#6484aa',
}

RGB Array

[189, 220, 249], [150, 179, 211], [134, 164, 200], [116, 150, 188], [100, 132, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #BDDCF9, #96B3D3, #86A4C8, #7496BC, #6484AA is ideal for: health products, baby brands, fresh-style blogs. 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: #bddcf9; --color-2: #96b3d3; --color-3: #86a4c8; --color-4: #7496bc; --color-5: #6484aa. 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. 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 sea-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