← Back to Editor

#B8462C · #BE6A2E · #B7A57F · #D0C5B1 · #AC966D

warm

A 5-color warm 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

#B8462C

Vermilion · Sienna · Passion Red

HEX
#B8462C
RGB
rgb(184, 70, 44)
HSL
hsl(11, 61%, 45%)
HSB
hsb(11, 76%, 72%)
CMYK
cmyk(0%, 62%, 76%, 28%)
Oklch
oklch(54.5% 0.153 34.3)

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

#BE6A2E

Tangerine · Chocolate · Amber Brown

HEX
#BE6A2E
RGB
rgb(190, 106, 46)
HSL
hsl(25, 61%, 46%)
HSB
hsb(25, 76%, 75%)
CMYK
cmyk(0%, 44%, 76%, 25%)
Oklch
oklch(60.9% 0.129 52.8)

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

#B7A57F

Ginger · Tan · Sunflower

HEX
#B7A57F
RGB
rgb(183, 165, 127)
HSL
hsl(41, 28%, 61%)
HSB
hsb(41, 31%, 72%)
CMYK
cmyk(0%, 10%, 31%, 28%)
Oklch
oklch(72.8% 0.056 85.5)

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

#D0C5B1

Goose Yellow · Silver · Warm Sun

HEX
#D0C5B1
RGB
rgb(208, 197, 177)
HSL
hsl(39, 25%, 75%)
HSB
hsb(39, 15%, 82%)
CMYK
cmyk(0%, 5%, 15%, 18%)
Oklch
oklch(82.7% 0.030 82.6)

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

#AC966D

Ginger · Gray · Warm Sun

HEX
#AC966D
RGB
rgb(172, 150, 109)
HSL
hsl(39, 28%, 55%)
HSB
hsb(39, 37%, 67%)
CMYK
cmyk(0%, 13%, 37%, 33%)
Oklch
oklch(68.3% 0.062 82.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8462C
2D9FB9

Analogous

B92D59
B8462C
B98C2D

Triadic

B8462C
2DB946
462DB9

Split-Comp.

B8462C
2DB98C
2D59B9

Tetradic

B8462C
59B92D
2D9FB9
8C2DB9

Contrast Matrix WCAG 2.1 Contrast

B8462C
BE6A2E
B7A57F
D0C5B1
AC966D
—
1.3
Fail
2.2
Fail
3.1
AA Large
1.9
Fail
1.3
Fail
—
1.6
Fail
2.3
Fail
1.4
Fail
2.2
Fail
1.6
Fail
—
1.4
Fail
1.2
Fail
3.1
AA Large
2.3
Fail
1.4
Fail
—
1.7
Fail
1.9
Fail
1.4
Fail
1.2
Fail
1.7
Fail
—
White BG
5.3AA
4.0AA Large
2.4Fail
1.7Fail
2.9Fail
Black BG
4.0AA Large
5.3AA
8.7AAA
12.3AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878632
9A993D
AFAF88
CBCBB6
A2A277

Deuteranopia

8D9634
9FA540
B0B28A
CCCDB7
A4A579

Tritanopia

B23738
BA484B
B68F91
CFBABB
AB7F80

Achromatopsia

656565
7C7C7C
A6A6A6
C6C6C6
989898

Shades & Tints Shades & Tints

#B8462C

Dark
Light

#BE6A2E

Dark
Light

#B7A57F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8462c;
  --color-2: #be6a2e;
  --color-3: #b7a57f;
  --color-4: #d0c5b1;
  --color-5: #ac966d;
}

SCSS

$color-1: #b8462c;
$color-2: #be6a2e;
$color-3: #b7a57f;
$color-4: #d0c5b1;
$color-5: #ac966d;

TAILWIND

colors: {
  'brand-1': '#b8462c',
  'brand-2': '#be6a2e',
  'brand-3': '#b7a57f',
  'brand-4': '#d0c5b1',
  'brand-5': '#ac966d',
}

RGB Array

[184, 70, 44], [190, 106, 46], [183, 165, 127], [208, 197, 177], [172, 150, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B8462C, #BE6A2E, #B7A57F, #D0C5B1, #AC966D 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: #b8462c; --color-2: #be6a2e; --color-3: #b7a57f; --color-4: #d0c5b1; --color-5: #ac966d. 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 warm-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