#CDE5E5 + #FFF6DF + #EFEEDB + #DDE6D7 + #8AC8C3 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDE5E5

Sky Blue · LightGray · Glacier Blue

HEX

#CDE5E5

RGB

rgb(205, 229, 229)

HSL

hsl(180, 32%, 85%)

HSB

hsb(180, 10%, 90%)

CMYK

cmyk(10%, 0%, 0%, 10%)

Oklch

oklch(90.4% 0.025 196.7)

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

#FFF6DF

Goose Yellow · LightYellow · Lemon Cream

HEX

#FFF6DF

RGB

rgb(255, 246, 223)

HSL

hsl(43, 100%, 94%)

HSB

hsb(43, 13%, 100%)

CMYK

cmyk(0%, 4%, 13%, 0%)

Oklch

oklch(97.4% 0.032 89.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#EFEEDB

Fresh Green · Beige · Lemon Cream

HEX

#EFEEDB

RGB

rgb(239, 238, 219)

HSL

hsl(57, 38%, 90%)

HSB

hsb(57, 8%, 94%)

CMYK

cmyk(0%, 0%, 8%, 6%)

Oklch

oklch(94.5% 0.025 104.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#DDE6D7

Celadon · LightGray · Mint Green

HEX

#DDE6D7

RGB

rgb(221, 230, 215)

HSL

hsl(96, 23%, 87%)

HSB

hsb(96, 7%, 90%)

CMYK

cmyk(4%, 0%, 7%, 10%)

Oklch

oklch(91.4% 0.022 132.5)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#8AC8C3

Jade · SkyBlue · Lake Green

HEX

#8AC8C3

RGB

rgb(138, 200, 195)

HSL

hsl(175, 36%, 66%)

HSB

hsb(175, 31%, 78%)

CMYK

cmyk(31%, 0%, 3%, 22%)

Oklch

oklch(78.9% 0.064 189.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDE5E5

E5CDCD

Analogous

CDE5D9

CDE5E5

CDD9E5

Triadic

CDE5E5

E5CDE5

E5E5CD

Split-Comp.

CDE5E5

E5CDD9

E5D9CD

Tetradic

CDE5E5

D9CDE5

E5CDCD

D9E5CD

Contrast Matrix WCAG 2.1 Contrast

CDE5E5	FFF6DF	EFEEDB	DDE6D7	8AC8C3
—	1.2 Fail	1.1 Fail	1.0 Fail	1.4 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.8 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.6 Fail
1.0 Fail	1.2 Fail	1.1 Fail	—	1.5 Fail
1.4 Fail	1.8 Fail	1.6 Fail	1.5 Fail	—

White BG

1.3Fail

1.1Fail

1.2Fail

1.3Fail

1.9Fail

Black BG

15.9AAA

19.5AAA

17.9AAA

16.4AAA

11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D8E5

FBFBE5

EFEFE0

E1E1DB

A5A5C4

Deuteranopia

D6D4E5

FCFCE6

EFEFE1

E0E0DC

A19DC5

Tritanopia

CEE5E5

FFE9EA

EFE3E4

DDDDDE

8DC5C5

Achromatopsia

DEDEDE

F6F6F6

ECECEC

E2E2E2

B5B5B5

Shades & Tints Shades & Tints

#CDE5E5

Dark

Light

#FFF6DF

Dark

Light

#EFEEDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cde5e5;
  --color-2: #fff6df;
  --color-3: #efeedb;
  --color-4: #dde6d7;
  --color-5: #8ac8c3;
}

SCSS

$color-1: #cde5e5;
$color-2: #fff6df;
$color-3: #efeedb;
$color-4: #dde6d7;
$color-5: #8ac8c3;

TAILWIND

colors: {
  'brand-1': '#cde5e5',
  'brand-2': '#fff6df',
  'brand-3': '#efeedb',
  'brand-4': '#dde6d7',
  'brand-5': '#8ac8c3',
}

RGB Array

[205, 229, 229], [255, 246, 223], [239, 238, 219], [221, 230, 215], [138, 200, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #CDE5E5, #FFF6DF, #EFEEDB, #DDE6D7, #8AC8C3 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: #cde5e5; --color-2: #fff6df; --color-3: #efeedb; --color-4: #dde6d7; --color-5: #8ac8c3. 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