#E18F11 + #E4A370 + #FBCDA2 + #E0DACE + #D1DACE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E18F11

Ochre · GoldenRod · Amber Brown

HEX

#E18F11

RGB

rgb(225, 143, 17)

HSL

hsl(36, 86%, 47%)

HSB

hsb(36, 92%, 88%)

CMYK

cmyk(0%, 36%, 92%, 12%)

Oklch

oklch(71.8% 0.153 68.6)

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

#E4A370

Apricot · DarkSalmon · Warm Sun

HEX

#E4A370

RGB

rgb(228, 163, 112)

HSL

hsl(26, 68%, 67%)

HSB

hsb(26, 51%, 89%)

CMYK

cmyk(0%, 29%, 51%, 11%)

Oklch

oklch(76.7% 0.102 58.6)

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

#FBCDA2

Apricot · Wheat · Peach Orange

HEX

#FBCDA2

RGB

rgb(251, 205, 162)

HSL

hsl(29, 92%, 81%)

HSB

hsb(29, 35%, 98%)

CMYK

cmyk(0%, 18%, 35%, 2%)

Oklch

oklch(87.8% 0.077 64.6)

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

#E0DACE

Goose Yellow · LightGray · Lemon Cream

HEX

#E0DACE

RGB

rgb(224, 218, 206)

HSL

hsl(40, 22%, 84%)

HSB

hsb(40, 8%, 88%)

CMYK

cmyk(0%, 3%, 8%, 12%)

Oklch

oklch(89.0% 0.017 84.6)

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

#D1DACE

Celadon · LightGray · Mint Green

HEX

#D1DACE

RGB

rgb(209, 218, 206)

HSL

hsl(105, 14%, 83%)

HSB

hsb(105, 6%, 85%)

CMYK

cmyk(4%, 0%, 6%, 15%)

Oklch

oklch(87.8% 0.019 137.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E18F11

1163DF

Analogous

DF2511

E18F11

CADF11

Triadic

E18F11

11DF8C

8C11DF

Split-Comp.

E18F11

11CADF

2511DF

Tetradic

E18F11

11DF25

1163DF

DF11CA

Contrast Matrix WCAG 2.1 Contrast

E18F11	E4A370	FBCDA2	E0DACE	D1DACE
—	1.2 Fail	1.8 Fail	1.9 Fail	1.8 Fail
1.2 Fail	—	1.5 Fail	1.5 Fail	1.5 Fail
1.8 Fail	1.5 Fail	—	1.1 Fail	1.0 Fail
1.9 Fail	1.5 Fail	1.1 Fail	—	1.0 Fail
1.8 Fail	1.5 Fail	1.0 Fail	1.0 Fail	—

White BG

2.6Fail

2.1Fail

1.5Fail

1.4Fail

Black BG

8.1AAA

9.8AAA

14.4AAA

15.1AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD2F

C8C77C

E7E7AC

DDDDD1

D5D5D1

Deuteranopia

C2C837

CCD17F

EAEDAF

DEDED2

D4D4D2

Tritanopia

DD484D

E18688

F9B5B6

E0D3D4

D1D3D4

Achromatopsia

999999

B1B1B1

D6D6D6

DADADA

D6D6D6

Shades & Tints Shades & Tints

#E18F11

Dark

Light

#E4A370

Dark

Light

#FBCDA2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e18f11;
  --color-2: #e4a370;
  --color-3: #fbcda2;
  --color-4: #e0dace;
  --color-5: #d1dace;
}

SCSS

$color-1: #e18f11;
$color-2: #e4a370;
$color-3: #fbcda2;
$color-4: #e0dace;
$color-5: #d1dace;

TAILWIND

colors: {
  'brand-1': '#e18f11',
  'brand-2': '#e4a370',
  'brand-3': '#fbcda2',
  'brand-4': '#e0dace',
  'brand-5': '#d1dace',
}

RGB Array

[225, 143, 17], [228, 163, 112], [251, 205, 162], [224, 218, 206], [209, 218, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E18F11, #E4A370, #FBCDA2, #E0DACE, #D1DACE 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: #e18f11; --color-2: #e4a370; --color-3: #fbcda2; --color-4: #e0dace; --color-5: #d1dace. 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