#887561 + #D37760 + #BBA889 + #DDC29F + #DED9BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#887561

Ochre · Gray · Amber Brown

HEX

#887561

RGB

rgb(136, 117, 97)

HSL

hsl(31, 17%, 46%)

HSB

hsb(31, 29%, 53%)

CMYK

cmyk(0%, 14%, 29%, 47%)

Oklch

oklch(57.5% 0.038 68.4)

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

#D37760

Crimson · Salmon · Passion Red

HEX

#D37760

RGB

rgb(211, 119, 96)

HSL

hsl(12, 57%, 60%)

HSB

hsb(12, 55%, 83%)

CMYK

cmyk(0%, 44%, 55%, 17%)

Oklch

oklch(66.6% 0.121 35.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#BBA889

Ginger · Tan · Warm Sun

HEX

#BBA889

RGB

rgb(187, 168, 137)

HSL

hsl(37, 27%, 64%)

HSB

hsb(37, 27%, 73%)

CMYK

cmyk(0%, 10%, 27%, 27%)

Oklch

oklch(74.0% 0.048 79.9)

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

#DDC29F

Goose Yellow · BurlyWood · Warm Sun

HEX

#DDC29F

RGB

rgb(221, 194, 159)

HSL

hsl(34, 48%, 75%)

HSB

hsb(34, 28%, 87%)

CMYK

cmyk(0%, 12%, 28%, 13%)

Oklch

oklch(82.8% 0.056 74.1)

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

#DED9BD

Fresh Green · LightGray · Lemon Cream

HEX

#DED9BD

RGB

rgb(222, 217, 189)

HSL

hsl(51, 33%, 81%)

HSB

hsb(51, 15%, 87%)

CMYK

cmyk(0%, 2%, 15%, 13%)

Oklch

oklch(88.2% 0.038 98.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

887561

617589

Analogous

896261

887561

898961

Triadic

887561

618976

766189

Split-Comp.

887561

618989

626189

Tetradic

887561

618962

617589

896189

Contrast Matrix WCAG 2.1 Contrast

887561	D37760	BBA889	DDC29F	DED9BD
—	1.4 Fail	1.9 Fail	2.6 Fail	3.1 AA Large
1.4 Fail	—	1.4 Fail	1.9 Fail	2.2 Fail
1.9 Fail	1.4 Fail	—	1.4 Fail	1.6 Fail
2.6 Fail	1.9 Fail	1.4 Fail	—	1.2 Fail
3.1 AA Large	2.2 Fail	1.6 Fail	1.2 Fail	—

White BG

4.4AA Large

3.2AA Large

2.3Fail

1.7Fail

1.4Fail

Black BG

4.8AA

6.6AA

9.1AAA

12.3AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808066

ABAA66

B3B391

D1D1A7

DCDCC4

Deuteranopia

818267

B1B767

B4B592

D3D5AA

DCDCC5

Tritanopia

876A6B

CE6A6B

BA9698

DCAEB0

DEC9CA

Achromatopsia

787878

909090

AAAAAA

C6C6C6

D7D7D7

Shades & Tints Shades & Tints

#887561

Dark

Light

#D37760

Dark

Light

#BBA889

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #887561;
  --color-2: #d37760;
  --color-3: #bba889;
  --color-4: #ddc29f;
  --color-5: #ded9bd;
}

SCSS

$color-1: #887561;
$color-2: #d37760;
$color-3: #bba889;
$color-4: #ddc29f;
$color-5: #ded9bd;

TAILWIND

colors: {
  'brand-1': '#887561',
  'brand-2': '#d37760',
  'brand-3': '#bba889',
  'brand-4': '#ddc29f',
  'brand-5': '#ded9bd',
}

RGB Array

[136, 117, 97], [211, 119, 96], [187, 168, 137], [221, 194, 159], [222, 217, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #887561, #D37760, #BBA889, #DDC29F, #DED9BD 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: #887561; --color-2: #d37760; --color-3: #bba889; --color-4: #ddc29f; --color-5: #ded9bd. 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