#897867 + #FD686C + #E8ABA0 + #DFBDAD + #E3CBB7 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#897867

Ochre · Gray · Amber Brown

HEX

#897867

RGB

rgb(137, 120, 103)

HSL

hsl(30, 14%, 47%)

HSB

hsb(30, 25%, 54%)

CMYK

cmyk(0%, 12%, 25%, 46%)

Oklch

oklch(58.4% 0.033 67.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#FD686C

Peach Pink · Salmon · Coral Red

HEX

#FD686C

RGB

rgb(253, 104, 108)

HSL

hsl(358, 97%, 70%)

HSB

hsb(358, 59%, 99%)

CMYK

cmyk(0%, 59%, 57%, 1%)

Oklch

oklch(70.5% 0.182 21.4)

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

#E8ABA0

Peach Pink · BurlyWood · Coral Red

HEX

#E8ABA0

RGB

rgb(232, 171, 160)

HSL

hsl(9, 61%, 77%)

HSB

hsb(9, 31%, 91%)

CMYK

cmyk(0%, 26%, 31%, 9%)

Oklch

oklch(79.5% 0.074 30.3)

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

#DFBDAD

Apricot · Silver · Peach Orange

HEX

#DFBDAD

RGB

rgb(223, 189, 173)

HSL

hsl(19, 44%, 78%)

HSB

hsb(19, 22%, 87%)

CMYK

cmyk(0%, 15%, 22%, 13%)

Oklch

oklch(82.3% 0.045 46.7)

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

#E3CBB7

Apricot · Wheat · Peach Orange

HEX

#E3CBB7

RGB

rgb(227, 203, 183)

HSL

hsl(27, 44%, 80%)

HSB

hsb(27, 19%, 89%)

CMYK

cmyk(0%, 11%, 19%, 11%)

Oklch

oklch(85.7% 0.038 62.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

897867

677889

Analogous

896767

897867

898967

Triadic

897867

678978

786789

Split-Comp.

897867

678989

676789

Tetradic

897867

678967

677889

896789

Contrast Matrix WCAG 2.1 Contrast

897867	FD686C	E8ABA0	DFBDAD	E3CBB7
—	1.5 Fail	2.2 Fail	2.4 Fail	2.7 Fail
1.5 Fail	—	1.5 Fail	1.6 Fail	1.8 Fail
2.2 Fail	1.5 Fail	—	1.1 Fail	1.3 Fail
2.4 Fail	1.6 Fail	1.1 Fail	—	1.1 Fail
2.7 Fail	1.8 Fail	1.3 Fail	1.1 Fail	—

White BG

4.2AA Large

2.8Fail

2.0Fail

1.7Fail

1.6Fail

Black BG

4.9AA

7.4AAA

10.8AAA

12.0AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82816B

BCBB6B

CECDA3

D0D0B1

D9D8BC

Deuteranopia

83846C

C5D06B

D1D6A3

D2D5B2

DADCBD

Tritanopia

886E6F

F66A6A

E5A5A5

DDB4B5

E2C0C1

Achromatopsia

7B7B7B

959595

BCBCBC

C5C5C5

D0D0D0

Shades & Tints Shades & Tints

#897867

Dark

Light

#FD686C

Dark

Light

#E8ABA0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #897867;
  --color-2: #fd686c;
  --color-3: #e8aba0;
  --color-4: #dfbdad;
  --color-5: #e3cbb7;
}

SCSS

$color-1: #897867;
$color-2: #fd686c;
$color-3: #e8aba0;
$color-4: #dfbdad;
$color-5: #e3cbb7;

TAILWIND

colors: {
  'brand-1': '#897867',
  'brand-2': '#fd686c',
  'brand-3': '#e8aba0',
  'brand-4': '#dfbdad',
  'brand-5': '#e3cbb7',
}

RGB Array

[137, 120, 103], [253, 104, 108], [232, 171, 160], [223, 189, 173], [227, 203, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #897867, #FD686C, #E8ABA0, #DFBDAD, #E3CBB7 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: #897867; --color-2: #fd686c; --color-3: #e8aba0; --color-4: #dfbdad; --color-5: #e3cbb7. 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