← Back to Editor

#DFE27B · #311521 · #97054C · #D92169 · #E96395

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#DFE27B

Fresh Green · Khaki · Sunflower

HEX
#DFE27B
RGB
rgb(223, 226, 123)
HSL
hsl(62, 64%, 68%)
HSB
hsb(62, 46%, 89%)
CMYK
cmyk(1%, 0%, 46%, 11%)
Oklch
oklch(88.9% 0.127 110.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#311521

Dark Violet · Black · Raspberry

HEX
#311521
RGB
rgb(49, 21, 33)
HSL
hsl(334, 40%, 14%)
HSB
hsb(334, 57%, 19%)
CMYK
cmyk(0%, 57%, 33%, 81%)
Oklch
oklch(24.1% 0.048 354.3)

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

#97054C

Dark Violet · Brown · Camellia

HEX
#97054C
RGB
rgb(151, 5, 76)
HSL
hsl(331, 94%, 31%)
HSB
hsb(331, 97%, 59%)
CMYK
cmyk(0%, 97%, 50%, 41%)
Oklch
oklch(43.9% 0.175 1.3)

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

#D92169

Dark Violet · MediumVioletRed · Camellia

HEX
#D92169
RGB
rgb(217, 33, 105)
HSL
hsl(337, 74%, 49%)
HSB
hsb(337, 85%, 85%)
CMYK
cmyk(0%, 85%, 52%, 15%)
Oklch
oklch(58.1% 0.217 5.1)

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

#E96395

Rouge · LightCoral · Rose Pink

HEX
#E96395
RGB
rgb(233, 99, 149)
HSL
hsl(338, 75%, 65%)
HSB
hsb(338, 58%, 91%)
CMYK
cmyk(0%, 58%, 36%, 9%)
Oklch
oklch(68.0% 0.172 359.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFE27B
7D79E2

Analogous

E2B179
DFE27B
AAE279

Triadic

DFE27B
79DEE2
E279DE

Split-Comp.

DFE27B
79AAE2
B179E2

Tetradic

DFE27B
79E2B1
7D79E2
E279AA

Contrast Matrix WCAG 2.1 Contrast

DFE27B
311521
97054C
D92169
E96395
—
12.1
AAA
6.3
AA
3.5
AA Large
2.3
Fail
12.1
AAA
—
1.9
Fail
3.5
AA Large
5.3
AA
6.3
AA
1.9
Fail
—
1.8
Fail
2.7
Fail
3.5
AA Large
3.5
AA Large
1.8
Fail
—
1.5
Fail
2.3
Fail
5.3
AA
2.7
Fail
1.5
Fail
—
White BG
1.4Fail
16.7AAA
8.6AAA
4.8AA
3.1AA Large
Black BG
15.3AAA
1.3Fail
2.4Fail
4.4AA Large
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E094
25251E
58563B
898858
AFAE89

Deuteranopia

E0E09A
27291D
606B37
94A253
B7C186

Tritanopia

DFA8AC
301C1B
902D2A
D04A47
E27F7D

Achromatopsia

D5D5D5
1F1F1F
393939
606060
919191

Shades & Tints Shades & Tints

#DFE27B

Dark
Light

#311521

Dark
Light

#97054C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfe27b;
  --color-2: #311521;
  --color-3: #97054c;
  --color-4: #d92169;
  --color-5: #e96395;
}

SCSS

$color-1: #dfe27b;
$color-2: #311521;
$color-3: #97054c;
$color-4: #d92169;
$color-5: #e96395;

TAILWIND

colors: {
  'brand-1': '#dfe27b',
  'brand-2': '#311521',
  'brand-3': '#97054c',
  'brand-4': '#d92169',
  'brand-5': '#e96395',
}

RGB Array

[223, 226, 123], [49, 21, 33], [151, 5, 76], [217, 33, 105], [233, 99, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #DFE27B, #311521, #97054C, #D92169, #E96395 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfe27b; --color-2: #311521; --color-3: #97054c; --color-4: #d92169; --color-5: #e96395. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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