#89868C + #7FBDB4 + #D0DFCB + #FEE4CD + #F9A87A · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#89868C

Ash · Gray · Warm Gray

HEX

#89868C

RGB

rgb(137, 134, 140)

HSL

hsl(270, 3%, 54%)

HSB

hsb(270, 4%, 55%)

CMYK

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

Oklch

oklch(62.5% 0.010 308.3)

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

#7FBDB4

Jade · MediumAquaMarine · Lake Green

HEX

#7FBDB4

RGB

rgb(127, 189, 180)

HSL

hsl(171, 32%, 62%)

HSB

hsb(171, 33%, 74%)

CMYK

cmyk(33%, 0%, 5%, 26%)

Oklch

oklch(75.4% 0.065 184.5)

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

#D0DFCB

Celadon · LightGray · Mint Green

HEX

#D0DFCB

RGB

rgb(208, 223, 203)

HSL

hsl(105, 24%, 84%)

HSB

hsb(105, 9%, 87%)

CMYK

cmyk(7%, 0%, 9%, 13%)

Oklch

oklch(88.7% 0.031 137.8)

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

#FEE4CD

Apricot · Bisque · Peach Orange

HEX

#FEE4CD

RGB

rgb(254, 228, 205)

HSL

hsl(28, 96%, 90%)

HSB

hsb(28, 19%, 100%)

CMYK

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

Oklch

oklch(93.4% 0.042 63.8)

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

#F9A87A

Apricot · LightSalmon · Warm Sun

HEX

#F9A87A

RGB

rgb(249, 168, 122)

HSL

hsl(22, 91%, 73%)

HSB

hsb(22, 51%, 98%)

CMYK

cmyk(0%, 33%, 51%, 2%)

Oklch

oklch(80.1% 0.114 50.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89868C

8A8D86

Analogous

86868D

89868C

8D868D

Triadic

89868C

8D8A86

868D8A

Split-Comp.

89868C

8D8D86

868D86

Tetradic

89868C

8D8686

8A8D86

868D8D

Contrast Matrix WCAG 2.1 Contrast

89868C	7FBDB4	D0DFCB	FEE4CD	F9A87A
—	1.7 Fail	2.6 Fail	2.9 Fail	1.9 Fail
1.7 Fail	—	1.5 Fail	1.7 Fail	1.1 Fail
2.6 Fail	1.5 Fail	—	1.1 Fail	1.4 Fail
2.9 Fail	1.7 Fail	1.1 Fail	—	1.6 Fail
1.9 Fail	1.1 Fail	1.4 Fail	1.6 Fail	—

White BG

3.6AA Large

2.1Fail

1.4Fail

1.2Fail

1.9Fail

Black BG

5.9AA

9.8AAA

15.1AAA

17.2AAA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

88888B

9A9AB6

D6D7D0

F3F3D3

D6D585

Deuteranopia

88888A

9692B7

D6D5D1

F4F6D4

DBE188

Tritanopia

898989

82B8B8

D1D4D5

FDD7D8

F58E90

Achromatopsia

888888

A9A9A9

D8D8D8

E9E9E9

BBBBBB

Shades & Tints Shades & Tints

#89868C

Dark

Light

#7FBDB4

Dark

Light

#D0DFCB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89868c;
  --color-2: #7fbdb4;
  --color-3: #d0dfcb;
  --color-4: #fee4cd;
  --color-5: #f9a87a;
}

SCSS

$color-1: #89868c;
$color-2: #7fbdb4;
$color-3: #d0dfcb;
$color-4: #fee4cd;
$color-5: #f9a87a;

TAILWIND

colors: {
  'brand-1': '#89868c',
  'brand-2': '#7fbdb4',
  'brand-3': '#d0dfcb',
  'brand-4': '#fee4cd',
  'brand-5': '#f9a87a',
}

RGB Array

[137, 134, 140], [127, 189, 180], [208, 223, 203], [254, 228, 205], [249, 168, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #89868C, #7FBDB4, #D0DFCB, #FEE4CD, #F9A87A 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: #89868c; --color-2: #7fbdb4; --color-3: #d0dfcb; --color-4: #fee4cd; --color-5: #f9a87a. 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