← Back to Editor

#04DDD2 · #3F3338 · #FF3281 · #C3F31F · #F3F4EA

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#04DDD2

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#04DDD2
RGB
rgb(4, 221, 210)
HSL
hsl(177, 96%, 44%)
HSB
hsb(177, 98%, 87%)
CMYK
cmyk(98%, 0%, 5%, 13%)
Oklch
oklch(80.9% 0.140 188.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3F3338

Dark Violet · DarkSlateGray · Raspberry

HEX
#3F3338
RGB
rgb(63, 51, 56)
HSL
hsl(335, 11%, 22%)
HSB
hsb(335, 19%, 25%)
CMYK
cmyk(0%, 19%, 11%, 75%)
Oklch
oklch(33.6% 0.019 351.2)

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

#FF3281

Dark Violet · DeepPink · Rose Pink

HEX
#FF3281
RGB
rgb(255, 50, 129)
HSL
hsl(337, 100%, 60%)
HSB
hsb(337, 80%, 100%)
CMYK
cmyk(0%, 80%, 49%, 0%)
Oklch
oklch(66.2% 0.240 4.3)

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

#C3F31F

Grass Green · GreenYellow · Olive Green

HEX
#C3F31F
RGB
rgb(195, 243, 31)
HSL
hsl(74, 90%, 54%)
HSB
hsb(74, 87%, 95%)
CMYK
cmyk(20%, 0%, 87%, 5%)
Oklch
oklch(89.8% 0.215 123.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#F3F4EA

Fresh Green · Linen · Lemon Cream

HEX
#F3F4EA
RGB
rgb(243, 244, 234)
HSL
hsl(66, 31%, 94%)
HSB
hsb(66, 4%, 96%)
CMYK
cmyk(0%, 0%, 4%, 4%)
Oklch
oklch(96.4% 0.013 111.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04DDD2
DC040F

Analogous

04DC65
04DDD2
047BDC

Triadic

04DDD2
D104DC
DCD104

Split-Comp.

04DDD2
DC047B
DC6504

Tetradic

04DDD2
6504DC
DC040F
7BDC04

Contrast Matrix WCAG 2.1 Contrast

04DDD2
3F3338
FF3281
C3F31F
F3F4EA
—
7.0
AAA
2.0
Fail
1.3
Fail
1.5
Fail
7.0
AAA
—
3.5
AA Large
9.3
AAA
10.9
AAA
2.0
Fail
3.5
AA Large
—
2.7
Fail
3.1
AA Large
1.3
Fail
9.3
AAA
2.7
Fail
—
1.2
Fail
1.5
Fail
10.9
AAA
3.1
AA Large
1.2
Fail
—
White BG
1.7Fail
12.1AAA
3.5AA Large
1.3Fail
1.1Fail
Black BG
12.3AAA
1.7Fail
6.0AA
16.2AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6264D5
3A3A37
A6A46E
D8D852
F3F3EC

Deuteranopia

5545D5
3B3B36
B2C269
D5D15F
F3F3ED

Tritanopia

0FD7D7
3E3636
F55F5B
C57B84
F3EEEF

Achromatopsia

9B9B9B
373737
787878
CCCCCC
F3F3F3

Shades & Tints Shades & Tints

#04DDD2

Dark
Light

#3F3338

Dark
Light

#FF3281

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04ddd2;
  --color-2: #3f3338;
  --color-3: #ff3281;
  --color-4: #c3f31f;
  --color-5: #f3f4ea;
}

SCSS

$color-1: #04ddd2;
$color-2: #3f3338;
$color-3: #ff3281;
$color-4: #c3f31f;
$color-5: #f3f4ea;

TAILWIND

colors: {
  'brand-1': '#04ddd2',
  'brand-2': '#3f3338',
  'brand-3': '#ff3281',
  'brand-4': '#c3f31f',
  'brand-5': '#f3f4ea',
}

RGB Array

[4, 221, 210], [63, 51, 56], [255, 50, 129], [195, 243, 31], [243, 244, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #04DDD2, #3F3338, #FF3281, #C3F31F, #F3F4EA 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: #04ddd2; --color-2: #3f3338; --color-3: #ff3281; --color-4: #c3f31f; --color-5: #f3f4ea. 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