#8CDDD6 + #A3EBE5 + #EEFAF1 + #C4DE8C + #D2EBA6 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8CDDD6

Jade · SkyBlue · Lake Green

HEX

#8CDDD6

RGB

rgb(140, 221, 214)

HSL

hsl(175, 54%, 71%)

HSB

hsb(175, 37%, 87%)

CMYK

cmyk(37%, 0%, 3%, 13%)

Oklch

oklch(84.4% 0.080 188.8)

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

#A3EBE5

Jade · LightBlue · Glacier Blue

HEX

#A3EBE5

RGB

rgb(163, 235, 229)

HSL

hsl(175, 64%, 78%)

HSB

hsb(175, 31%, 92%)

CMYK

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

Oklch

oklch(89.1% 0.072 189.4)

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

#EEFAF1

Emerald · SeaShell · Mint Green

HEX

#EEFAF1

RGB

rgb(238, 250, 241)

HSL

hsl(135, 55%, 96%)

HSB

hsb(135, 5%, 98%)

CMYK

cmyk(5%, 0%, 4%, 2%)

Oklch

oklch(97.4% 0.017 153.6)

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

#C4DE8C

Willow Green · Tan · Apple Green

HEX

#C4DE8C

RGB

rgb(196, 222, 140)

HSL

hsl(79, 55%, 71%)

HSB

hsb(79, 37%, 87%)

CMYK

cmyk(12%, 0%, 37%, 13%)

Oklch

oklch(86.2% 0.110 123.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D2EBA6

Willow Green · Wheat · Apple Green

HEX

#D2EBA6

RGB

rgb(210, 235, 166)

HSL

hsl(82, 63%, 79%)

HSB

hsb(82, 29%, 92%)

CMYK

cmyk(11%, 0%, 29%, 8%)

Oklch

oklch(90.5% 0.094 124.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CDDD6

DD8D94

Analogous

8DDDAE

8CDDD6

8DBCDD

Triadic

8CDDD6

D68DDD

DDD68D

Split-Comp.

8CDDD6

DD8DBC

DDAE8D

Tetradic

8CDDD6

AE8DDD

DD8D94

BCDD8D

Contrast Matrix WCAG 2.1 Contrast

8CDDD6	A3EBE5	EEFAF1	C4DE8C	D2EBA6
—	1.2 Fail	1.5 Fail	1.1 Fail	1.2 Fail
1.2 Fail	—	1.3 Fail	1.1 Fail	1.0 Fail
1.5 Fail	1.3 Fail	—	1.4 Fail	1.2 Fail
1.1 Fail	1.1 Fail	1.4 Fail	—	1.1 Fail
1.2 Fail	1.0 Fail	1.2 Fail	1.1 Fail	—

White BG

1.6Fail

1.3Fail

1.1Fail

1.5Fail

1.3Fail

Black BG

13.4AAA

15.6AAA

19.6AAA

14.2AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0D8

C2C3E6

F3F3F3

CFCFA0

DDDDB7

Deuteranopia

AAA4D8

BEB9E7

F3F2F4

CECCA5

DBDABB

Tritanopia

90D9D9

A7E8E8

EFF5F5

C5B0B3

D3C4C7

Achromatopsia

C4C4C4

D5D5D5

F5F5F5

CDCDCD

DCDCDC

Shades & Tints Shades & Tints

#8CDDD6

Dark

Light

#A3EBE5

Dark

Light

#EEFAF1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8cddd6;
  --color-2: #a3ebe5;
  --color-3: #eefaf1;
  --color-4: #c4de8c;
  --color-5: #d2eba6;
}

SCSS

$color-1: #8cddd6;
$color-2: #a3ebe5;
$color-3: #eefaf1;
$color-4: #c4de8c;
$color-5: #d2eba6;

TAILWIND

colors: {
  'brand-1': '#8cddd6',
  'brand-2': '#a3ebe5',
  'brand-3': '#eefaf1',
  'brand-4': '#c4de8c',
  'brand-5': '#d2eba6',
}

RGB Array

[140, 221, 214], [163, 235, 229], [238, 250, 241], [196, 222, 140], [210, 235, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #8CDDD6, #A3EBE5, #EEFAF1, #C4DE8C, #D2EBA6 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: #8cddd6; --color-2: #a3ebe5; --color-3: #eefaf1; --color-4: #c4de8c; --color-5: #d2eba6. 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