← Back to Editor

#B53033 · #3A2F2D · #5C735F · #909165 · #B3A163

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

#B53033

Crimson · Brown · Passion Red

HEX
#B53033
RGB
rgb(181, 48, 51)
HSL
hsl(359, 58%, 45%)
HSB
hsb(359, 73%, 71%)
CMYK
cmyk(0%, 73%, 72%, 29%)
Oklch
oklch(51.6% 0.170 24.3)

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

#3A2F2D

Crimson · DarkSlateGray · Deep Berry

HEX
#3A2F2D
RGB
rgb(58, 47, 45)
HSL
hsl(9, 13%, 20%)
HSB
hsb(9, 22%, 23%)
CMYK
cmyk(0%, 19%, 22%, 77%)
Oklch
oklch(31.7% 0.017 30.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#5C735F

Celadon · DimGray · Olive Green

HEX
#5C735F
RGB
rgb(92, 115, 95)
HSL
hsl(128, 11%, 41%)
HSB
hsb(128, 20%, 45%)
CMYK
cmyk(20%, 0%, 17%, 55%)
Oklch
oklch(53.1% 0.041 148.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#909165

Autumn Sage · Gray · Honey Gold

HEX
#909165
RGB
rgb(144, 145, 101)
HSL
hsl(61, 18%, 48%)
HSB
hsb(61, 30%, 57%)
CMYK
cmyk(1%, 0%, 30%, 43%)
Oklch
oklch(64.5% 0.062 109.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B3A163

Ginger · Tan · Sunflower

HEX
#B3A163
RGB
rgb(179, 161, 99)
HSL
hsl(47, 34%, 55%)
HSB
hsb(47, 45%, 70%)
CMYK
cmyk(0%, 10%, 45%, 30%)
Oklch
oklch(71.1% 0.084 93.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B53033
30B5B3

Analogous

B53075
B53033
B57130

Triadic

B53033
32B530
3032B5

Split-Comp.

B53033
30B571
3075B5

Tetradic

B53033
75B530
30B5B3
7130B5

Contrast Matrix WCAG 2.1 Contrast

B53033
3A2F2D
5C735F
909165
B3A163
—
2.1
Fail
1.2
Fail
1.9
Fail
2.4
Fail
2.1
Fail
—
2.5
Fail
4.0
AA Large
5.0
AA
1.2
Fail
2.5
Fail
—
1.6
Fail
2.0
Fail
1.9
Fail
4.0
AA Large
1.6
Fail
—
1.3
Fail
2.4
Fail
5.0
AA
2.0
Fail
1.3
Fail
—
White BG
6.1AA
12.9AAA
5.2AA
3.3AA Large
2.6Fail
Black BG
3.4AA Large
1.6Fail
4.1AA Large
6.4AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7A32
35352D
666664
909070
ABAB72

Deuteranopia

838D32
36372E
656365
909072
ACAE76

Tritanopia

AE3232
392E2E
5D6869
90787A
B27E80

Achromatopsia

585858
323232
6A6A6A
8C8C8C
9F9F9F

Shades & Tints Shades & Tints

#B53033

Dark
Light

#3A2F2D

Dark
Light

#5C735F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b53033;
  --color-2: #3a2f2d;
  --color-3: #5c735f;
  --color-4: #909165;
  --color-5: #b3a163;
}

SCSS

$color-1: #b53033;
$color-2: #3a2f2d;
$color-3: #5c735f;
$color-4: #909165;
$color-5: #b3a163;

TAILWIND

colors: {
  'brand-1': '#b53033',
  'brand-2': '#3a2f2d',
  'brand-3': '#5c735f',
  'brand-4': '#909165',
  'brand-5': '#b3a163',
}

RGB Array

[181, 48, 51], [58, 47, 45], [92, 115, 95], [144, 145, 101], [179, 161, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B53033, #3A2F2D, #5C735F, #909165, #B3A163 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: #b53033; --color-2: #3a2f2d; --color-3: #5c735f; --color-4: #909165; --color-5: #b3a163. 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. 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