#F1714F + #EB896E + #DEC39B + #E8D8C1 + #ABA398 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1714F

Peach Pink · Coral · Coral Red

HEX

#F1714F

RGB

rgb(241, 113, 79)

HSL

hsl(13, 85%, 63%)

HSB

hsb(13, 67%, 95%)

CMYK

cmyk(0%, 53%, 67%, 5%)

Oklch

oklch(69.5% 0.166 35.9)

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

#EB896E

Peach Pink · DarkSalmon · Coral Red

HEX

#EB896E

RGB

rgb(235, 137, 110)

HSL

hsl(13, 76%, 68%)

HSB

hsb(13, 53%, 92%)

CMYK

cmyk(0%, 42%, 53%, 8%)

Oklch

oklch(72.9% 0.126 36.3)

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

#DEC39B

Goose Yellow · BurlyWood · Warm Sun

HEX

#DEC39B

RGB

rgb(222, 195, 155)

HSL

hsl(36, 50%, 74%)

HSB

hsb(36, 30%, 87%)

CMYK

cmyk(0%, 12%, 30%, 13%)

Oklch

oklch(83.0% 0.061 77.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E8D8C1

Goose Yellow · Wheat · Peach Orange

HEX

#E8D8C1

RGB

rgb(232, 216, 193)

HSL

hsl(35, 46%, 83%)

HSB

hsb(35, 17%, 91%)

CMYK

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

Oklch

oklch(88.9% 0.035 77.1)

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

#ABA398

Ginger · DarkGray · Warm Sun

HEX

#ABA398

RGB

rgb(171, 163, 152)

HSL

hsl(35, 10%, 63%)

HSB

hsb(35, 11%, 67%)

CMYK

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

Oklch

oklch(71.9% 0.018 76.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1714F

50CEF1

Analogous

F1507E

F1714F

F1C350

Triadic

F1714F

50F173

7350F1

Split-Comp.

F1714F

50F1C3

507EF1

Tetradic

F1714F

7EF150

50CEF1

C350F1

Contrast Matrix WCAG 2.1 Contrast

F1714F	EB896E	DEC39B	E8D8C1	ABA398
—	1.2 Fail	1.7 Fail	2.1 Fail	1.2 Fail
1.2 Fail	—	1.5 Fail	1.8 Fail	1.0 Fail
1.7 Fail	1.5 Fail	—	1.2 Fail	1.5 Fail
2.1 Fail	1.8 Fail	1.2 Fail	—	1.8 Fail
1.2 Fail	1.0 Fail	1.5 Fail	1.8 Fail	—

White BG

2.9Fail

2.5Fail

1.7Fail

1.4Fail

2.5Fail

Black BG

7.2AAA

8.3AAA

12.4AAA

15.0AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BAB857

C1C075

D2D2A5

E1E1C7

A8A79B

Deuteranopia

C1CB59

C6CE76

D4D6A7

E2E3C8

A8A99B

Tritanopia

EB5E5F

E67A7B

DDACAE

E7CBCC

AB9D9D

Achromatopsia

939393

A3A3A3

C7C7C7

DADADA

A4A4A4

Shades & Tints Shades & Tints

#F1714F

Dark

Light

#EB896E

Dark

Light

#DEC39B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1714f;
  --color-2: #eb896e;
  --color-3: #dec39b;
  --color-4: #e8d8c1;
  --color-5: #aba398;
}

SCSS

$color-1: #f1714f;
$color-2: #eb896e;
$color-3: #dec39b;
$color-4: #e8d8c1;
$color-5: #aba398;

TAILWIND

colors: {
  'brand-1': '#f1714f',
  'brand-2': '#eb896e',
  'brand-3': '#dec39b',
  'brand-4': '#e8d8c1',
  'brand-5': '#aba398',
}

RGB Array

[241, 113, 79], [235, 137, 110], [222, 195, 155], [232, 216, 193], [171, 163, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1714F, #EB896E, #DEC39B, #E8D8C1, #ABA398 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: #f1714f; --color-2: #eb896e; --color-3: #dec39b; --color-4: #e8d8c1; --color-5: #aba398. 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 general-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