← Back to Editor

#97876E · #8F715B · #8A5C54 · #884551 · #803451

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

#97876E

Ginger · Gray · Warm Sun

HEX
#97876E
RGB
rgb(151, 135, 110)
HSL
hsl(37, 16%, 51%)
HSB
hsb(37, 27%, 59%)
CMYK
cmyk(0%, 11%, 27%, 41%)
Oklch
oklch(63.1% 0.041 78.9)

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

#8F715B

Tangerine · DimGray · Amber Brown

HEX
#8F715B
RGB
rgb(143, 113, 91)
HSL
hsl(25, 22%, 46%)
HSB
hsb(25, 36%, 56%)
CMYK
cmyk(0%, 21%, 36%, 44%)
Oklch
oklch(57.2% 0.050 57.8)

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

#8A5C54

Crimson · DimGray · Passion Red

HEX
#8A5C54
RGB
rgb(138, 92, 84)
HSL
hsl(9, 24%, 44%)
HSB
hsb(9, 39%, 54%)
CMYK
cmyk(0%, 33%, 39%, 46%)
Oklch
oklch(52.2% 0.062 30.2)

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

#884551

Crimson · Sienna · Wine Red

HEX
#884551
RGB
rgb(136, 69, 81)
HSL
hsl(349, 33%, 40%)
HSB
hsb(349, 49%, 53%)
CMYK
cmyk(0%, 49%, 40%, 47%)
Oklch
oklch(47.7% 0.092 9.8)

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

#803451

Dark Violet · Brown · Camellia

HEX
#803451
RGB
rgb(128, 52, 81)
HSL
hsl(337, 42%, 35%)
HSB
hsb(337, 59%, 50%)
CMYK
cmyk(0%, 59%, 37%, 50%)
Oklch
oklch(43.9% 0.110 358.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97876E
6E7D96

Analogous

96736E
97876E
91966E

Triadic

97876E
6E9687
876E96

Split-Comp.

97876E
6E9196
736E96

Tetradic

97876E
6E9673
6E7D96
966E91

Contrast Matrix WCAG 2.1 Contrast

97876E
8F715B
8A5C54
884551
803451
—
1.3
Fail
1.6
Fail
2.0
Fail
2.4
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
2.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
3.5AA Large
4.5AA Large
5.6AA
7.0AA
8.3AAA
Black BG
6.0AA
4.7AA
3.7AA Large
3.0AA Large
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

909074
828260
767656
6B6A4E
5F5E4A

Deuteranopia

919276
848662
797C56
6F744D
646948

Tritanopia

96797A
8E6565
885758
854C4B
7C4443

Achromatopsia

898989
777777
696969
5A5A5A
4E4E4E

Shades & Tints Shades & Tints

#97876E

Dark
Light

#8F715B

Dark
Light

#8A5C54

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97876e;
  --color-2: #8f715b;
  --color-3: #8a5c54;
  --color-4: #884551;
  --color-5: #803451;
}

SCSS

$color-1: #97876e;
$color-2: #8f715b;
$color-3: #8a5c54;
$color-4: #884551;
$color-5: #803451;

TAILWIND

colors: {
  'brand-1': '#97876e',
  'brand-2': '#8f715b',
  'brand-3': '#8a5c54',
  'brand-4': '#884551',
  'brand-5': '#803451',
}

RGB Array

[151, 135, 110], [143, 113, 91], [138, 92, 84], [136, 69, 81], [128, 52, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #97876E, #8F715B, #8A5C54, #884551, #803451 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #97876e; --color-2: #8f715b; --color-3: #8a5c54; --color-4: #884551; --color-5: #803451. 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. Restrained colors convey professionalism and trust. 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