#E2AF6E + #D8C092 + #B7AF81 + #475E58 + #5B6C7C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E2AF6E

Ginger · SandyBrown · Warm Sun

HEX

#E2AF6E

RGB

rgb(226, 175, 110)

HSL

hsl(34, 67%, 66%)

HSB

hsb(34, 51%, 89%)

CMYK

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

Oklch

oklch(78.7% 0.102 72.2)

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

#D8C092

Goose Yellow · Tan · Warm Sun

HEX

#D8C092

RGB

rgb(216, 192, 146)

HSL

hsl(39, 47%, 71%)

HSB

hsb(39, 32%, 85%)

CMYK

cmyk(0%, 11%, 32%, 15%)

Oklch

oklch(81.7% 0.067 83.5)

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

#B7AF81

Fresh Green · Tan · Sunflower

HEX

#B7AF81

RGB

rgb(183, 175, 129)

HSL

hsl(51, 27%, 61%)

HSB

hsb(51, 30%, 72%)

CMYK

cmyk(0%, 4%, 30%, 28%)

Oklch

oklch(74.9% 0.063 99.4)

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

#475E58

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#475E58

RGB

rgb(71, 94, 88)

HSL

hsl(164, 14%, 32%)

HSB

hsb(164, 24%, 37%)

CMYK

cmyk(24%, 0%, 6%, 63%)

Oklch

oklch(46.1% 0.029 177.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5B6C7C

Slate Blue · DimGray · Navy Blue

HEX

#5B6C7C

RGB

rgb(91, 108, 124)

HSL

hsl(209, 15%, 42%)

HSB

hsb(209, 27%, 49%)

CMYK

cmyk(27%, 13%, 0%, 51%)

Oklch

oklch(52.3% 0.033 246.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2AF6E

6EA1E2

Analogous

E2766E

E2AF6E

DBE26E

Triadic

E2AF6E

6EE2B0

B06EE2

Split-Comp.

E2AF6E

6EDBE2

766EE2

Tetradic

E2AF6E

6EE276

6EA1E2

E26EDB

Contrast Matrix WCAG 2.1 Contrast

E2AF6E	D8C092	B7AF81	475E58	5B6C7C
—	1.1 Fail	1.1 Fail	3.5 AA Large	2.7 Fail
1.1 Fail	—	1.3 Fail	3.9 AA Large	3.1 AA Large
1.1 Fail	1.3 Fail	—	3.1 AA Large	2.4 Fail
3.5 AA Large	3.9 AA Large	3.1 AA Large	—	1.3 Fail
2.7 Fail	3.1 AA Large	2.4 Fail	1.3 Fail	—

White BG

2.0Fail

1.8Fail

2.2Fail

7.0AA

5.4AA

Black BG

10.6AAA

11.9AAA

9.5AAA

3.0AA Large

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCB7E

CECD9D

B4B38C

515159

626378

Deuteranopia

CFD382

CFD1A0

B4B58F

504E5A

616077

Tritanopia

DF8A8D

D7A6A8

B79597

485B5B

5C7574

Achromatopsia

B7B7B7

C2C2C2

ACACAC

565656

696969

Shades & Tints Shades & Tints

#E2AF6E

Dark

Light

#D8C092

Dark

Light

#B7AF81

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2af6e;
  --color-2: #d8c092;
  --color-3: #b7af81;
  --color-4: #475e58;
  --color-5: #5b6c7c;
}

SCSS

$color-1: #e2af6e;
$color-2: #d8c092;
$color-3: #b7af81;
$color-4: #475e58;
$color-5: #5b6c7c;

TAILWIND

colors: {
  'brand-1': '#e2af6e',
  'brand-2': '#d8c092',
  'brand-3': '#b7af81',
  'brand-4': '#475e58',
  'brand-5': '#5b6c7c',
}

RGB Array

[226, 175, 110], [216, 192, 146], [183, 175, 129], [71, 94, 88], [91, 108, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2AF6E, #D8C092, #B7AF81, #475E58, #5B6C7C is ideal for: corporate websites, product showcases, portfolios. 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: #e2af6e; --color-2: #d8c092; --color-3: #b7af81; --color-4: #475e58; --color-5: #5b6c7c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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