#ECA48B + #F8F3B1 + #F4DA83 + #A78873 + #7F6A69 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECA48B

Apricot · DarkSalmon · Warm Sun

HEX

#ECA48B

RGB

rgb(236, 164, 139)

HSL

hsl(15, 72%, 74%)

HSB

hsb(15, 41%, 93%)

CMYK

cmyk(0%, 31%, 41%, 7%)

Oklch

oklch(78.2% 0.093 39.9)

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

#F8F3B1

Fresh Green · Wheat · Lemon Cream

HEX

#F8F3B1

RGB

rgb(248, 243, 177)

HSL

hsl(56, 84%, 83%)

HSB

hsb(56, 29%, 97%)

CMYK

cmyk(0%, 2%, 29%, 3%)

Oklch

oklch(95.3% 0.084 104.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F4DA83

Goose Yellow · Khaki · Sunflower

HEX

#F4DA83

RGB

rgb(244, 218, 131)

HSL

hsl(46, 84%, 74%)

HSB

hsb(46, 46%, 96%)

CMYK

cmyk(0%, 11%, 46%, 4%)

Oklch

oklch(89.1% 0.111 93.3)

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

#A78873

Tangerine · Gray · Warm Sun

HEX

#A78873

RGB

rgb(167, 136, 115)

HSL

hsl(24, 23%, 55%)

HSB

hsb(24, 31%, 65%)

CMYK

cmyk(0%, 19%, 31%, 35%)

Oklch

oklch(65.0% 0.049 55.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#7F6A69

Crimson · DimGray · Warm Gray

HEX

#7F6A69

RGB

rgb(127, 106, 105)

HSL

hsl(3, 9%, 45%)

HSB

hsb(3, 17%, 50%)

CMYK

cmyk(0%, 17%, 17%, 50%)

Oklch

oklch(54.4% 0.027 21.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECA48B

8DD5EC

Analogous

EC8DA5

ECA48B

ECD58D

Triadic

ECA48B

8DECA5

A58DEC

Split-Comp.

ECA48B

8DECD5

8DA5EC

Tetradic

ECA48B

A5EC8D

8DD5EC

D58DEC

Contrast Matrix WCAG 2.1 Contrast

ECA48B	F8F3B1	F4DA83	A78873	7F6A69
—	1.8 Fail	1.5 Fail	1.6 Fail	2.5 Fail
1.8 Fail	—	1.2 Fail	2.9 Fail	4.4 AA Large
1.5 Fail	1.2 Fail	—	2.4 Fail	3.6 AA Large
1.6 Fail	2.9 Fail	2.4 Fail	—	1.5 Fail
2.5 Fail	4.4 AA Large	3.6 AA Large	1.5 Fail	—

White BG

2.0Fail

1.1Fail

1.4Fail

3.3AA Large

5.0AA

Black BG

10.2AAA

18.4AAA

15.2AAA

6.4AA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC91

F6F6C1

E9E998

9A9978

767669

Deuteranopia

D1D693

F6F7C5

EAEC9D

9B9E79

777969

Tritanopia

E89697

F8CED0

F3A9AC

A57C7D

7E6969

Achromatopsia

B7B7B7

EDEDED

D8D8D8

8F8F8F

707070

Shades & Tints Shades & Tints

#ECA48B

Dark

Light

#F8F3B1

Dark

Light

#F4DA83

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eca48b;
  --color-2: #f8f3b1;
  --color-3: #f4da83;
  --color-4: #a78873;
  --color-5: #7f6a69;
}

SCSS

$color-1: #eca48b;
$color-2: #f8f3b1;
$color-3: #f4da83;
$color-4: #a78873;
$color-5: #7f6a69;

TAILWIND

colors: {
  'brand-1': '#eca48b',
  'brand-2': '#f8f3b1',
  'brand-3': '#f4da83',
  'brand-4': '#a78873',
  'brand-5': '#7f6a69',
}

RGB Array

[236, 164, 139], [248, 243, 177], [244, 218, 131], [167, 136, 115], [127, 106, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #ECA48B, #F8F3B1, #F4DA83, #A78873, #7F6A69 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: #eca48b; --color-2: #f8f3b1; --color-3: #f4da83; --color-4: #a78873; --color-5: #7f6a69. 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