#A7EDBF + #8FDCC3 + #89BCC3 + #8799A0 + #86858C · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A7EDBF

Emerald · LightBlue · Apple Green

HEX

#A7EDBF

RGB

rgb(167, 237, 191)

HSL

hsl(141, 66%, 79%)

HSB

hsb(141, 30%, 93%)

CMYK

cmyk(30%, 0%, 19%, 7%)

Oklch

oklch(88.7% 0.095 155.2)

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

#8FDCC3

Jade · SkyBlue · Lake Green

HEX

#8FDCC3

RGB

rgb(143, 220, 195)

HSL

hsl(161, 52%, 71%)

HSB

hsb(161, 35%, 86%)

CMYK

cmyk(35%, 0%, 11%, 14%)

Oklch

oklch(83.7% 0.084 171.7)

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

#89BCC3

Sky Blue · SkyBlue · Lake Green

HEX

#89BCC3

RGB

rgb(137, 188, 195)

HSL

hsl(187, 33%, 65%)

HSB

hsb(187, 30%, 76%)

CMYK

cmyk(30%, 4%, 0%, 24%)

Oklch

oklch(76.2% 0.054 206.7)

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

#8799A0

Slate Blue · LightSlateGray · Lake Green

HEX

#8799A0

RGB

rgb(135, 153, 160)

HSL

hsl(197, 12%, 58%)

HSB

hsb(197, 16%, 63%)

CMYK

cmyk(16%, 4%, 0%, 37%)

Oklch

oklch(67.1% 0.023 223.2)

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

#86858C

Ash · Gray · Warm Gray

HEX

#86858C

RGB

rgb(134, 133, 140)

HSL

hsl(249, 3%, 54%)

HSB

hsb(249, 5%, 55%)

CMYK

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

Oklch

oklch(62.0% 0.010 292.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7EDBF

EDA6D4

Analogous

B1EDA6

A7EDBF

A6EDE2

Triadic

A7EDBF

BFA6ED

EDBFA6

Split-Comp.

A7EDBF

E2A6ED

EDA6B1

Tetradic

A7EDBF

A6B1ED

EDA6D4

EDE2A6

Contrast Matrix WCAG 2.1 Contrast

A7EDBF	8FDCC3	89BCC3	8799A0	86858C
—	1.2 Fail	1.5 Fail	2.2 Fail	2.7 Fail
1.2 Fail	—	1.3 Fail	1.9 Fail	2.3 Fail
1.5 Fail	1.3 Fail	—	1.4 Fail	1.7 Fail
2.2 Fail	1.9 Fail	1.4 Fail	—	1.2 Fail
2.7 Fail	2.3 Fail	1.7 Fail	1.2 Fail	—

White BG

1.4Fail

1.6Fail

2.1Fail

3.0Fail

3.7AA Large

Black BG

15.5AAA

13.2AAA

10.0AAA

7.1AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6CA

B0B1C9

9FA0C1

8F8F9E

86868A

Deuteranopia

C1BCCD

ACA6CB

9C98C1

8E8C9E

86868A

Tritanopia

ABD3D5

93CECF

8CC0C0

889D9D

868989

Achromatopsia

D3D3D3

C2C2C2

AEAEAE

949494

868686

Shades & Tints Shades & Tints

#A7EDBF

Dark

Light

#8FDCC3

Dark

Light

#89BCC3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7edbf;
  --color-2: #8fdcc3;
  --color-3: #89bcc3;
  --color-4: #8799a0;
  --color-5: #86858c;
}

SCSS

$color-1: #a7edbf;
$color-2: #8fdcc3;
$color-3: #89bcc3;
$color-4: #8799a0;
$color-5: #86858c;

TAILWIND

colors: {
  'brand-1': '#a7edbf',
  'brand-2': '#8fdcc3',
  'brand-3': '#89bcc3',
  'brand-4': '#8799a0',
  'brand-5': '#86858c',
}

RGB Array

[167, 237, 191], [143, 220, 195], [137, 188, 195], [135, 153, 160], [134, 133, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A7EDBF, #8FDCC3, #89BCC3, #8799A0, #86858C 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: #a7edbf; --color-2: #8fdcc3; --color-3: #89bcc3; --color-4: #8799a0; --color-5: #86858c. 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