#FEB18E + #A7A776 + #D7E676 + #E2DFCA + #8FE7C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FEB18E

Apricot · LightSalmon · Peach Orange

HEX

#FEB18E

RGB

rgb(254, 177, 142)

HSL

hsl(19, 98%, 78%)

HSB

hsb(19, 44%, 100%)

CMYK

cmyk(0%, 30%, 44%, 0%)

Oklch

oklch(82.6% 0.102 45.3)

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

#A7A776

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A7A776

RGB

rgb(167, 167, 118)

HSL

hsl(60, 22%, 56%)

HSB

hsb(60, 29%, 65%)

CMYK

cmyk(0%, 0%, 29%, 35%)

Oklch

oklch(71.6% 0.067 108.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#D7E676

Fresh Green · Khaki · Sunflower

HEX

#D7E676

RGB

rgb(215, 230, 118)

HSL

hsl(68, 69%, 68%)

HSB

hsb(68, 49%, 90%)

CMYK

cmyk(7%, 0%, 49%, 10%)

Oklch

oklch(89.0% 0.138 115.6)

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

#E2DFCA

Fresh Green · LightGray · Lemon Cream

HEX

#E2DFCA

RGB

rgb(226, 223, 202)

HSL

hsl(53, 29%, 84%)

HSB

hsb(53, 11%, 89%)

CMYK

cmyk(0%, 1%, 11%, 11%)

Oklch

oklch(90.0% 0.028 100.3)

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

#8FE7C1

Jade · LightGreen · Apple Green

HEX

#8FE7C1

RGB

rgb(143, 231, 193)

HSL

hsl(154, 65%, 73%)

HSB

hsb(154, 38%, 91%)

CMYK

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

Oklch

oklch(86.2% 0.101 164.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEB18E

90DBFE

Analogous

FE90A4

FEB18E

FEEA90

Triadic

FEB18E

90FEB3

B390FE

Split-Comp.

FEB18E

90FEEA

90A4FE

Tetradic

FEB18E

A4FE90

90DBFE

EA90FE

Contrast Matrix WCAG 2.1 Contrast

FEB18E	A7A776	D7E676	E2DFCA	8FE7C1
—	1.4 Fail	1.3 Fail	1.3 Fail	1.2 Fail
1.4 Fail	—	1.8 Fail	1.9 Fail	1.7 Fail
1.3 Fail	1.8 Fail	—	1.0 Fail	1.1 Fail
1.3 Fail	1.9 Fail	1.0 Fail	—	1.1 Fail
1.2 Fail	1.7 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

2.5Fail

1.4Fail

1.3Fail

1.5Fail

Black BG

11.9AAA

8.4AAA

15.5AAA

15.6AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDC96

A7A782

DDDE91

E1E1CF

B5B6CA

Deuteranopia

E1E799

A7A785

DDDC98

E1E1D0

B0A9CC

Tritanopia

FA9D9F

A78B8D

D8A6AB

E2D3D4

93D1D3

Achromatopsia

C4C4C4

A1A1A1

D5D5D5

DEDEDE

C8C8C8

Shades & Tints Shades & Tints

#FEB18E

Dark

Light

#A7A776

Dark

Light

#D7E676

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #feb18e;
  --color-2: #a7a776;
  --color-3: #d7e676;
  --color-4: #e2dfca;
  --color-5: #8fe7c1;
}

SCSS

$color-1: #feb18e;
$color-2: #a7a776;
$color-3: #d7e676;
$color-4: #e2dfca;
$color-5: #8fe7c1;

TAILWIND

colors: {
  'brand-1': '#feb18e',
  'brand-2': '#a7a776',
  'brand-3': '#d7e676',
  'brand-4': '#e2dfca',
  'brand-5': '#8fe7c1',
}

RGB Array

[254, 177, 142], [167, 167, 118], [215, 230, 118], [226, 223, 202], [143, 231, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEB18E, #A7A776, #D7E676, #E2DFCA, #8FE7C1 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: #feb18e; --color-2: #a7a776; --color-3: #d7e676; --color-4: #e2dfca; --color-5: #8fe7c1. 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