#B8A974 + #C6BE8F + #D4D2A9 + #E5E0AE + #ECB59C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8A974

Ginger · Tan · Sunflower

HEX

#B8A974

RGB

rgb(184, 169, 116)

HSL

hsl(47, 32%, 59%)

HSB

hsb(47, 37%, 72%)

CMYK

cmyk(0%, 8%, 37%, 28%)

Oklch

oklch(73.5% 0.073 94.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C6BE8F

Fresh Green · Tan · Sunflower

HEX

#C6BE8F

RGB

rgb(198, 190, 143)

HSL

hsl(51, 33%, 67%)

HSB

hsb(51, 28%, 78%)

CMYK

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

Oklch

oklch(79.6% 0.063 99.6)

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

#D4D2A9

Fresh Green · Silver · Sunflower

HEX

#D4D2A9

RGB

rgb(212, 210, 169)

HSL

hsl(57, 33%, 75%)

HSB

hsb(57, 20%, 83%)

CMYK

cmyk(0%, 1%, 20%, 17%)

Oklch

oklch(85.5% 0.055 105.2)

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

#E5E0AE

Fresh Green · Wheat · Lemon Cream

HEX

#E5E0AE

RGB

rgb(229, 224, 174)

HSL

hsl(55, 51%, 79%)

HSB

hsb(55, 24%, 90%)

CMYK

cmyk(0%, 2%, 24%, 10%)

Oklch

oklch(89.8% 0.065 102.9)

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

#ECB59C

Apricot · BurlyWood · Peach Orange

HEX

#ECB59C

RGB

rgb(236, 181, 156)

HSL

hsl(19, 68%, 77%)

HSB

hsb(19, 34%, 93%)

CMYK

cmyk(0%, 23%, 34%, 7%)

Oklch

oklch(81.7% 0.073 45.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8A974

7583B8

Analogous

B88875

B8A974

A5B875

Triadic

B8A974

75B8A9

A975B8

Split-Comp.

B8A974

75A5B8

8875B8

Tetradic

B8A974

75B888

7583B8

B875A5

Contrast Matrix WCAG 2.1 Contrast

B8A974	C6BE8F	D4D2A9	E5E0AE	ECB59C
—	1.2 Fail	1.5 Fail	1.7 Fail	1.3 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.0 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.3 Fail
1.3 Fail	1.0 Fail	1.2 Fail	1.3 Fail	—

White BG

2.3Fail

1.9Fail

1.5Fail

1.3Fail

1.8Fail

Black BG

9.0AAA

11.2AAA

13.6AAA

15.6AAA

11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B181

C3C29A

D3D3B3

E3E3BA

D4D4A2

Deuteranopia

B2B384

C3C49D

D3D3B5

E3E4BD

D7DCA4

Tritanopia

B78B8D

C6A3A5

D4BBBC

E5C4C6

E9A7A8

Achromatopsia

A7A7A7

BBBBBB

CECECE

DCDCDC

C3C3C3

Shades & Tints Shades & Tints

#B8A974

Dark

Light

#C6BE8F

Dark

Light

#D4D2A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8a974;
  --color-2: #c6be8f;
  --color-3: #d4d2a9;
  --color-4: #e5e0ae;
  --color-5: #ecb59c;
}

SCSS

$color-1: #b8a974;
$color-2: #c6be8f;
$color-3: #d4d2a9;
$color-4: #e5e0ae;
$color-5: #ecb59c;

TAILWIND

colors: {
  'brand-1': '#b8a974',
  'brand-2': '#c6be8f',
  'brand-3': '#d4d2a9',
  'brand-4': '#e5e0ae',
  'brand-5': '#ecb59c',
}

RGB Array

[184, 169, 116], [198, 190, 143], [212, 210, 169], [229, 224, 174], [236, 181, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8A974, #C6BE8F, #D4D2A9, #E5E0AE, #ECB59C 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: #b8a974; --color-2: #c6be8f; --color-3: #d4d2a9; --color-4: #e5e0ae; --color-5: #ecb59c. 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