← Back to Editor

#322635 · #672649 · #C13658 · #D1684F · #96908B

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 Library

Color Details Color Details

#322635

Dark Plum · DarkSlateGray · Dark Purple

HEX
#322635
RGB
rgb(50, 38, 53)
HSL
hsl(288, 16%, 18%)
HSB
hsb(288, 28%, 21%)
CMYK
cmyk(6%, 28%, 0%, 79%)
Oklch
oklch(28.9% 0.032 319.5)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#672649

Rose Purple · Brown · Camellia

HEX
#672649
RGB
rgb(103, 38, 73)
HSL
hsl(328, 46%, 28%)
HSB
hsb(328, 63%, 40%)
CMYK
cmyk(0%, 63%, 29%, 60%)
Oklch
oklch(37.6% 0.102 349.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#C13658

Crimson · Crimson · Passion Red

HEX
#C13658
RGB
rgb(193, 54, 88)
HSL
hsl(345, 56%, 48%)
HSB
hsb(345, 72%, 76%)
CMYK
cmyk(0%, 72%, 54%, 24%)
Oklch
oklch(55.0% 0.175 10.9)

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

#D1684F

Crimson · Tomato · Passion Red

HEX
#D1684F
RGB
rgb(209, 104, 79)
HSL
hsl(12, 59%, 56%)
HSB
hsb(12, 62%, 82%)
CMYK
cmyk(0%, 50%, 62%, 18%)
Oklch
oklch(63.7% 0.139 34.6)

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

#96908B

Ash · Gray · Silver Sand

HEX
#96908B
RGB
rgb(150, 144, 139)
HSL
hsl(27, 5%, 57%)
HSB
hsb(27, 7%, 59%)
CMYK
cmyk(0%, 4%, 7%, 41%)
Oklch
oklch(65.7% 0.010 62.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322635
293527

Analogous

2B2735
322635
352731

Triadic

322635
353227
273532

Split-Comp.

322635
313527
27352B

Tetradic

322635
352B27
293527
273135

Contrast Matrix WCAG 2.1 Contrast

322635
672649
C13658
D1684F
96908B
—
1.3
Fail
2.7
Fail
4.0
AA Large
4.5
AA
1.3
Fail
—
2.0
Fail
3.0
Fail
3.4
AA Large
2.7
Fail
2.0
Fail
—
1.5
Fail
1.7
Fail
4.0
AA Large
3.0
Fail
1.5
Fail
—
1.1
Fail
4.5
AA
3.4
AA Large
1.7
Fail
1.1
Fail
—
White BG
14.3AAA
10.8AAA
5.3AA
3.6AA Large
3.2AA Large
Black BG
1.5Fail
2.0Fail
3.9AA Large
5.8AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D31
4B4A41
858450
A4A355
93938C

Deuteranopia

2E2E30
4F543E
8D974E
AAB157
94948D

Tritanopia

312F2E
643A38
BA4948
CC5A5B
968D8D

Achromatopsia

2B2B2B
3D3D3D
636363
858585
919191

Shades & Tints Shades & Tints

#322635

Dark
Light

#672649

Dark
Light

#C13658

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322635;
  --color-2: #672649;
  --color-3: #c13658;
  --color-4: #d1684f;
  --color-5: #96908b;
}

SCSS

$color-1: #322635;
$color-2: #672649;
$color-3: #c13658;
$color-4: #d1684f;
$color-5: #96908b;

TAILWIND

colors: {
  'brand-1': '#322635',
  'brand-2': '#672649',
  'brand-3': '#c13658',
  'brand-4': '#d1684f',
  'brand-5': '#96908b',
}

RGB Array

[50, 38, 53], [103, 38, 73], [193, 54, 88], [209, 104, 79], [150, 144, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #322635, #672649, #C13658, #D1684F, #96908B is ideal for: corporate websites, product showcases, portfolios. 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: #322635; --color-2: #672649; --color-3: #c13658; --color-4: #d1684f; --color-5: #96908b. 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. 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