#CED7D9 + #BDDCDE + #AAE2E6 + #D2BADE + #C7C8F0 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CED7D9

Sky Blue · LightGray · Glacier Blue

HEX

#CED7D9

RGB

rgb(206, 215, 217)

HSL

hsl(191, 13%, 83%)

HSB

hsb(191, 5%, 85%)

CMYK

cmyk(5%, 1%, 0%, 15%)

Oklch

oklch(87.3% 0.010 212.5)

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

#BDDCDE

Sky Blue · LightBlue · Glacier Blue

HEX

#BDDCDE

RGB

rgb(189, 220, 222)

HSL

hsl(184, 33%, 81%)

HSB

hsb(184, 15%, 87%)

CMYK

cmyk(15%, 1%, 0%, 13%)

Oklch

oklch(87.3% 0.033 201.3)

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

#AAE2E6

Sky Blue · LightBlue · Glacier Blue

HEX

#AAE2E6

RGB

rgb(170, 226, 230)

HSL

hsl(184, 55%, 78%)

HSB

hsb(184, 26%, 90%)

CMYK

cmyk(26%, 2%, 0%, 10%)

Oklch

oklch(87.6% 0.057 201.7)

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

#D2BADE

Lilac · LightGray · Lilac Purple

HEX

#D2BADE

RGB

rgb(210, 186, 222)

HSL

hsl(280, 35%, 80%)

HSB

hsb(280, 16%, 87%)

CMYK

cmyk(5%, 16%, 0%, 13%)

Oklch

oklch(82.1% 0.056 314.5)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#C7C8F0

Azure · LightSteelBlue · Sky Blue

HEX

#C7C8F0

RGB

rgb(199, 200, 240)

HSL

hsl(239, 58%, 86%)

HSB

hsb(239, 17%, 94%)

CMYK

cmyk(17%, 17%, 0%, 6%)

Oklch

oklch(84.5% 0.056 284.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CED7D9

D9D0CE

Analogous

CED9D6

CED7D9

CED2D9

Triadic

CED7D9

D9CED7

D7D9CE

Split-Comp.

CED7D9

D9CED2

D9D6CE

Tetradic

CED7D9

D6CED9

D9D0CE

D2D9CE

Contrast Matrix WCAG 2.1 Contrast

CED7D9	BDDCDE	AAE2E6	D2BADE	C7C8F0
—	1.0 Fail	1.0 Fail	1.2 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.2 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.2 Fail	1.1 Fail
1.2 Fail	1.2 Fail	1.2 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

1.5Fail

1.4Fail

1.8Fail

1.6Fail

Black BG

14.3AAA

14.5AAA

14.7AAA

11.8AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2D9

CACBDE

C2C3E5

C8C7D5

C7C7E6

Deuteranopia

D1D1D8

C9C6DD

BFBBE5

C9CBD3

C7C7E4

Tritanopia

CED8D8

BFDDDD

ADE4E4

D1CECD

C7DFDD

Achromatopsia

D5D5D5

D3D3D3

D2D2D2

C5C5C5

CCCCCC

Shades & Tints Shades & Tints

#CED7D9

Dark

Light

#BDDCDE

Dark

Light

#AAE2E6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ced7d9;
  --color-2: #bddcde;
  --color-3: #aae2e6;
  --color-4: #d2bade;
  --color-5: #c7c8f0;
}

SCSS

$color-1: #ced7d9;
$color-2: #bddcde;
$color-3: #aae2e6;
$color-4: #d2bade;
$color-5: #c7c8f0;

TAILWIND

colors: {
  'brand-1': '#ced7d9',
  'brand-2': '#bddcde',
  'brand-3': '#aae2e6',
  'brand-4': '#d2bade',
  'brand-5': '#c7c8f0',
}

RGB Array

[206, 215, 217], [189, 220, 222], [170, 226, 230], [210, 186, 222], [199, 200, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CED7D9, #BDDCDE, #AAE2E6, #D2BADE, #C7C8F0 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: #ced7d9; --color-2: #bddcde; --color-3: #aae2e6; --color-4: #d2bade; --color-5: #c7c8f0. 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