#F5AF76 + #E8C784 + #E3D5A8 + #C0CCA7 + #B8AE93 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5AF76

Apricot · LightSalmon · Warm Sun

HEX

#F5AF76

RGB

rgb(245, 175, 118)

HSL

hsl(27, 86%, 71%)

HSB

hsb(27, 52%, 96%)

CMYK

cmyk(0%, 29%, 52%, 4%)

Oklch

oklch(80.8% 0.110 59.5)

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

#E8C784

Goose Yellow · BurlyWood · Sunflower

HEX

#E8C784

RGB

rgb(232, 199, 132)

HSL

hsl(40, 68%, 71%)

HSB

hsb(40, 43%, 91%)

CMYK

cmyk(0%, 14%, 43%, 9%)

Oklch

oklch(84.3% 0.093 84.3)

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

#E3D5A8

Goose Yellow · Wheat · Lemon Cream

HEX

#E3D5A8

RGB

rgb(227, 213, 168)

HSL

hsl(46, 51%, 77%)

HSB

hsb(46, 26%, 89%)

CMYK

cmyk(0%, 6%, 26%, 11%)

Oklch

oklch(87.3% 0.061 92.8)

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

#C0CCA7

Willow Green · Silver · Apple Green

HEX

#C0CCA7

RGB

rgb(192, 204, 167)

HSL

hsl(79, 27%, 73%)

HSB

hsb(79, 18%, 80%)

CMYK

cmyk(6%, 0%, 18%, 20%)

Oklch

oklch(82.6% 0.052 122.1)

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

#B8AE93

Ginger · DarkGray · Sunflower

HEX

#B8AE93

RGB

rgb(184, 174, 147)

HSL

hsl(44, 21%, 65%)

HSB

hsb(44, 20%, 72%)

CMYK

cmyk(0%, 5%, 20%, 28%)

Oklch

oklch(75.2% 0.039 90.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5AF76

75BBF5

Analogous

F5757C

F5AF76

F5EE75

Triadic

F5AF76

75F5AF

AF75F5

Split-Comp.

F5AF76

75F5EE

757CF5

Tetradic

F5AF76

7CF575

75BBF5

EE75F5

Contrast Matrix WCAG 2.1 Contrast

F5AF76	E8C784	E3D5A8	C0CCA7	B8AE93
—	1.1 Fail	1.3 Fail	1.1 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.0 Fail	1.4 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.1 Fail	1.0 Fail	1.2 Fail	—	1.3 Fail
1.2 Fail	1.4 Fail	1.5 Fail	1.3 Fail	—

White BG

1.9Fail

1.6Fail

1.5Fail

1.7Fail

2.2Fail

Black BG

11.3AAA

12.9AAA

14.3AAA

12.4AAA

9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D684

DAD994

DDDDB3

C5C5B0

B4B49A

Deuteranopia

DBE087

DCDE98

DEDFB6

C5C4B2

B4B59B

Tritanopia

F28F91

E6A1A4

E2BBBD

C1B7B9

B79FA0

Achromatopsia

BDBDBD

C9C9C9

D4D4D4

C4C4C4

AEAEAE

Shades & Tints Shades & Tints

#F5AF76

Dark

Light

#E8C784

Dark

Light

#E3D5A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5af76;
  --color-2: #e8c784;
  --color-3: #e3d5a8;
  --color-4: #c0cca7;
  --color-5: #b8ae93;
}

SCSS

$color-1: #f5af76;
$color-2: #e8c784;
$color-3: #e3d5a8;
$color-4: #c0cca7;
$color-5: #b8ae93;

TAILWIND

colors: {
  'brand-1': '#f5af76',
  'brand-2': '#e8c784',
  'brand-3': '#e3d5a8',
  'brand-4': '#c0cca7',
  'brand-5': '#b8ae93',
}

RGB Array

[245, 175, 118], [232, 199, 132], [227, 213, 168], [192, 204, 167], [184, 174, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5AF76, #E8C784, #E3D5A8, #C0CCA7, #B8AE93 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: #f5af76; --color-2: #e8c784; --color-3: #e3d5a8; --color-4: #c0cca7; --color-5: #b8ae93. 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