← Back to Editor

#852A2C · #332E29 · #686B4E · #B0BF71 · #4A6E3F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#852A2C

Crimson · Brown · Wine Red

HEX
#852A2C
RGB
rgb(133, 42, 44)
HSL
hsl(359, 52%, 34%)
HSB
hsb(359, 68%, 52%)
CMYK
cmyk(0%, 68%, 67%, 48%)
Oklch
oklch(42.4% 0.125 23.0)

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

#332E29

Ochre · DarkSlateGray · Cinnamon

HEX
#332E29
RGB
rgb(51, 46, 41)
HSL
hsl(30, 11%, 18%)
HSB
hsb(30, 20%, 20%)
CMYK
cmyk(0%, 10%, 20%, 80%)
Oklch
oklch(30.5% 0.011 67.4)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#686B4E

Autumn Sage · DimGray · Honey Gold

HEX
#686B4E
RGB
rgb(104, 107, 78)
HSL
hsl(66, 16%, 36%)
HSB
hsb(66, 27%, 42%)
CMYK
cmyk(3%, 0%, 27%, 58%)
Oklch
oklch(51.7% 0.044 112.7)

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

#B0BF71

Grass Green · DarkSeaGreen · Olive Green

HEX
#B0BF71
RGB
rgb(176, 191, 113)
HSL
hsl(72, 38%, 60%)
HSB
hsb(72, 41%, 75%)
CMYK
cmyk(8%, 0%, 41%, 25%)
Oklch
oklch(77.5% 0.103 117.8)

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

#4A6E3F

Celadon · DarkOliveGreen · Forest Green

HEX
#4A6E3F
RGB
rgb(74, 110, 63)
HSL
hsl(106, 27%, 34%)
HSB
hsb(106, 43%, 43%)
CMYK
cmyk(33%, 0%, 43%, 57%)
Oklch
oklch(49.8% 0.083 138.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

852A2C
2A8482

Analogous

842A58
852A2C
84552A

Triadic

852A2C
2B842A
2A2B84

Split-Comp.

852A2C
2A8455
2A5884

Tetradic

852A2C
58842A
2A8482
552A84

Contrast Matrix WCAG 2.1 Contrast

852A2C
332E29
686B4E
B0BF71
4A6E3F
—
1.5
Fail
1.6
Fail
4.5
AA Large
1.5
Fail
1.5
Fail
—
2.4
Fail
6.7
AA
2.3
Fail
1.6
Fail
2.4
Fail
—
2.8
Fail
1.1
Fail
4.5
AA Large
6.7
AA
2.8
Fail
—
2.9
Fail
1.5
Fail
2.3
Fail
1.1
Fail
2.9
Fail
—
White BG
8.9AAA
13.4AAA
5.5AA
2.0Fail
5.8AA
Black BG
2.4Fail
1.6Fail
3.8AA Large
10.5AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5D2C
31312A
696955
B6B784
5A5A4A

Deuteranopia

636A2B
31312B
696957
B6B588
58554D

Tritanopia

802B2B
332B2B
685B5C
B19396
4C5355

Achromatopsia

454545
2F2F2F
676767
B2B2B2
5E5E5E

Shades & Tints Shades & Tints

#852A2C

Dark
Light

#332E29

Dark
Light

#686B4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #852a2c;
  --color-2: #332e29;
  --color-3: #686b4e;
  --color-4: #b0bf71;
  --color-5: #4a6e3f;
}

SCSS

$color-1: #852a2c;
$color-2: #332e29;
$color-3: #686b4e;
$color-4: #b0bf71;
$color-5: #4a6e3f;

TAILWIND

colors: {
  'brand-1': '#852a2c',
  'brand-2': '#332e29',
  'brand-3': '#686b4e',
  'brand-4': '#b0bf71',
  'brand-5': '#4a6e3f',
}

RGB Array

[133, 42, 44], [51, 46, 41], [104, 107, 78], [176, 191, 113], [74, 110, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #852A2C, #332E29, #686B4E, #B0BF71, #4A6E3F is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #852a2c; --color-2: #332e29; --color-3: #686b4e; --color-4: #b0bf71; --color-5: #4a6e3f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. 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 finance, legal, luxury 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