#D96C4B + #F3A581 + #FFF7D3 + #D5D5B1 + #B7BAB1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D96C4B

Vermilion · Tomato · Passion Red

HEX

#D96C4B

RGB

rgb(217, 108, 75)

HSL

hsl(14, 65%, 57%)

HSB

hsb(14, 65%, 85%)

CMYK

cmyk(0%, 50%, 65%, 15%)

Oklch

oklch(65.3% 0.145 37.6)

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

#F3A581

Apricot · LightSalmon · Warm Sun

HEX

#F3A581

RGB

rgb(243, 165, 129)

HSL

hsl(19, 83%, 73%)

HSB

hsb(19, 47%, 95%)

CMYK

cmyk(0%, 32%, 47%, 5%)

Oklch

oklch(79.0% 0.105 45.5)

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

#FFF7D3

Goose Yellow · Beige · Lemon Cream

HEX

#FFF7D3

RGB

rgb(255, 247, 211)

HSL

hsl(49, 100%, 91%)

HSB

hsb(49, 17%, 100%)

CMYK

cmyk(0%, 3%, 17%, 0%)

Oklch

oklch(97.3% 0.047 96.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D5D5B1

Fresh Green · Silver · Lemon Cream

HEX

#D5D5B1

RGB

rgb(213, 213, 177)

HSL

hsl(60, 30%, 76%)

HSB

hsb(60, 17%, 84%)

CMYK

cmyk(0%, 0%, 17%, 16%)

Oklch

oklch(86.4% 0.048 107.4)

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

#B7BAB1

Silver Gray · Silver · Pearl Gray

HEX

#B7BAB1

RGB

rgb(183, 186, 177)

HSL

hsl(80, 6%, 71%)

HSB

hsb(80, 5%, 73%)

CMYK

cmyk(2%, 0%, 5%, 27%)

Oklch

oklch(78.4% 0.013 121.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D96C4B

4AB7D9

Analogous

D94A70

D96C4B

D9B34A

Triadic

D96C4B

4AD96B

6B4AD9

Split-Comp.

D96C4B

4AD9B3

4A70D9

Tetradic

D96C4B

70D94A

4AB7D9

B34AD9

Contrast Matrix WCAG 2.1 Contrast

D96C4B	F3A581	FFF7D3	D5D5B1	B7BAB1
—	1.7 Fail	3.1 AA Large	2.3 Fail	1.7 Fail
1.7 Fail	—	1.9 Fail	1.3 Fail	1.0 Fail
3.1 AA Large	1.9 Fail	—	1.4 Fail	1.8 Fail
2.3 Fail	1.3 Fail	1.4 Fail	—	1.3 Fail
1.7 Fail	1.0 Fail	1.8 Fail	1.3 Fail	—

White BG

3.4AA Large

2.0Fail

1.1Fail

1.5Fail

2.0Fail

Black BG

6.2AA

10.5AAA

19.5AAA

14.0AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA953

D1D18A

FCFBDC

D5D5BA

B8B8B3

Deuteranopia

B0B855

D6DC8C

FCFDDE

D5D5BC

B8B8B4

Tritanopia

D4595B

EF9192

FFE3E4

D5C1C2

B7B5B5

Achromatopsia

898989

B8B8B8

F5F5F5

D1D1D1

B8B8B8

Shades & Tints Shades & Tints

#D96C4B

Dark

Light

#F3A581

Dark

Light

#FFF7D3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d96c4b;
  --color-2: #f3a581;
  --color-3: #fff7d3;
  --color-4: #d5d5b1;
  --color-5: #b7bab1;
}

SCSS

$color-1: #d96c4b;
$color-2: #f3a581;
$color-3: #fff7d3;
$color-4: #d5d5b1;
$color-5: #b7bab1;

TAILWIND

colors: {
  'brand-1': '#d96c4b',
  'brand-2': '#f3a581',
  'brand-3': '#fff7d3',
  'brand-4': '#d5d5b1',
  'brand-5': '#b7bab1',
}

RGB Array

[217, 108, 75], [243, 165, 129], [255, 247, 211], [213, 213, 177], [183, 186, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D96C4B, #F3A581, #FFF7D3, #D5D5B1, #B7BAB1 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: #d96c4b; --color-2: #f3a581; --color-3: #fff7d3; --color-4: #d5d5b1; --color-5: #b7bab1. 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