← Back to Editor

#9B8882 · #B37635 · #DE2137 · #88303C · #442F2E

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

#9B8882

Crimson · Gray · Passion Red

HEX
#9B8882
RGB
rgb(155, 136, 130)
HSL
hsl(14, 11%, 56%)
HSB
hsb(14, 16%, 61%)
CMYK
cmyk(0%, 12%, 16%, 39%)
Oklch
oklch(64.2% 0.025 38.3)

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

#B37635

Ochre · Chocolate · Amber Brown

HEX
#B37635
RGB
rgb(179, 118, 53)
HSL
hsl(31, 54%, 45%)
HSB
hsb(31, 70%, 70%)
CMYK
cmyk(0%, 34%, 70%, 30%)
Oklch
oklch(61.8% 0.111 64.7)

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

#DE2137

Vermilion · Crimson · Passion Red

HEX
#DE2137
RGB
rgb(222, 33, 55)
HSL
hsl(353, 74%, 50%)
HSB
hsb(353, 85%, 87%)
CMYK
cmyk(0%, 85%, 75%, 13%)
Oklch
oklch(58.0% 0.218 22.7)

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

#88303C

Crimson · Brown · Wine Red

HEX
#88303C
RGB
rgb(136, 48, 60)
HSL
hsl(352, 48%, 36%)
HSB
hsb(352, 65%, 53%)
CMYK
cmyk(0%, 65%, 56%, 47%)
Oklch
oklch(44.0% 0.120 15.4)

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

#442F2E

Crimson · DarkSlateGray · Wine Red

HEX
#442F2E
RGB
rgb(68, 47, 46)
HSL
hsl(3, 19%, 22%)
HSB
hsb(3, 32%, 27%)
CMYK
cmyk(0%, 31%, 32%, 73%)
Oklch
oklch(32.9% 0.031 22.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B8882
82959B

Analogous

9B8289
9B8882
9B9582

Triadic

9B8882
829B88
88829B

Split-Comp.

9B8882
829B95
82899B

Tetradic

9B8882
899B82
82959B
95829B

Contrast Matrix WCAG 2.1 Contrast

9B8882
B37635
DE2137
88303C
442F2E
—
1.1
Fail
1.4
Fail
2.5
Fail
3.7
AA Large
1.1
Fail
—
1.3
Fail
2.2
Fail
3.3
AA Large
1.4
Fail
1.3
Fail
—
1.7
Fail
2.6
Fail
2.5
Fail
2.2
Fail
1.7
Fail
—
1.5
Fail
3.7
AA Large
3.3
AA Large
2.6
Fail
1.5
Fail
—
White BG
3.4AA Large
3.8AA Large
4.8AA
8.3AAA
12.4AAA
Black BG
6.2AA
5.6AA
4.4AA Large
2.5Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

939383
999845
8C8A32
626139
3B3B2E

Deuteranopia

949584
9CA149
97A530
676E38
3C3E2E

Tritanopia

9A8585
B05154
D52D2D
843736
432E2E

Achromatopsia

8D8D8D
818181
5C5C5C
4C4C4C
353535

Shades & Tints Shades & Tints

#9B8882

Dark
Light

#B37635

Dark
Light

#DE2137

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b8882;
  --color-2: #b37635;
  --color-3: #de2137;
  --color-4: #88303c;
  --color-5: #442f2e;
}

SCSS

$color-1: #9b8882;
$color-2: #b37635;
$color-3: #de2137;
$color-4: #88303c;
$color-5: #442f2e;

TAILWIND

colors: {
  'brand-1': '#9b8882',
  'brand-2': '#b37635',
  'brand-3': '#de2137',
  'brand-4': '#88303c',
  'brand-5': '#442f2e',
}

RGB Array

[155, 136, 130], [179, 118, 53], [222, 33, 55], [136, 48, 60], [68, 47, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B8882, #B37635, #DE2137, #88303C, #442F2E 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: #9b8882; --color-2: #b37635; --color-3: #de2137; --color-4: #88303c; --color-5: #442f2e. 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