← Back to Editor

#96857A · #877562 · #615447 · #87563E · #B57600

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

#96857A

Tangerine · Gray · Warm Sun

HEX
#96857A
RGB
rgb(150, 133, 122)
HSL
hsl(24, 12%, 53%)
HSB
hsb(24, 19%, 59%)
CMYK
cmyk(0%, 11%, 19%, 41%)
Oklch
oklch(62.9% 0.026 55.0)

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

#877562

Ochre · Gray · Amber Brown

HEX
#877562
RGB
rgb(135, 117, 98)
HSL
hsl(31, 16%, 46%)
HSB
hsb(31, 27%, 53%)
CMYK
cmyk(0%, 13%, 27%, 47%)
Oklch
oklch(57.4% 0.036 68.5)

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

#615447

Ochre · DarkOliveGreen · Amber Brown

HEX
#615447
RGB
rgb(97, 84, 71)
HSL
hsl(30, 15%, 33%)
HSB
hsb(30, 27%, 38%)
CMYK
cmyk(0%, 13%, 27%, 62%)
Oklch
oklch(45.5% 0.027 67.1)

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

#87563E

Tangerine · Sienna · Amber Brown

HEX
#87563E
RGB
rgb(135, 86, 62)
HSL
hsl(20, 37%, 39%)
HSB
hsb(20, 54%, 53%)
CMYK
cmyk(0%, 36%, 54%, 47%)
Oklch
oklch(50.2% 0.075 46.6)

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

#B57600

Ochre · DarkGoldenRod · Amber Brown

HEX
#B57600
RGB
rgb(181, 118, 0)
HSL
hsl(39, 100%, 35%)
HSB
hsb(39, 100%, 71%)
CMYK
cmyk(0%, 35%, 100%, 29%)
Oklch
oklch(61.7% 0.132 72.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96857A
798A96

Analogous

96797C
96857A
969379

Triadic

96857A
799684
847996

Split-Comp.

96857A
799693
797C96

Tetradic

96857A
7C9679
798A96
937996

Contrast Matrix WCAG 2.1 Contrast

96857A
877562
615447
87563E
B57600
—
1.2
Fail
2.1
Fail
1.7
Fail
1.1
Fail
1.2
Fail
—
1.7
Fail
1.4
Fail
1.2
Fail
2.1
Fail
1.7
Fail
—
1.2
Fail
1.9
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.6
Fail
1.1
Fail
1.2
Fail
1.9
Fail
1.6
Fail
—
White BG
3.5AA Large
4.4AA Large
7.3AAA
6.1AA
3.8AA Large
Black BG
5.9AA
4.8AA
2.9Fail
3.4AA Large
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8E7D
7F7F67
5B5B4A
727144
9A991D

Deuteranopia

90917D
808268
5C5D4B
757845
9DA223

Tritanopia

957F7F
866A6B
604D4D
854849
B23338

Achromatopsia

898989
787878
565656
626262
7B7B7B

Shades & Tints Shades & Tints

#96857A

Dark
Light

#877562

Dark
Light

#615447

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96857a;
  --color-2: #877562;
  --color-3: #615447;
  --color-4: #87563e;
  --color-5: #b57600;
}

SCSS

$color-1: #96857a;
$color-2: #877562;
$color-3: #615447;
$color-4: #87563e;
$color-5: #b57600;

TAILWIND

colors: {
  'brand-1': '#96857a',
  'brand-2': '#877562',
  'brand-3': '#615447',
  'brand-4': '#87563e',
  'brand-5': '#b57600',
}

RGB Array

[150, 133, 122], [135, 117, 98], [97, 84, 71], [135, 86, 62], [181, 118, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #96857A, #877562, #615447, #87563E, #B57600 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: #96857a; --color-2: #877562; --color-3: #615447; --color-4: #87563e; --color-5: #b57600. 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