#FA7178 + #EF8A78 + #FCF1C3 + #8BB3B3 + #988889 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FA7178

Peach Pink · Salmon · Coral Red

HEX

#FA7178

RGB

rgb(250, 113, 120)

HSL

hsl(357, 93%, 71%)

HSB

hsb(357, 55%, 98%)

CMYK

cmyk(0%, 55%, 52%, 2%)

Oklch

oklch(71.5% 0.168 19.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EF8A78

Peach Pink · LightCoral · Coral Red

HEX

#EF8A78

RGB

rgb(239, 138, 120)

HSL

hsl(9, 79%, 70%)

HSB

hsb(9, 50%, 94%)

CMYK

cmyk(0%, 42%, 50%, 6%)

Oklch

oklch(73.7% 0.127 31.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FCF1C3

Goose Yellow · Bisque · Lemon Cream

HEX

#FCF1C3

RGB

rgb(252, 241, 195)

HSL

hsl(48, 90%, 88%)

HSB

hsb(48, 23%, 99%)

CMYK

cmyk(0%, 4%, 23%, 1%)

Oklch

oklch(95.5% 0.061 96.1)

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

#8BB3B3

Sky Blue · DarkGray · Lake Green

HEX

#8BB3B3

RGB

rgb(139, 179, 179)

HSL

hsl(180, 21%, 62%)

HSB

hsb(180, 22%, 70%)

CMYK

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

Oklch

oklch(73.8% 0.043 196.3)

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

#988889

Ash · Gray · Silver Sand

HEX

#988889

RGB

rgb(152, 136, 137)

HSL

hsl(356, 7%, 56%)

HSB

hsb(356, 11%, 60%)

CMYK

cmyk(0%, 11%, 10%, 40%)

Oklch

oklch(64.1% 0.019 13.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA7178

70FAF3

Analogous

FA70BC

FA7178

FAAE70

Triadic

FA7178

77FA70

7077FA

Split-Comp.

FA7178

70FAAE

70BCFA

Tetradic

FA7178

BCFA70

70FAF3

AE70FA

Contrast Matrix WCAG 2.1 Contrast

FA7178	EF8A78	FCF1C3	8BB3B3	988889
—	1.1 Fail	2.4 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	2.2 Fail	1.1 Fail	1.4 Fail
2.4 Fail	2.2 Fail	—	2.0 Fail	3.0 Fail
1.2 Fail	1.1 Fail	2.0 Fail	—	1.5 Fail
1.2 Fail	1.4 Fail	3.0 Fail	1.5 Fail	—

White BG

2.7Fail

2.4Fail

1.1Fail

2.3Fail

3.4AA Large

Black BG

7.7AAA

8.6AAA

18.5AAA

9.2AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBD76

C3C27C

F7F7CE

9C9DB3

919189

Deuteranopia

C7D176

C9D17D

F8F9D1

9A97B3

929389

Tritanopia

F37575

EA8081

FBD7D9

8DB3B3

978989

Achromatopsia

9B9B9B

A6A6A6

EFEFEF

A7A7A7

8D8D8D

Shades & Tints Shades & Tints

#FA7178

Dark

Light

#EF8A78

Dark

Light

#FCF1C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa7178;
  --color-2: #ef8a78;
  --color-3: #fcf1c3;
  --color-4: #8bb3b3;
  --color-5: #988889;
}

SCSS

$color-1: #fa7178;
$color-2: #ef8a78;
$color-3: #fcf1c3;
$color-4: #8bb3b3;
$color-5: #988889;

TAILWIND

colors: {
  'brand-1': '#fa7178',
  'brand-2': '#ef8a78',
  'brand-3': '#fcf1c3',
  'brand-4': '#8bb3b3',
  'brand-5': '#988889',
}

RGB Array

[250, 113, 120], [239, 138, 120], [252, 241, 195], [139, 179, 179], [152, 136, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #FA7178, #EF8A78, #FCF1C3, #8BB3B3, #988889 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: #fa7178; --color-2: #ef8a78; --color-3: #fcf1c3; --color-4: #8bb3b3; --color-5: #988889. 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