← Back to Editor

#31331D · #840532 · #81754B · #CAC180 · #FBF8A9

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 LibraryData Visualization

Color Details Color Details

#31331D

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#31331D
RGB
rgb(49, 51, 29)
HSL
hsl(65, 28%, 16%)
HSB
hsb(65, 43%, 20%)
CMYK
cmyk(4%, 0%, 43%, 80%)
Oklch
oklch(31.3% 0.036 112.7)

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

#840532

Dark Violet · Brown · Camellia

HEX
#840532
RGB
rgb(132, 5, 50)
HSL
hsl(339, 93%, 27%)
HSB
hsb(339, 96%, 52%)
CMYK
cmyk(0%, 96%, 62%, 48%)
Oklch
oklch(39.4% 0.154 10.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#81754B

Ochre · DimGray · Honey Gold

HEX
#81754B
RGB
rgb(129, 117, 75)
HSL
hsl(47, 26%, 40%)
HSB
hsb(47, 42%, 51%)
CMYK
cmyk(0%, 9%, 42%, 49%)
Oklch
oklch(56.3% 0.061 94.0)

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

#CAC180

Fresh Green · Tan · Sunflower

HEX
#CAC180
RGB
rgb(202, 193, 128)
HSL
hsl(53, 41%, 65%)
HSB
hsb(53, 37%, 79%)
CMYK
cmyk(0%, 4%, 37%, 21%)
Oklch
oklch(80.3% 0.085 101.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FBF8A9

Fresh Green · Wheat · Lemon Cream

HEX
#FBF8A9
RGB
rgb(251, 248, 169)
HSL
hsl(58, 91%, 82%)
HSB
hsb(58, 33%, 98%)
CMYK
cmyk(0%, 1%, 33%, 2%)
Oklch
oklch(96.4% 0.099 106.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

31331D
1F1D34

Analogous

342B1D
31331D
27341D

Triadic

31331D
1D3234
341D32

Split-Comp.

31331D
1D2734
2B1D34

Tetradic

31331D
1D342B
1F1D34
341D27

Contrast Matrix WCAG 2.1 Contrast

31331D
840532
81754B
CAC180
FBF8A9
—
1.3
Fail
2.8
Fail
7.1
AAA
11.8
AAA
1.3
Fail
—
2.2
Fail
5.6
AA
9.3
AAA
2.8
Fail
2.2
Fail
—
2.5
Fail
4.2
AA Large
7.1
AAA
5.6
AA
2.5
Fail
—
1.7
Fail
11.8
AAA
9.3
AAA
4.2
AA Large
1.7
Fail
—
White BG
12.9AAA
10.2AAA
4.6AA
1.8Fail
1.1Fail
Black BG
1.6Fail
2.0Fail
4.6AA
11.5AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

323222
4D4C27
7C7C55
C6C690
FAFABC

Deuteranopia

323224
545E25
7D7D58
C7C794
FAFAC1

Tritanopia

312727
7E1F1D
805D5F
CA9C9F
FBCBCF

Achromatopsia

303030
303030
747474
BCBCBC
F0F0F0

Shades & Tints Shades & Tints

#31331D

Dark
Light

#840532

Dark
Light

#81754B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #31331d;
  --color-2: #840532;
  --color-3: #81754b;
  --color-4: #cac180;
  --color-5: #fbf8a9;
}

SCSS

$color-1: #31331d;
$color-2: #840532;
$color-3: #81754b;
$color-4: #cac180;
$color-5: #fbf8a9;

TAILWIND

colors: {
  'brand-1': '#31331d',
  'brand-2': '#840532',
  'brand-3': '#81754b',
  'brand-4': '#cac180',
  'brand-5': '#fbf8a9',
}

RGB Array

[49, 51, 29], [132, 5, 50], [129, 117, 75], [202, 193, 128], [251, 248, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #31331D, #840532, #81754B, #CAC180, #FBF8A9 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #31331d; --color-2: #840532; --color-3: #81754b; --color-4: #cac180; --color-5: #fbf8a9. 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. 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 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