#8B7C67 + #FFCE29 + #E1B87A + #C9DBB5 + #E1E2BA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8B7C67

Ochre · Gray · Amber Brown

HEX

#8B7C67

RGB

rgb(139, 124, 103)

HSL

hsl(35, 15%, 47%)

HSB

hsb(35, 26%, 55%)

CMYK

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

Oklch

oklch(59.4% 0.036 76.2)

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

#FFCE29

Ginger · Gold · Sunflower

HEX

#FFCE29

RGB

rgb(255, 206, 41)

HSL

hsl(46, 100%, 58%)

HSB

hsb(46, 84%, 100%)

CMYK

cmyk(0%, 19%, 84%, 0%)

Oklch

oklch(87.0% 0.169 90.2)

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

#E1B87A

Ginger · BurlyWood · Warm Sun

HEX

#E1B87A

RGB

rgb(225, 184, 122)

HSL

hsl(36, 63%, 68%)

HSB

hsb(36, 46%, 88%)

CMYK

cmyk(0%, 18%, 46%, 12%)

Oklch

oklch(80.5% 0.092 77.2)

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

#C9DBB5

Willow Green · Silver · Apple Green

HEX

#C9DBB5

RGB

rgb(201, 219, 181)

HSL

hsl(88, 35%, 78%)

HSB

hsb(88, 17%, 86%)

CMYK

cmyk(8%, 0%, 17%, 14%)

Oklch

oklch(86.8% 0.055 128.2)

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

#E1E2BA

Fresh Green · Wheat · Lemon Cream

HEX

#E1E2BA

RGB

rgb(225, 226, 186)

HSL

hsl(61, 41%, 81%)

HSB

hsb(61, 18%, 89%)

CMYK

cmyk(0%, 0%, 18%, 11%)

Oklch

oklch(90.2% 0.053 108.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B7C67

66758A

Analogous

8A6966

8B7C67

878A66

Triadic

8B7C67

668A7B

7B668A

Split-Comp.

8B7C67

66878A

69668A

Tetradic

8B7C67

668A69

66758A

8A6687

Contrast Matrix WCAG 2.1 Contrast

8B7C67	FFCE29	E1B87A	C9DBB5	E1E2BA
—	2.7 Fail	2.2 Fail	2.8 Fail	3.1 AA Large
2.7 Fail	—	1.2 Fail	1.0 Fail	1.1 Fail
2.2 Fail	1.2 Fail	—	1.3 Fail	1.4 Fail
2.8 Fail	1.0 Fail	1.3 Fail	—	1.1 Fail
3.1 AA Large	1.1 Fail	1.4 Fail	1.1 Fail	—

White BG

4.1AA Large

1.5Fail

1.9Fail

1.5Fail

1.3Fail

Black BG

5.2AA

14.1AAA

11.3AAA

14.3AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

85846C

EAE951

CFCF89

D1D1BE

E1E1C4

Deuteranopia

85876D

EDF05B

D2D58D

D0CEC0

E1E1C6

Tritanopia

8A7071

FD7077

DF9597

CAC5C7

E1CBCD

Achromatopsia

7E7E7E

CACACA

BDBDBD

D1D1D1

DDDDDD

Shades & Tints Shades & Tints

#8B7C67

Dark

Light

#FFCE29

Dark

Light

#E1B87A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b7c67;
  --color-2: #ffce29;
  --color-3: #e1b87a;
  --color-4: #c9dbb5;
  --color-5: #e1e2ba;
}

SCSS

$color-1: #8b7c67;
$color-2: #ffce29;
$color-3: #e1b87a;
$color-4: #c9dbb5;
$color-5: #e1e2ba;

TAILWIND

colors: {
  'brand-1': '#8b7c67',
  'brand-2': '#ffce29',
  'brand-3': '#e1b87a',
  'brand-4': '#c9dbb5',
  'brand-5': '#e1e2ba',
}

RGB Array

[139, 124, 103], [255, 206, 41], [225, 184, 122], [201, 219, 181], [225, 226, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B7C67, #FFCE29, #E1B87A, #C9DBB5, #E1E2BA 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: #8b7c67; --color-2: #ffce29; --color-3: #e1b87a; --color-4: #c9dbb5; --color-5: #e1e2ba. 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