← Back to Editor

#D7B470 · #D4A368 · #D18959 · #BB5B43 · #97222B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D7B470

Ginger · BurlyWood · Sunflower

HEX
#D7B470
RGB
rgb(215, 180, 112)
HSL
hsl(40, 56%, 64%)
HSB
hsb(40, 48%, 84%)
CMYK
cmyk(0%, 16%, 48%, 16%)
Oklch
oklch(78.6% 0.096 83.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D4A368

Ginger · DarkSalmon · Warm Sun

HEX
#D4A368
RGB
rgb(212, 163, 104)
HSL
hsl(33, 56%, 62%)
HSB
hsb(33, 51%, 83%)
CMYK
cmyk(0%, 23%, 51%, 17%)
Oklch
oklch(74.8% 0.096 70.7)

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

#D18959

Tangerine · DarkSalmon · Warm Sun

HEX
#D18959
RGB
rgb(209, 137, 89)
HSL
hsl(24, 57%, 58%)
HSB
hsb(24, 57%, 82%)
CMYK
cmyk(0%, 34%, 57%, 18%)
Oklch
oklch(69.4% 0.109 53.7)

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

#BB5B43

Crimson · Sienna · Passion Red

HEX
#BB5B43
RGB
rgb(187, 91, 67)
HSL
hsl(12, 47%, 50%)
HSB
hsb(12, 64%, 73%)
CMYK
cmyk(0%, 51%, 64%, 27%)
Oklch
oklch(58.3% 0.130 35.2)

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

#97222B

Vermilion · Brown · Wine Red

HEX
#97222B
RGB
rgb(151, 34, 43)
HSL
hsl(355, 63%, 36%)
HSB
hsb(355, 77%, 59%)
CMYK
cmyk(0%, 77%, 72%, 41%)
Oklch
oklch(44.8% 0.152 22.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7B470
7092D7

Analogous

D78170
D7B470
C5D770

Triadic

D7B470
70D7B4
B470D7

Split-Comp.

D7B470
70C5D7
8170D7

Tetradic

D7B470
70D781
7092D7
D770C5

Contrast Matrix WCAG 2.1 Contrast

D7B470
D4A368
D18959
BB5B43
97222B
—
1.2
Fail
1.4
Fail
2.3
Fail
4.1
AA Large
1.2
Fail
—
1.2
Fail
2.0
Fail
3.6
AA Large
1.4
Fail
1.2
Fail
—
1.6
Fail
2.9
Fail
2.3
Fail
2.0
Fail
1.6
Fail
—
1.8
Fail
4.1
AA Large
3.6
AA Large
2.9
Fail
1.8
Fail
—
White BG
2.0Fail
2.3Fail
2.8Fail
4.5AA Large
8.1AAA
Black BG
10.7AAA
9.2AAA
7.4AAA
4.7AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C880
BFBE76
B2B165
919149
646329

Deuteranopia

CACD84
C2C57A
B6BB67
979E4A
6B7428

Tritanopia

D58D90
D28284
CD6E70
B64D4E
912727

Achromatopsia

B7B7B7
ABABAB
999999
757575
464646

Shades & Tints Shades & Tints

#D7B470

Dark
Light

#D4A368

Dark
Light

#D18959

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7b470;
  --color-2: #d4a368;
  --color-3: #d18959;
  --color-4: #bb5b43;
  --color-5: #97222b;
}

SCSS

$color-1: #d7b470;
$color-2: #d4a368;
$color-3: #d18959;
$color-4: #bb5b43;
$color-5: #97222b;

TAILWIND

colors: {
  'brand-1': '#d7b470',
  'brand-2': '#d4a368',
  'brand-3': '#d18959',
  'brand-4': '#bb5b43',
  'brand-5': '#97222b',
}

RGB Array

[215, 180, 112], [212, 163, 104], [209, 137, 89], [187, 91, 67], [151, 34, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7B470, #D4A368, #D18959, #BB5B43, #97222B is ideal for: corporate websites, product showcases, portfolios. 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: #d7b470; --color-2: #d4a368; --color-3: #d18959; --color-4: #bb5b43; --color-5: #97222b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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