← Back to Editor

#F30A46 · #FF6E26 · #C1DE50 · #70C482 · #402F2B

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 App

Color Details Color Details

#F30A46

Vermilion · Crimson · Passion Red

HEX
#F30A46
RGB
rgb(243, 10, 70)
HSL
hsl(345, 92%, 50%)
HSB
hsb(345, 96%, 95%)
CMYK
cmyk(0%, 96%, 71%, 5%)
Oklch
oklch(61.3% 0.243 18.7)

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

#FF6E26

Tangerine · Tomato · Warm Sun

HEX
#FF6E26
RGB
rgb(255, 110, 38)
HSL
hsl(20, 100%, 57%)
HSB
hsb(20, 85%, 100%)
CMYK
cmyk(0%, 57%, 85%, 0%)
Oklch
oklch(70.7% 0.193 42.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C1DE50

Grass Green · GreenYellow · Olive Green

HEX
#C1DE50
RGB
rgb(193, 222, 80)
HSL
hsl(72, 68%, 59%)
HSB
hsb(72, 64%, 87%)
CMYK
cmyk(13%, 0%, 64%, 13%)
Oklch
oklch(85.3% 0.168 120.0)

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

#70C482

Celadon · DarkSeaGreen · Olive Green

HEX
#70C482
RGB
rgb(112, 196, 130)
HSL
hsl(133, 42%, 60%)
HSB
hsb(133, 43%, 77%)
CMYK
cmyk(43%, 0%, 34%, 23%)
Oklch
oklch(75.0% 0.126 149.5)

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

#402F2B

Crimson · DarkSlateGray · Wine Red

HEX
#402F2B
RGB
rgb(64, 47, 43)
HSL
hsl(11, 20%, 21%)
HSB
hsb(11, 33%, 25%)
CMYK
cmyk(0%, 27%, 33%, 75%)
Oklch
oklch(32.3% 0.026 33.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F30A46
0AF5BA

Analogous

F50ABA
F30A46
F5450A

Triadic

F30A46
45F50A
0A45F5

Split-Comp.

F30A46
0AF545
0ABAF5

Tetradic

F30A46
BAF50A
0AF5BA
450AF5

Contrast Matrix WCAG 2.1 Contrast

F30A46
FF6E26
C1DE50
70C482
402F2B
—
1.5
Fail
2.8
Fail
2.0
Fail
3.0
Fail
1.5
Fail
—
1.8
Fail
1.3
Fail
4.5
AA
2.8
Fail
1.8
Fail
—
1.4
Fail
8.3
AAA
2.0
Fail
1.3
Fail
1.4
Fail
—
6.0
AA
3.0
Fail
4.5
AA
8.3
AAA
6.0
AA
—
White BG
4.2AA Large
2.8Fail
1.5Fail
2.1Fail
12.7AAA
Black BG
4.9AA
7.5AAA
13.8AAA
9.9AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8C37
C0BF37
CECE72
949592
39382C

Deuteranopia

9CAD34
C9D43C
CCCA7B
908996
3A3B2C

Tritanopia

E72C2A
F84548
C28D93
749FA1
3F2D2D

Achromatopsia

575757
919191
C5C5C5
A3A3A3
343434

Shades & Tints Shades & Tints

#F30A46

Dark
Light

#FF6E26

Dark
Light

#C1DE50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f30a46;
  --color-2: #ff6e26;
  --color-3: #c1de50;
  --color-4: #70c482;
  --color-5: #402f2b;
}

SCSS

$color-1: #f30a46;
$color-2: #ff6e26;
$color-3: #c1de50;
$color-4: #70c482;
$color-5: #402f2b;

TAILWIND

colors: {
  'brand-1': '#f30a46',
  'brand-2': '#ff6e26',
  'brand-3': '#c1de50',
  'brand-4': '#70c482',
  'brand-5': '#402f2b',
}

RGB Array

[243, 10, 70], [255, 110, 38], [193, 222, 80], [112, 196, 130], [64, 47, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F30A46, #FF6E26, #C1DE50, #70C482, #402F2B is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #f30a46; --color-2: #ff6e26; --color-3: #c1de50; --color-4: #70c482; --color-5: #402f2b. 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 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