#8DD9D9 + #A8EAE3 + #D5F6E8 + #F2F9F8 + #F0F5F5 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8DD9D9

Sky Blue · SkyBlue · Lake Green

HEX

#8DD9D9

RGB

rgb(141, 217, 217)

HSL

hsl(180, 50%, 70%)

HSB

hsb(180, 35%, 85%)

CMYK

cmyk(35%, 0%, 0%, 15%)

Oklch

oklch(83.6% 0.075 195.8)

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

#A8EAE3

Jade · LightBlue · Glacier Blue

HEX

#A8EAE3

RGB

rgb(168, 234, 227)

HSL

hsl(174, 61%, 79%)

HSB

hsb(174, 28%, 92%)

CMYK

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

Oklch

oklch(89.1% 0.067 187.8)

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

#D5F6E8

Jade · Lavender · Mint Green

HEX

#D5F6E8

RGB

rgb(213, 246, 232)

HSL

hsl(155, 65%, 90%)

HSB

hsb(155, 13%, 96%)

CMYK

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

Oklch

oklch(94.6% 0.039 168.0)

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

#F2F9F8

Jade · Snow · Glacier Blue

HEX

#F2F9F8

RGB

rgb(242, 249, 248)

HSL

hsl(171, 37%, 96%)

HSB

hsb(171, 3%, 98%)

CMYK

cmyk(3%, 0%, 0%, 2%)

Oklch

oklch(97.7% 0.008 186.9)

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

#F0F5F5

Sky Blue · SeaShell · Glacier Blue

HEX

#F0F5F5

RGB

rgb(240, 245, 245)

HSL

hsl(180, 20%, 95%)

HSB

hsb(180, 2%, 96%)

CMYK

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

Oklch

oklch(96.6% 0.005 197.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DD9D9

D98C8C

Analogous

8CD9B3

8DD9D9

8CB3D9

Triadic

8DD9D9

D98CD9

D9D98C

Split-Comp.

8DD9D9

D98CB3

D9B38C

Tetradic

8DD9D9

B38CD9

D98C8C

B3D98C

Contrast Matrix WCAG 2.1 Contrast

8DD9D9	A8EAE3	D5F6E8	F2F9F8	F0F5F5
—	1.2 Fail	1.4 Fail	1.5 Fail	1.5 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.5 Fail	1.2 Fail	1.0 Fail	1.0 Fail	—

White BG

1.6Fail

1.4Fail

1.2Fail

1.1Fail

Black BG

13.1AAA

15.5AAA

18.2AAA

19.7AAA

19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAFD9

C5C5E5

E3E4EB

F5F5F8

F2F2F5

Deuteranopia

AAA4D9

C1BCE5

E1DFEC

F5F4F8

F2F2F5

Tritanopia

91D9D9

ABE6E6

D7EEEF

F2F8F8

F0F5F5

Achromatopsia

C2C2C2

D5D5D5

EBEBEB

F7F7F7

F4F4F4

Shades & Tints Shades & Tints

#8DD9D9

Dark

Light

#A8EAE3

Dark

Light

#D5F6E8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8dd9d9;
  --color-2: #a8eae3;
  --color-3: #d5f6e8;
  --color-4: #f2f9f8;
  --color-5: #f0f5f5;
}

SCSS

$color-1: #8dd9d9;
$color-2: #a8eae3;
$color-3: #d5f6e8;
$color-4: #f2f9f8;
$color-5: #f0f5f5;

TAILWIND

colors: {
  'brand-1': '#8dd9d9',
  'brand-2': '#a8eae3',
  'brand-3': '#d5f6e8',
  'brand-4': '#f2f9f8',
  'brand-5': '#f0f5f5',
}

RGB Array

[141, 217, 217], [168, 234, 227], [213, 246, 232], [242, 249, 248], [240, 245, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #8DD9D9, #A8EAE3, #D5F6E8, #F2F9F8, #F0F5F5 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: #8dd9d9; --color-2: #a8eae3; --color-3: #d5f6e8; --color-4: #f2f9f8; --color-5: #f0f5f5. 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