← Back to Editor

#2C133D · #574F5E · #96787A · #F6296E · #CCA884

spring

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

#2C133D

Royal Purple · MidnightBlue · Dark Purple

HEX
#2C133D
RGB
rgb(44, 19, 61)
HSL
hsl(276, 53%, 16%)
HSB
hsb(276, 69%, 24%)
CMYK
cmyk(28%, 69%, 0%, 76%)
Oklch
oklch(24.7% 0.080 309.2)

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

#574F5E

Dark Plum · DimGray · Charcoal

HEX
#574F5E
RGB
rgb(87, 79, 94)
HSL
hsl(272, 9%, 34%)
HSB
hsb(272, 16%, 37%)
CMYK
cmyk(7%, 16%, 0%, 63%)
Oklch
oklch(44.1% 0.026 309.2)

Traditional「Dark Plum」· Paint「Charcoal」· Creative Midnight Shadow

#96787A

Crimson · Gray · Passion Red

HEX
#96787A
RGB
rgb(150, 120, 122)
HSL
hsl(356, 13%, 53%)
HSB
hsb(356, 20%, 59%)
CMYK
cmyk(0%, 20%, 19%, 41%)
Oklch
oklch(60.2% 0.038 13.8)

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

#F6296E

Dark Violet · DeepPink · Rose Pink

HEX
#F6296E
RGB
rgb(246, 41, 110)
HSL
hsl(340, 92%, 56%)
HSB
hsb(340, 83%, 96%)
CMYK
cmyk(0%, 83%, 55%, 4%)
Oklch
oklch(63.7% 0.235 8.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#CCA884

Ginger · Tan · Warm Sun

HEX
#CCA884
RGB
rgb(204, 168, 132)
HSL
hsl(30, 41%, 66%)
HSB
hsb(30, 35%, 80%)
CMYK
cmyk(0%, 18%, 35%, 20%)
Oklch
oklch(75.5% 0.065 66.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C133D
243E13

Analogous

18133E
2C133D
3E133A

Triadic

2C133D
3E2D13
133E2D

Split-Comp.

2C133D
3A3E13
133E18

Tetradic

2C133D
3E1813
243E13
133A3E

Contrast Matrix WCAG 2.1 Contrast

2C133D
574F5E
96787A
F6296E
CCA884
—
2.1
Fail
4.2
AA Large
4.3
AA Large
7.5
AAA
2.1
Fail
—
2.0
Fail
2.0
Fail
3.5
AA Large
4.2
AA Large
2.0
Fail
—
1.0
Fail
1.8
Fail
4.3
AA Large
2.0
Fail
1.0
Fail
—
1.7
Fail
7.5
AAA
3.5
AA Large
1.8
Fail
1.7
Fail
—
White BG
16.6AAA
7.8AAA
4.0AA Large
3.8AA Large
2.2Fail
Black BG
1.3Fail
2.7Fail
5.3AA
5.5AA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

212133
54535A
89897A
9D9B5D
BCBC8D

Deuteranopia

232530
54555A
8B8D79
A9B959
BFC18F

Tritanopia

2B2B29
575857
957979
EC504D
CA9495

Achromatopsia

1F1F1F
535353
818181
6E6E6E
AFAFAF

Shades & Tints Shades & Tints

#2C133D

Dark
Light

#574F5E

Dark
Light

#96787A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c133d;
  --color-2: #574f5e;
  --color-3: #96787a;
  --color-4: #f6296e;
  --color-5: #cca884;
}

SCSS

$color-1: #2c133d;
$color-2: #574f5e;
$color-3: #96787a;
$color-4: #f6296e;
$color-5: #cca884;

TAILWIND

colors: {
  'brand-1': '#2c133d',
  'brand-2': '#574f5e',
  'brand-3': '#96787a',
  'brand-4': '#f6296e',
  'brand-5': '#cca884',
}

RGB Array

[44, 19, 61], [87, 79, 94], [150, 120, 122], [246, 41, 110], [204, 168, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #2C133D, #574F5E, #96787A, #F6296E, #CCA884 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: #2c133d; --color-2: #574f5e; --color-3: #96787a; --color-4: #f6296e; --color-5: #cca884. 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 spring-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