← Back to Editor

#28174B · #5A4089 · #922E60 · #C8315C · #C94E49

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#28174B

Deep Indigo · MidnightBlue · Dark Purple

HEX
#28174B
RGB
rgb(40, 23, 75)
HSL
hsl(260, 53%, 19%)
HSB
hsb(260, 69%, 29%)
CMYK
cmyk(47%, 69%, 0%, 71%)
Oklch
oklch(26.0% 0.092 294.1)

TraditionalDeep Indigo」· PaintDark Purple」· Creative Blush Sunrise

#5A4089

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#5A4089
RGB
rgb(90, 64, 137)
HSL
hsl(261, 36%, 39%)
HSB
hsb(261, 53%, 54%)
CMYK
cmyk(34%, 53%, 0%, 46%)
Oklch
oklch(43.6% 0.118 297.8)

TraditionalDeep Indigo」· PaintEggplant」· Creative Blush Sunrise

#922E60

Dark Violet · Brown · Camellia

HEX
#922E60
RGB
rgb(146, 46, 96)
HSL
hsl(330, 52%, 38%)
HSB
hsb(330, 68%, 57%)
CMYK
cmyk(0%, 68%, 34%, 43%)
Oklch
oklch(46.5% 0.143 353.3)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#C8315C

Dark Violet · Crimson · Camellia

HEX
#C8315C
RGB
rgb(200, 49, 92)
HSL
hsl(343, 61%, 49%)
HSB
hsb(343, 76%, 78%)
CMYK
cmyk(0%, 76%, 54%, 22%)
Oklch
oklch(55.8% 0.188 9.3)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#C94E49

Crimson · Sienna · Passion Red

HEX
#C94E49
RGB
rgb(201, 78, 73)
HSL
hsl(2, 54%, 54%)
HSB
hsb(2, 64%, 79%)
CMYK
cmyk(0%, 61%, 64%, 21%)
Oklch
oklch(58.7% 0.158 25.5)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

28174B
394A17

Analogous

171F4A
28174B
42174A

Triadic

28174B
4A2817
174A28

Split-Comp.

28174B
4A4217
1F4A17

Tetradic

28174B
4A171F
394A17
174A42

Contrast Matrix WCAG 2.1 Contrast

28174B
5A4089
922E60
C8315C
C94E49
1.9
Fail
2.1
Fail
3.1
AA Large
3.6
AA Large
1.9
Fail
1.1
Fail
1.6
Fail
1.8
Fail
2.1
Fail
1.1
Fail
1.5
Fail
1.7
Fail
3.1
AA Large
1.6
Fail
1.5
Fail
1.2
Fail
3.6
AA Large
1.8
Fail
1.7
Fail
1.2
Fail
White BG
16.0AAA
8.3AAA
7.5AAA
5.2AA
4.5AA Large
Black BG
1.3Fail
2.5Fail
2.8Fail
4.0AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

21203E
4F4F77
676654
878552
94934A

Deuteranopia

22233B
505273
6D7451
8F9B4F
9BA44B

Tritanopia

273432
596966
8D4A48
C04948
C34B4B

Achromatopsia

222222
505050
525252
636363
727272

Shades & Tints Shades & Tints

#28174B

Dark
Light

#5A4089

Dark
Light

#922E60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #28174b;
  --color-2: #5a4089;
  --color-3: #922e60;
  --color-4: #c8315c;
  --color-5: #c94e49;
}

SCSS

$color-1: #28174b;
$color-2: #5a4089;
$color-3: #922e60;
$color-4: #c8315c;
$color-5: #c94e49;

TAILWIND

colors: {
  'brand-1': '#28174b',
  'brand-2': '#5a4089',
  'brand-3': '#922e60',
  'brand-4': '#c8315c',
  'brand-5': '#c94e49',
}

RGB Array

[40, 23, 75], [90, 64, 137], [146, 46, 96], [200, 49, 92], [201, 78, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #28174B, #5A4089, #922E60, #C8315C, #C94E49 is ideal for: tech websites, dark mode UIs, game UIs. 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: #28174b; --color-2: #5a4089; --color-3: #922e60; --color-4: #c8315c; --color-5: #c94e49. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 cool-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