← Back to Editor

#96814B · #8D5940 · #F3B0A2 · #DEA083 · #B97568

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

#96814B

Ochre · Sienna · Honey Gold

HEX
#96814B
RGB
rgb(150, 129, 75)
HSL
hsl(43, 33%, 44%)
HSB
hsb(43, 50%, 59%)
CMYK
cmyk(0%, 14%, 50%, 41%)
Oklch
oklch(61.0% 0.077 88.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8D5940

Tangerine · Sienna · Amber Brown

HEX
#8D5940
RGB
rgb(141, 89, 64)
HSL
hsl(19, 38%, 40%)
HSB
hsb(19, 55%, 55%)
CMYK
cmyk(0%, 37%, 55%, 45%)
Oklch
oklch(51.6% 0.078 46.2)

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

#F3B0A2

Peach Pink · LightPink · Coral Red

HEX
#F3B0A2
RGB
rgb(243, 176, 162)
HSL
hsl(10, 77%, 79%)
HSB
hsb(10, 33%, 95%)
CMYK
cmyk(0%, 28%, 33%, 5%)
Oklch
oklch(81.6% 0.082 32.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DEA083

Apricot · DarkSalmon · Warm Sun

HEX
#DEA083
RGB
rgb(222, 160, 131)
HSL
hsl(19, 58%, 69%)
HSB
hsb(19, 41%, 87%)
CMYK
cmyk(0%, 28%, 41%, 13%)
Oklch
oklch(75.8% 0.084 46.0)

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

#B97568

Crimson · DarkSalmon · Passion Red

HEX
#B97568
RGB
rgb(185, 117, 104)
HSL
hsl(10, 37%, 57%)
HSB
hsb(10, 44%, 73%)
CMYK
cmyk(0%, 37%, 44%, 27%)
Oklch
oklch(63.1% 0.089 31.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96814B
4B6095

Analogous

955B4B
96814B
85954B

Triadic

96814B
4B9580
804B95

Split-Comp.

96814B
4B8595
5B4B95

Tetradic

96814B
4B955B
4B6095
954B85

Contrast Matrix WCAG 2.1 Contrast

96814B
8D5940
F3B0A2
DEA083
B97568
—
1.5
Fail
2.1
Fail
1.7
Fail
1.0
Fail
1.5
Fail
—
3.2
AA Large
2.6
Fail
1.6
Fail
2.1
Fail
3.2
AA Large
—
1.2
Fail
2.0
Fail
1.7
Fail
2.6
Fail
1.2
Fail
—
1.6
Fail
1.0
Fail
1.6
Fail
2.0
Fail
1.6
Fail
—
White BG
3.8AA Large
5.8AA
1.8Fail
2.2Fail
3.6AA Large
Black BG
5.5AA
3.6AA Large
11.5AAA
9.5AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8D58
767646
D6D5A5
C3C38A
9C9B6B

Deuteranopia

8E905B
7A7D48
DADFA6
C7CB8C
A0A56C

Tritanopia

956265
8A4B4C
F0A8A9
DB9091
B66E6E

Achromatopsia

818181
666666
C2C2C2
AFAFAF
888888

Shades & Tints Shades & Tints

#96814B

Dark
Light

#8D5940

Dark
Light

#F3B0A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96814b;
  --color-2: #8d5940;
  --color-3: #f3b0a2;
  --color-4: #dea083;
  --color-5: #b97568;
}

SCSS

$color-1: #96814b;
$color-2: #8d5940;
$color-3: #f3b0a2;
$color-4: #dea083;
$color-5: #b97568;

TAILWIND

colors: {
  'brand-1': '#96814b',
  'brand-2': '#8d5940',
  'brand-3': '#f3b0a2',
  'brand-4': '#dea083',
  'brand-5': '#b97568',
}

RGB Array

[150, 129, 75], [141, 89, 64], [243, 176, 162], [222, 160, 131], [185, 117, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #96814B, #8D5940, #F3B0A2, #DEA083, #B97568 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: #96814b; --color-2: #8d5940; --color-3: #f3b0a2; --color-4: #dea083; --color-5: #b97568. 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