← Back to Editor

#311E22 · #534447 · #966142 · #AA7958 · #D5D2A9

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

#311E22

Crimson · DarkSlateGray · Deep Berry

HEX
#311E22
RGB
rgb(49, 30, 34)
HSL
hsl(347, 24%, 15%)
HSB
hsb(347, 39%, 19%)
CMYK
cmyk(0%, 39%, 31%, 81%)
Oklch
oklch(26.1% 0.030 5.6)

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

#534447

Crimson · DarkSlateGray · Wine Red

HEX
#534447
RGB
rgb(83, 68, 71)
HSL
hsl(348, 10%, 30%)
HSB
hsb(348, 18%, 33%)
CMYK
cmyk(0%, 18%, 14%, 67%)
Oklch
oklch(40.3% 0.021 4.6)

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

#966142

Tangerine · Sienna · Amber Brown

HEX
#966142
RGB
rgb(150, 97, 66)
HSL
hsl(22, 39%, 42%)
HSB
hsb(22, 56%, 59%)
CMYK
cmyk(0%, 35%, 56%, 41%)
Oklch
oklch(54.3% 0.082 50.6)

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

#AA7958

Tangerine · Gray · Warm Sun

HEX
#AA7958
RGB
rgb(170, 121, 88)
HSL
hsl(24, 33%, 51%)
HSB
hsb(24, 48%, 67%)
CMYK
cmyk(0%, 29%, 48%, 33%)
Oklch
oklch(61.8% 0.077 54.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D5D2A9

Fresh Green · Wheat · Sunflower

HEX
#D5D2A9
RGB
rgb(213, 210, 169)
HSL
hsl(56, 34%, 75%)
HSB
hsb(56, 21%, 84%)
CMYK
cmyk(0%, 1%, 21%, 16%)
Oklch
oklch(85.6% 0.055 104.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

311E22
1D2F2B

Analogous

2F1D2A
311E22
2F221D

Triadic

311E22
212F1D
1D212F

Split-Comp.

311E22
1D2F22
1D2A2F

Tetradic

311E22
2A2F1D
1D2F2B
221D2F

Contrast Matrix WCAG 2.1 Contrast

311E22
534447
966142
AA7958
D5D2A9
—
1.7
Fail
3.1
AA Large
4.2
AA Large
10.2
AAA
1.7
Fail
—
1.8
Fail
2.4
Fail
6.0
AA
3.1
AA Large
1.8
Fail
—
1.4
Fail
3.3
AA Large
4.2
AA Large
2.4
Fail
1.4
Fail
—
2.4
Fail
10.2
AAA
6.0
AA
3.3
AA Large
2.4
Fail
—
White BG
15.7AAA
9.2AAA
5.1AA
3.8AA Large
1.5Fail
Black BG
1.3Fail
2.3Fail
4.1AA Large
5.6AA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292921
4D4C46
7F7F4A
959460
D4D4B3

Deuteranopia

2A2B21
4D4F46
82864B
989B62
D4D4B5

Tritanopia

302020
524646
934F51
A86668
D5BBBC

Achromatopsia

242424
494949
6D6D6D
848484
CECECE

Shades & Tints Shades & Tints

#311E22

Dark
Light

#534447

Dark
Light

#966142

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #311e22;
  --color-2: #534447;
  --color-3: #966142;
  --color-4: #aa7958;
  --color-5: #d5d2a9;
}

SCSS

$color-1: #311e22;
$color-2: #534447;
$color-3: #966142;
$color-4: #aa7958;
$color-5: #d5d2a9;

TAILWIND

colors: {
  'brand-1': '#311e22',
  'brand-2': '#534447',
  'brand-3': '#966142',
  'brand-4': '#aa7958',
  'brand-5': '#d5d2a9',
}

RGB Array

[49, 30, 34], [83, 68, 71], [150, 97, 66], [170, 121, 88], [213, 210, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #311E22, #534447, #966142, #AA7958, #D5D2A9 is ideal for: brand design, premium product pages, magazine layouts, 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: #311e22; --color-2: #534447; --color-3: #966142; --color-4: #aa7958; --color-5: #d5d2a9. 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. 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