#8FA899 + #8BC7B2 + #B0D1B6 + #DBD2B0 + #FFCEB2 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8FA899

Celadon · DarkSeaGreen · Apple Green

HEX

#8FA899

RGB

rgb(143, 168, 153)

HSL

hsl(144, 13%, 61%)

HSB

hsb(144, 15%, 66%)

CMYK

cmyk(15%, 0%, 9%, 34%)

Oklch

oklch(70.8% 0.035 159.0)

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

#8BC7B2

Jade · DarkSeaGreen · Apple Green

HEX

#8BC7B2

RGB

rgb(139, 199, 178)

HSL

hsl(159, 35%, 66%)

HSB

hsb(159, 30%, 78%)

CMYK

cmyk(30%, 0%, 11%, 22%)

Oklch

oklch(78.3% 0.069 170.7)

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

#B0D1B6

Celadon · Silver · Apple Green

HEX

#B0D1B6

RGB

rgb(176, 209, 182)

HSL

hsl(131, 26%, 75%)

HSB

hsb(131, 16%, 82%)

CMYK

cmyk(16%, 0%, 13%, 18%)

Oklch

oklch(82.9% 0.051 150.4)

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

#DBD2B0

Goose Yellow · Wheat · Lemon Cream

HEX

#DBD2B0

RGB

rgb(219, 210, 176)

HSL

hsl(47, 37%, 77%)

HSB

hsb(47, 20%, 86%)

CMYK

cmyk(0%, 4%, 20%, 14%)

Oklch

oklch(86.2% 0.046 94.9)

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

#FFCEB2

Apricot · Wheat · Peach Orange

HEX

#FFCEB2

RGB

rgb(255, 206, 178)

HSL

hsl(22, 100%, 85%)

HSB

hsb(22, 30%, 100%)

CMYK

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

Oklch

oklch(88.7% 0.067 51.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FA899

A88F9E

Analogous

91A88F

8FA899

8FA8A6

Triadic

8FA899

998FA8

A8998F

Split-Comp.

8FA899

A68FA8

A88F91

Tetradic

8FA899

8F91A8

A88F9E

A8A68F

Contrast Matrix WCAG 2.1 Contrast

8FA899	8BC7B2	B0D1B6	DBD2B0	FFCEB2
—	1.3 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.8 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.6Fail

1.9Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

8.2AAA

10.9AAA

12.6AAA

13.9AAA

14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A9D

A5A6B7

BEBFBD

D7D7B8

EAE9B9

Deuteranopia

98979E

A29DB8

BCBABE

D8D8BA

EDF0BA

Tritanopia

909FA0

8EBBBC

B2C2C3

DBBFC0

FDBEBF

Achromatopsia

9F9F9F

B3B3B3

C4C4C4

D1D1D1

D9D9D9

Shades & Tints Shades & Tints

#8FA899

Dark

Light

#8BC7B2

Dark

Light

#B0D1B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fa899;
  --color-2: #8bc7b2;
  --color-3: #b0d1b6;
  --color-4: #dbd2b0;
  --color-5: #ffceb2;
}

SCSS

$color-1: #8fa899;
$color-2: #8bc7b2;
$color-3: #b0d1b6;
$color-4: #dbd2b0;
$color-5: #ffceb2;

TAILWIND

colors: {
  'brand-1': '#8fa899',
  'brand-2': '#8bc7b2',
  'brand-3': '#b0d1b6',
  'brand-4': '#dbd2b0',
  'brand-5': '#ffceb2',
}

RGB Array

[143, 168, 153], [139, 199, 178], [176, 209, 182], [219, 210, 176], [255, 206, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #8FA899, #8BC7B2, #B0D1B6, #DBD2B0, #FFCEB2 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: #8fa899; --color-2: #8bc7b2; --color-3: #b0d1b6; --color-4: #dbd2b0; --color-5: #ffceb2. 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