← Back to Editor

#253C6B · #5A3F62 · #8E425A · #C34551 · #F74848

A 5-color palette 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

#253C6B

Indigo · DarkSlateGray · Prussian Blue

HEX
#253C6B
RGB
rgb(37, 60, 107)
HSL
hsl(220, 49%, 28%)
HSB
hsb(220, 65%, 42%)
CMYK
cmyk(65%, 44%, 0%, 58%)
Oklch
oklch(36.3% 0.086 263.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#5A3F62

Dark Plum · DarkSlateBlue · Eggplant

HEX
#5A3F62
RGB
rgb(90, 63, 98)
HSL
hsl(286, 22%, 32%)
HSB
hsb(286, 36%, 38%)
CMYK
cmyk(8%, 36%, 0%, 62%)
Oklch
oklch(41.2% 0.066 318.3)

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

#8E425A

Dark Violet · Sienna · Camellia

HEX
#8E425A
RGB
rgb(142, 66, 90)
HSL
hsl(341, 37%, 41%)
HSB
hsb(341, 54%, 56%)
CMYK
cmyk(0%, 54%, 37%, 44%)
Oklch
oklch(48.4% 0.106 1.9)

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

#C34551

Crimson · Sienna · Passion Red

HEX
#C34551
RGB
rgb(195, 69, 81)
HSL
hsl(354, 51%, 52%)
HSB
hsb(354, 65%, 76%)
CMYK
cmyk(0%, 65%, 58%, 24%)
Oklch
oklch(56.8% 0.161 18.4)

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

#F74848

Peach Pink · Tomato · Coral Red

HEX
#F74848
RGB
rgb(247, 72, 72)
HSL
hsl(0, 92%, 63%)
HSB
hsb(0, 71%, 97%)
CMYK
cmyk(0%, 71%, 71%, 3%)
Oklch
oklch(65.4% 0.212 25.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

253C6B
6A5324

Analogous

245F6A
253C6B
30246A

Triadic

253C6B
6A243C
3C6A24

Split-Comp.

253C6B
6A3024
5F6A24

Tetradic

253C6B
6A245F
6A5324
246A30

Contrast Matrix WCAG 2.1 Contrast

253C6B
5A3F62
8E425A
C34551
F74848
—
1.2
Fail
1.6
Fail
2.2
Fail
3.1
AA Large
1.2
Fail
—
1.3
Fail
1.8
Fail
2.6
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
3.1
AA Large
2.6
Fail
1.9
Fail
1.4
Fail
—
White BG
10.8AAA
9.0AAA
6.8AA
4.9AA
3.5AA Large
Black BG
1.9Fail
2.3Fail
3.1AA Large
4.3AA Large
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F60
4E4E5A
6D6C54
8C8B4E
ABAA48

Deuteranopia

2E2C5D
505258
727753
949D4D
B5C248

Tritanopia

265755
595351
8A504F
BD4C4B
EE4848

Achromatopsia

3A3A3A
4B4B4B
5B5B5B
6C6C6C
7C7C7C

Shades & Tints Shades & Tints

#253C6B

Dark
Light

#5A3F62

Dark
Light

#8E425A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #253c6b;
  --color-2: #5a3f62;
  --color-3: #8e425a;
  --color-4: #c34551;
  --color-5: #f74848;
}

SCSS

$color-1: #253c6b;
$color-2: #5a3f62;
$color-3: #8e425a;
$color-4: #c34551;
$color-5: #f74848;

TAILWIND

colors: {
  'brand-1': '#253c6b',
  'brand-2': '#5a3f62',
  'brand-3': '#8e425a',
  'brand-4': '#c34551',
  'brand-5': '#f74848',
}

RGB Array

[37, 60, 107], [90, 63, 98], [142, 66, 90], [195, 69, 81], [247, 72, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #253C6B, #5A3F62, #8E425A, #C34551, #F74848 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: #253c6b; --color-2: #5a3f62; --color-3: #8e425a; --color-4: #c34551; --color-5: #f74848. 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