#D37F41 + #BF9C64 + #CBE0A4 + #CDE89C + #D7D6D1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D37F41

Tangerine · Chocolate · Warm Sun

HEX

#D37F41

RGB

rgb(211, 127, 65)

HSL

hsl(25, 62%, 54%)

HSB

hsb(25, 69%, 83%)

CMYK

cmyk(0%, 40%, 69%, 17%)

Oklch

oklch(67.5% 0.129 54.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#BF9C64

Ginger · DarkSalmon · Warm Sun

HEX

#BF9C64

RGB

rgb(191, 156, 100)

HSL

hsl(37, 42%, 57%)

HSB

hsb(37, 48%, 75%)

CMYK

cmyk(0%, 18%, 48%, 25%)

Oklch

oklch(71.2% 0.084 78.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CBE0A4

Willow Green · Silver · Apple Green

HEX

#CBE0A4

RGB

rgb(203, 224, 164)

HSL

hsl(81, 49%, 76%)

HSB

hsb(81, 27%, 88%)

CMYK

cmyk(9%, 0%, 27%, 12%)

Oklch

oklch(87.6% 0.082 123.7)

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

#CDE89C

Willow Green · Khaki · Apple Green

HEX

#CDE89C

RGB

rgb(205, 232, 156)

HSL

hsl(81, 62%, 76%)

HSB

hsb(81, 33%, 91%)

CMYK

cmyk(12%, 0%, 33%, 9%)

Oklch

oklch(89.3% 0.103 124.3)

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

#D7D6D1

Silver Gray · LightGray · Pearl Gray

HEX

#D7D6D1

RGB

rgb(215, 214, 209)

HSL

hsl(50, 7%, 83%)

HSB

hsb(50, 3%, 84%)

CMYK

cmyk(0%, 0%, 3%, 16%)

Oklch

oklch(87.5% 0.007 97.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D37F41

4196D2

Analogous

D2414D

D37F41

D2C641

Triadic

D37F41

41D27E

7E41D2

Split-Comp.

D37F41

41D2C6

414DD2

Tetradic

D37F41

4DD241

4196D2

C641D2

Contrast Matrix WCAG 2.1 Contrast

D37F41	BF9C64	CBE0A4	CDE89C	D7D6D1
—	1.2 Fail	2.1 Fail	2.3 Fail	2.1 Fail
1.2 Fail	—	1.8 Fail	1.9 Fail	1.8 Fail
2.1 Fail	1.8 Fail	—	1.1 Fail	1.0 Fail
2.3 Fail	1.9 Fail	1.1 Fail	—	1.1 Fail
2.1 Fail	1.8 Fail	1.0 Fail	1.1 Fail	—

White BG

3.1AA Large

2.6Fail

1.4Fail

1.3Fail

1.5Fail

Black BG

6.9AA

8.2AAA

14.7AAA

15.6AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE50

B0B072

D4D4B3

D9D9AE

D7D7D2

Deuteranopia

B4BA54

B2B575

D3D1B6

D7D5B3

D7D7D3

Tritanopia

CF5C5E

BD7C7F

CCBEC1

CEBDC0

D7D3D3

Achromatopsia

919191

A0A0A0

D3D3D3

D7D7D7

D6D6D6

Shades & Tints Shades & Tints

#D37F41

Dark

Light

#BF9C64

Dark

Light

#CBE0A4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d37f41;
  --color-2: #bf9c64;
  --color-3: #cbe0a4;
  --color-4: #cde89c;
  --color-5: #d7d6d1;
}

SCSS

$color-1: #d37f41;
$color-2: #bf9c64;
$color-3: #cbe0a4;
$color-4: #cde89c;
$color-5: #d7d6d1;

TAILWIND

colors: {
  'brand-1': '#d37f41',
  'brand-2': '#bf9c64',
  'brand-3': '#cbe0a4',
  'brand-4': '#cde89c',
  'brand-5': '#d7d6d1',
}

RGB Array

[211, 127, 65], [191, 156, 100], [203, 224, 164], [205, 232, 156], [215, 214, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D37F41, #BF9C64, #CBE0A4, #CDE89C, #D7D6D1 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: #d37f41; --color-2: #bf9c64; --color-3: #cbe0a4; --color-4: #cde89c; --color-5: #d7d6d1. 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