← Back to Editor

#332E2D · #AD2D36 · #BD553A · #D9A357 · #D9D9D9

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

#332E2D

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#332E2D
RGB
rgb(51, 46, 45)
HSL
hsl(10, 6%, 19%)
HSB
hsb(10, 12%, 20%)
CMYK
cmyk(0%, 10%, 12%, 80%)
Oklch
oklch(30.6% 0.007 31.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#AD2D36

Crimson · Brown · Passion Red

HEX
#AD2D36
RGB
rgb(173, 45, 54)
HSL
hsl(356, 59%, 43%)
HSB
hsb(356, 74%, 68%)
CMYK
cmyk(0%, 74%, 69%, 32%)
Oklch
oklch(50.0% 0.164 21.9)

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

#BD553A

Crimson · Sienna · Passion Red

HEX
#BD553A
RGB
rgb(189, 85, 58)
HSL
hsl(12, 53%, 48%)
HSB
hsb(12, 69%, 74%)
CMYK
cmyk(0%, 55%, 69%, 26%)
Oklch
oklch(57.6% 0.141 35.6)

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

#D9A357

Ginger · SandyBrown · Warm Sun

HEX
#D9A357
RGB
rgb(217, 163, 87)
HSL
hsl(35, 63%, 60%)
HSB
hsb(35, 60%, 85%)
CMYK
cmyk(0%, 25%, 60%, 15%)
Oklch
oklch(75.1% 0.113 74.0)

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

#D9D9D9

Silver Gray · LightGray · Pearl Gray

HEX
#D9D9D9
RGB
rgb(217, 217, 217)
HSL
hsl(0, 0%, 85%)
HSB
hsb(0, 0%, 85%)
CMYK
cmyk(0%, 0%, 0%, 15%)
Oklch
oklch(88.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332E2D
2E3233

Analogous

332E2F
332E2D
33312E

Triadic

332E2D
2E332F
2F2E33

Split-Comp.

332E2D
2E3331
2E2F33

Tetradic

332E2D
2F332E
2E3233
312E33

Contrast Matrix WCAG 2.1 Contrast

332E2D
AD2D36
BD553A
D9A357
D9D9D9
—
2.0
Fail
2.9
Fail
5.9
AA
9.5
AAA
2.0
Fail
—
1.4
Fail
2.9
Fail
4.6
AA
2.9
Fail
1.4
Fail
—
2.1
Fail
3.3
AA Large
5.9
AA
2.9
Fail
2.1
Fail
—
1.6
Fail
9.5
AAA
4.6
AA
3.3
AA Large
1.6
Fail
—
White BG
13.4AAA
6.6AA
4.6AA
2.3Fail
1.4Fail
Black BG
1.6Fail
3.2AA Large
4.5AA
9.3AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31312D
767434
908F41
C2C169
D9D9D9

Deuteranopia

31312D
7D8733
969E42
C5C96E
D9D9D9

Tritanopia

332D2D
A73232
B84647
D6787B
D9D9D9

Achromatopsia

2F2F2F
545454
717171
AAAAAA
D9D9D9

Shades & Tints Shades & Tints

#332E2D

Dark
Light

#AD2D36

Dark
Light

#BD553A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332e2d;
  --color-2: #ad2d36;
  --color-3: #bd553a;
  --color-4: #d9a357;
  --color-5: #d9d9d9;
}

SCSS

$color-1: #332e2d;
$color-2: #ad2d36;
$color-3: #bd553a;
$color-4: #d9a357;
$color-5: #d9d9d9;

TAILWIND

colors: {
  'brand-1': '#332e2d',
  'brand-2': '#ad2d36',
  'brand-3': '#bd553a',
  'brand-4': '#d9a357',
  'brand-5': '#d9d9d9',
}

RGB Array

[51, 46, 45], [173, 45, 54], [189, 85, 58], [217, 163, 87], [217, 217, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332E2D, #AD2D36, #BD553A, #D9A357, #D9D9D9 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: #332e2d; --color-2: #ad2d36; --color-3: #bd553a; --color-4: #d9a357; --color-5: #d9d9d9. 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