← Back to Editor

#311C25 · #BA2C16 · #B38466 · #E6D6BC · #96A588

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

#311C25

Dark Violet · DarkSlateGray · Raspberry

HEX
#311C25
RGB
rgb(49, 28, 37)
HSL
hsl(334, 27%, 15%)
HSB
hsb(334, 43%, 19%)
CMYK
cmyk(0%, 43%, 24%, 81%)
Oklch
oklch(25.8% 0.036 352.6)

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

#BA2C16

Vermilion · FireBrick · Passion Red

HEX
#BA2C16
RGB
rgb(186, 44, 22)
HSL
hsl(8, 79%, 41%)
HSB
hsb(8, 88%, 73%)
CMYK
cmyk(0%, 76%, 88%, 27%)
Oklch
oklch(51.8% 0.182 31.7)

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

#B38466

Tangerine · Gray · Warm Sun

HEX
#B38466
RGB
rgb(179, 132, 102)
HSL
hsl(23, 34%, 55%)
HSB
hsb(23, 43%, 70%)
CMYK
cmyk(0%, 26%, 43%, 30%)
Oklch
oklch(65.2% 0.072 53.6)

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

#E6D6BC

Goose Yellow · Wheat · Peach Orange

HEX
#E6D6BC
RGB
rgb(230, 214, 188)
HSL
hsl(37, 46%, 82%)
HSB
hsb(37, 18%, 90%)
CMYK
cmyk(0%, 7%, 18%, 10%)
Oklch
oklch(88.2% 0.039 80.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#96A588

Celadon · DarkSeaGreen · Olive Green

HEX
#96A588
RGB
rgb(150, 165, 136)
HSL
hsl(91, 14%, 59%)
HSB
hsb(91, 18%, 65%)
CMYK
cmyk(9%, 0%, 18%, 35%)
Oklch
oklch(70.2% 0.045 129.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

311C25
1C3128

Analogous

311C2F
311C25
311D1C

Triadic

311C25
25311C
1C2531

Split-Comp.

311C25
1C311D
1C2F31

Tetradic

311C25
2F311C
1C3128
1D1C31

Contrast Matrix WCAG 2.1 Contrast

311C25
BA2C16
B38466
E6D6BC
96A588
—
2.6
Fail
4.8
AA
11.1
AAA
6.1
AA
2.6
Fail
—
1.9
Fail
4.3
AA Large
2.3
Fail
4.8
AA
1.9
Fail
—
2.3
Fail
1.3
Fail
11.1
AAA
4.3
AA Large
2.3
Fail
—
1.8
Fail
6.1
AA
2.3
Fail
1.3
Fail
1.8
Fail
—
White BG
15.9AAA
6.1AA
3.3AA Large
1.4Fail
2.6Fail
Black BG
1.3Fail
3.5AA Large
6.4AA
14.7AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282823
7D7B1B
9F9E6D
DFDFC2
9C9D8F

Deuteranopia

292B22
858F1D
A1A56F
E0E1C4
9C9B91

Tritanopia

302121
B32020
B17374
E5C7C8
979596

Achromatopsia

232323
545454
8F8F8F
D8D8D8
9D9D9D

Shades & Tints Shades & Tints

#311C25

Dark
Light

#BA2C16

Dark
Light

#B38466

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #311c25;
  --color-2: #ba2c16;
  --color-3: #b38466;
  --color-4: #e6d6bc;
  --color-5: #96a588;
}

SCSS

$color-1: #311c25;
$color-2: #ba2c16;
$color-3: #b38466;
$color-4: #e6d6bc;
$color-5: #96a588;

TAILWIND

colors: {
  'brand-1': '#311c25',
  'brand-2': '#ba2c16',
  'brand-3': '#b38466',
  'brand-4': '#e6d6bc',
  'brand-5': '#96a588',
}

RGB Array

[49, 28, 37], [186, 44, 22], [179, 132, 102], [230, 214, 188], [150, 165, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #311C25, #BA2C16, #B38466, #E6D6BC, #96A588 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: #311c25; --color-2: #ba2c16; --color-3: #b38466; --color-4: #e6d6bc; --color-5: #96a588. 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