← Back to Editor

#F3E09E · #AF262D · #FF756C · #3FBC82 · #190C1D

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

#F3E09E

Goose Yellow · Khaki · Lemon Cream

HEX
#F3E09E
RGB
rgb(243, 224, 158)
HSL
hsl(47, 78%, 79%)
HSB
hsb(47, 35%, 95%)
CMYK
cmyk(0%, 8%, 35%, 5%)
Oklch
oklch(90.7% 0.086 94.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#AF262D

Vermilion · Brown · Passion Red

HEX
#AF262D
RGB
rgb(175, 38, 45)
HSL
hsl(357, 64%, 42%)
HSB
hsb(357, 78%, 69%)
CMYK
cmyk(0%, 78%, 74%, 31%)
Oklch
oklch(49.6% 0.173 23.9)

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

#FF756C

Peach Pink · Salmon · Coral Red

HEX
#FF756C
RGB
rgb(255, 117, 108)
HSL
hsl(4, 100%, 71%)
HSB
hsb(4, 58%, 100%)
CMYK
cmyk(0%, 54%, 58%, 0%)
Oklch
oklch(72.5% 0.170 25.9)

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

#3FBC82

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#3FBC82
RGB
rgb(63, 188, 130)
HSL
hsl(152, 50%, 49%)
HSB
hsb(152, 66%, 74%)
CMYK
cmyk(66%, 0%, 31%, 26%)
Oklch
oklch(71.2% 0.140 159.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#190C1D

Dark Plum · Black · Dark Purple

HEX
#190C1D
RGB
rgb(25, 12, 29)
HSL
hsl(286, 41%, 8%)
HSB
hsb(286, 59%, 11%)
CMYK
cmyk(14%, 59%, 0%, 89%)
Oklch
oklch(18.2% 0.039 317.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E09E
A0B2F3

Analogous

F3B7A0
F3E09E
DCF3A0

Triadic

F3E09E
A0F3E1
E1A0F3

Split-Comp.

F3E09E
A0DCF3
B7A0F3

Tetradic

F3E09E
A0F3B7
A0B2F3
F3A0DC

Contrast Matrix WCAG 2.1 Contrast

F3E09E
AF262D
FF756C
3FBC82
190C1D
—
5.1
AA
2.0
Fail
1.8
Fail
14.4
AAA
5.1
AA
—
2.6
Fail
2.8
Fail
2.8
Fail
2.0
Fail
2.6
Fail
—
1.1
Fail
7.2
AAA
1.8
Fail
2.8
Fail
1.1
Fail
—
7.9
AAA
14.4
AAA
2.8
Fail
7.2
AAA
7.9
AAA
—
White BG
1.3Fail
6.7AA
2.6Fail
2.4Fail
18.9AAA
Black BG
16.0AAA
3.1AA Large
8.0AAA
8.7AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBAE
74722B
C3C26E
757690
131319

Deuteranopia

ECEDB2
7C862B
CBD66F
6E6593
141518

Tritanopia

F2BBBD
A82A2A
F87070
459B9E
181615

Achromatopsia

DEDEDE
505050
9D9D9D
909090
121212

Shades & Tints Shades & Tints

#F3E09E

Dark
Light

#AF262D

Dark
Light

#FF756C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e09e;
  --color-2: #af262d;
  --color-3: #ff756c;
  --color-4: #3fbc82;
  --color-5: #190c1d;
}

SCSS

$color-1: #f3e09e;
$color-2: #af262d;
$color-3: #ff756c;
$color-4: #3fbc82;
$color-5: #190c1d;

TAILWIND

colors: {
  'brand-1': '#f3e09e',
  'brand-2': '#af262d',
  'brand-3': '#ff756c',
  'brand-4': '#3fbc82',
  'brand-5': '#190c1d',
}

RGB Array

[243, 224, 158], [175, 38, 45], [255, 117, 108], [63, 188, 130], [25, 12, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F3E09E, #AF262D, #FF756C, #3FBC82, #190C1D 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: #f3e09e; --color-2: #af262d; --color-3: #ff756c; --color-4: #3fbc82; --color-5: #190c1d. 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