#F5917D + #E3AD96 + #E8D9C3 + #B6D9B8 + #97BD99 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5917D

Peach Pink · DarkSalmon · Coral Red

HEX

#F5917D

RGB

rgb(245, 145, 125)

HSL

hsl(10, 86%, 73%)

HSB

hsb(10, 49%, 96%)

CMYK

cmyk(0%, 41%, 49%, 4%)

Oklch

oklch(75.7% 0.125 32.2)

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

#E3AD96

Apricot · BurlyWood · Warm Sun

HEX

#E3AD96

RGB

rgb(227, 173, 150)

HSL

hsl(18, 58%, 74%)

HSB

hsb(18, 34%, 89%)

CMYK

cmyk(0%, 24%, 34%, 11%)

Oklch

oklch(79.2% 0.071 44.1)

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

#E8D9C3

Goose Yellow · Wheat · Peach Orange

HEX

#E8D9C3

RGB

rgb(232, 217, 195)

HSL

hsl(36, 45%, 84%)

HSB

hsb(36, 16%, 91%)

CMYK

cmyk(0%, 6%, 16%, 9%)

Oklch

oklch(89.2% 0.034 77.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B6D9B8

Celadon · Silver · Apple Green

HEX

#B6D9B8

RGB

rgb(182, 217, 184)

HSL

hsl(123, 32%, 78%)

HSB

hsb(123, 16%, 85%)

CMYK

cmyk(16%, 0%, 15%, 15%)

Oklch

oklch(85.1% 0.058 146.6)

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

#97BD99

Celadon · DarkSeaGreen · Apple Green

HEX

#97BD99

RGB

rgb(151, 189, 153)

HSL

hsl(123, 22%, 67%)

HSB

hsb(123, 20%, 74%)

CMYK

cmyk(20%, 0%, 19%, 26%)

Oklch

oklch(76.1% 0.065 146.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5917D

7FE2F5

Analogous

F57FA6

F5917D

F5CE7F

Triadic

F5917D

7FF593

937FF5

Split-Comp.

F5917D

7FF5CE

7FA6F5

Tetradic

F5917D

A6F57F

7FE2F5

CE7FF5

Contrast Matrix WCAG 2.1 Contrast

F5917D	E3AD96	E8D9C3	B6D9B8	97BD99
—	1.2 Fail	1.6 Fail	1.5 Fail	1.1 Fail
1.2 Fail	—	1.4 Fail	1.3 Fail	1.1 Fail
1.6 Fail	1.4 Fail	—	1.1 Fail	1.5 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
1.1 Fail	1.1 Fail	1.5 Fail	1.4 Fail	—

White BG

2.3Fail

2.0Fail

1.4Fail

1.5Fail

2.1Fail

Black BG

9.2AAA

10.7AAA

15.1AAA

13.6AAA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CAC982

CCCB9C

E2E1C8

C5C5C0

A7A8A2

Deuteranopia

D0D783

CFD39D

E2E3CA

C3C1C2

A5A2A4

Tritanopia

F08687

E0A0A1

E7CDCD

B8C6C8

99A9AA

Achromatopsia

ADADAD

BBBBBB

DBDBDB

CBCBCB

AEAEAE

Shades & Tints Shades & Tints

#F5917D

Dark

Light

#E3AD96

Dark

Light

#E8D9C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5917d;
  --color-2: #e3ad96;
  --color-3: #e8d9c3;
  --color-4: #b6d9b8;
  --color-5: #97bd99;
}

SCSS

$color-1: #f5917d;
$color-2: #e3ad96;
$color-3: #e8d9c3;
$color-4: #b6d9b8;
$color-5: #97bd99;

TAILWIND

colors: {
  'brand-1': '#f5917d',
  'brand-2': '#e3ad96',
  'brand-3': '#e8d9c3',
  'brand-4': '#b6d9b8',
  'brand-5': '#97bd99',
}

RGB Array

[245, 145, 125], [227, 173, 150], [232, 217, 195], [182, 217, 184], [151, 189, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F5917D, #E3AD96, #E8D9C3, #B6D9B8, #97BD99 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: #f5917d; --color-2: #e3ad96; --color-3: #e8d9c3; --color-4: #b6d9b8; --color-5: #97bd99. 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