← Back to Editor

#5C3351 · #816896 · #A3A3C9 · #BCD4D6 · #DFFFDB

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5C3351

Rose Purple · DarkSlateGray · Eggplant

HEX
#5C3351
RGB
rgb(92, 51, 81)
HSL
hsl(316, 29%, 28%)
HSB
hsb(316, 45%, 36%)
CMYK
cmyk(0%, 45%, 12%, 64%)
Oklch
oklch(38.3% 0.073 337.7)

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

#816896

Dark Plum · SlateGray · Violet

HEX
#816896
RGB
rgb(129, 104, 150)
HSL
hsl(273, 18%, 50%)
HSB
hsb(273, 31%, 59%)
CMYK
cmyk(14%, 31%, 0%, 41%)
Oklch
oklch(55.9% 0.075 308.9)

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

#A3A3C9

Wisteria · DarkGray · Cobalt Blue

HEX
#A3A3C9
RGB
rgb(163, 163, 201)
HSL
hsl(240, 26%, 71%)
HSB
hsb(240, 19%, 79%)
CMYK
cmyk(19%, 19%, 0%, 21%)
Oklch
oklch(72.9% 0.055 285.0)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#BCD4D6

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#BCD4D6
RGB
rgb(188, 212, 214)
HSL
hsl(185, 24%, 79%)
HSB
hsb(185, 12%, 84%)
CMYK
cmyk(12%, 1%, 0%, 16%)
Oklch
oklch(85.3% 0.026 202.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#DFFFDB

Emerald · Beige · Mint Green

HEX
#DFFFDB
RGB
rgb(223, 255, 219)
HSL
hsl(113, 100%, 93%)
HSB
hsb(113, 14%, 100%)
CMYK
cmyk(13%, 0%, 14%, 0%)
Oklch
oklch(96.8% 0.058 142.1)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C3351
335C3E

Analogous

52335C
5C3351
5C333C

Triadic

5C3351
515C33
33515C

Split-Comp.

5C3351
3C5C33
335C52

Tetradic

5C3351
5C5233
335C3E
333C5C

Contrast Matrix WCAG 2.1 Contrast

5C3351
816896
A3A3C9
BCD4D6
DFFFDB
—
2.1
Fail
4.2
AA Large
6.6
AA
9.5
AAA
2.1
Fail
—
2.0
Fail
3.1
AA Large
4.5
AA Large
4.2
AA Large
2.0
Fail
—
1.6
Fail
2.3
Fail
6.6
AA
3.1
AA Large
1.6
Fail
—
1.4
Fail
9.5
AAA
4.5
AA Large
2.3
Fail
1.4
Fail
—
White BG
10.3AAA
4.8AA
2.4Fail
1.6Fail
1.1Fail
Black BG
2.0Fail
4.4AA Large
8.6AAA
13.5AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A4A
76768B
A3A3C0
C6C7D6
EDEDE4

Deuteranopia

4D5048
787A88
A3A3BE
C5C3D5
EBE9E6

Tritanopia

5A4443
808280
A3B9B7
BDD5D5
E1EBEC

Achromatopsia

434343
757575
A7A7A7
CDCDCD
F1F1F1

Shades & Tints Shades & Tints

#5C3351

Dark
Light

#816896

Dark
Light

#A3A3C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c3351;
  --color-2: #816896;
  --color-3: #a3a3c9;
  --color-4: #bcd4d6;
  --color-5: #dfffdb;
}

SCSS

$color-1: #5c3351;
$color-2: #816896;
$color-3: #a3a3c9;
$color-4: #bcd4d6;
$color-5: #dfffdb;

TAILWIND

colors: {
  'brand-1': '#5c3351',
  'brand-2': '#816896',
  'brand-3': '#a3a3c9',
  'brand-4': '#bcd4d6',
  'brand-5': '#dfffdb',
}

RGB Array

[92, 51, 81], [129, 104, 150], [163, 163, 201], [188, 212, 214], [223, 255, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #5C3351, #816896, #A3A3C9, #BCD4D6, #DFFFDB 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: #5c3351; --color-2: #816896; --color-3: #a3a3c9; --color-4: #bcd4d6; --color-5: #dfffdb. 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 warm-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