#CBF0E8 + #89DAD6 + #74C9CC + #AFDDDD + #74B5BD · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CBF0E8

Jade · Lavender · Glacier Blue

HEX

#CBF0E8

RGB

rgb(203, 240, 232)

HSL

hsl(167, 55%, 87%)

HSB

hsb(167, 15%, 94%)

CMYK

cmyk(15%, 0%, 3%, 6%)

Oklch

oklch(92.7% 0.040 180.9)

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

#89DAD6

Jade · SkyBlue · Lake Green

HEX

#89DAD6

RGB

rgb(137, 218, 214)

HSL

hsl(177, 52%, 70%)

HSB

hsb(177, 37%, 85%)

CMYK

cmyk(37%, 0%, 2%, 15%)

Oklch

oklch(83.5% 0.080 191.7)

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

#74C9CC

Sky Blue · SkyBlue · Lake Green

HEX

#74C9CC

RGB

rgb(116, 201, 204)

HSL

hsl(182, 46%, 63%)

HSB

hsb(182, 43%, 80%)

CMYK

cmyk(43%, 1%, 0%, 20%)

Oklch

oklch(78.3% 0.083 198.5)

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

#AFDDDD

Sky Blue · LightBlue · Glacier Blue

HEX

#AFDDDD

RGB

rgb(175, 221, 221)

HSL

hsl(180, 40%, 78%)

HSB

hsb(180, 21%, 87%)

CMYK

cmyk(21%, 0%, 0%, 13%)

Oklch

oklch(86.5% 0.048 196.3)

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

#74B5BD

Slate Blue · MediumAquaMarine · Lake Green

HEX

#74B5BD

RGB

rgb(116, 181, 189)

HSL

hsl(187, 36%, 60%)

HSB

hsb(187, 39%, 74%)

CMYK

cmyk(39%, 4%, 0%, 26%)

Oklch

oklch(73.2% 0.067 205.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBF0E8

F0CCD4

Analogous

CCF0D6

CBF0E8

CCE6F0

Triadic

CBF0E8

E8CCF0

F0E8CC

Split-Comp.

CBF0E8

F0CCE6

F0D6CC

Tetradic

CBF0E8

D6CCF0

F0CCD4

E6F0CC

Contrast Matrix WCAG 2.1 Contrast

CBF0E8	89DAD6	74C9CC	AFDDDD	74B5BD
—	1.3 Fail	1.6 Fail	1.2 Fail	1.9 Fail
1.3 Fail	—	1.2 Fail	1.1 Fail	1.4 Fail
1.6 Fail	1.2 Fail	—	1.3 Fail	1.2 Fail
1.2 Fail	1.1 Fail	1.3 Fail	—	1.6 Fail
1.9 Fail	1.4 Fail	1.2 Fail	1.6 Fail	—

White BG

1.2Fail

1.6Fail

1.9Fail

1.5Fail

2.3Fail

Black BG

17.2AAA

13.1AAA

11.0AAA

14.2AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBEA

ACADD7

999ACB

C3C3DD

9091BB

Deuteranopia

D9D6EA

A7A1D7

948ECB

C0BDDD

8C88BB

Tritanopia

CDEBEC

8DD8D8

78CBCB

B1DDDD

77BAB9

Achromatopsia

E4E4E4

C1C1C1

B0B0B0

CFCFCF

A2A2A2

Shades & Tints Shades & Tints

#CBF0E8

Dark

Light

#89DAD6

Dark

Light

#74C9CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbf0e8;
  --color-2: #89dad6;
  --color-3: #74c9cc;
  --color-4: #afdddd;
  --color-5: #74b5bd;
}

SCSS

$color-1: #cbf0e8;
$color-2: #89dad6;
$color-3: #74c9cc;
$color-4: #afdddd;
$color-5: #74b5bd;

TAILWIND

colors: {
  'brand-1': '#cbf0e8',
  'brand-2': '#89dad6',
  'brand-3': '#74c9cc',
  'brand-4': '#afdddd',
  'brand-5': '#74b5bd',
}

RGB Array

[203, 240, 232], [137, 218, 214], [116, 201, 204], [175, 221, 221], [116, 181, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CBF0E8, #89DAD6, #74C9CC, #AFDDDD, #74B5BD 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: #cbf0e8; --color-2: #89dad6; --color-3: #74c9cc; --color-4: #afdddd; --color-5: #74b5bd. 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