#F3F70C + #91C026 + #57928C + #4D3878 + #390A2E · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F3F70C

Autumn Sage · Yellow · Sunflower

HEX

#F3F70C

RGB

rgb(243, 247, 12)

HSL

hsl(61, 94%, 51%)

HSB

hsb(61, 95%, 97%)

CMYK

cmyk(2%, 0%, 95%, 3%)

Oklch

oklch(94.2% 0.206 111.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#91C026

Grass Green · GreenYellow · Olive Green

HEX

#91C026

RGB

rgb(145, 192, 38)

HSL

hsl(78, 67%, 45%)

HSB

hsb(78, 80%, 75%)

CMYK

cmyk(24%, 0%, 80%, 25%)

Oklch

oklch(74.8% 0.179 126.0)

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

#57928C

Mineral Blue · CadetBlue · Mint Ice

HEX

#57928C

RGB

rgb(87, 146, 140)

HSL

hsl(174, 25%, 46%)

HSB

hsb(174, 40%, 57%)

CMYK

cmyk(40%, 0%, 4%, 43%)

Oklch

oklch(61.8% 0.063 187.4)

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

#4D3878

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#4D3878

RGB

rgb(77, 56, 120)

HSL

hsl(260, 36%, 35%)

HSB

hsb(260, 53%, 47%)

CMYK

cmyk(36%, 53%, 0%, 53%)

Oklch

oklch(39.6% 0.106 296.4)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#390A2E

Rose Purple · Black · Dark Purple

HEX

#390A2E

RGB

rgb(57, 10, 46)

HSL

hsl(314, 70%, 13%)

HSB

hsb(314, 82%, 22%)

CMYK

cmyk(0%, 82%, 19%, 78%)

Oklch

oklch(24.6% 0.087 338.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3F70C

110DF8

Analogous

F8860D

F3F70C

7EF80D

Triadic

F3F70C

0DF4F8

F80DF4

Split-Comp.

F3F70C

0D7EF8

860DF8

Tetradic

F3F70C

0DF886

110DF8

F80D7E

Contrast Matrix WCAG 2.1 Contrast

F3F70C	91C026	57928C	4D3878	390A2E
—	1.9 Fail	3.1 AA Large	8.4 AAA	14.4 AAA
1.9 Fail	—	1.7 Fail	4.5 AA	7.8 AAA
3.1 AA Large	1.7 Fail	—	2.7 Fail	4.7 AA
8.4 AAA	4.5 AA	2.7 Fail	—	1.7 Fail
14.4 AAA	7.8 AAA	4.7 AA	1.7 Fail	—

White BG

1.2Fail

2.1Fail

3.6AA Large

9.8AAA

16.7AAA

Black BG

18.1AAA

9.8AAA

5.9AA

2.2Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F545

A5A64B

71718D

444469

252425

Deuteranopia

F5F453

A39F54

6D698E

454765

272B23

Tritanopia

F3727C

93696F

5A8F8F

4C5C5A

371E1D

Achromatopsia

DBDBDB

A0A0A0

808080

464646

1C1C1C

Shades & Tints Shades & Tints

#F3F70C

Dark

Light

#91C026

Dark

Light

#57928C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3f70c;
  --color-2: #91c026;
  --color-3: #57928c;
  --color-4: #4d3878;
  --color-5: #390a2e;
}

SCSS

$color-1: #f3f70c;
$color-2: #91c026;
$color-3: #57928c;
$color-4: #4d3878;
$color-5: #390a2e;

TAILWIND

colors: {
  'brand-1': '#f3f70c',
  'brand-2': '#91c026',
  'brand-3': '#57928c',
  'brand-4': '#4d3878',
  'brand-5': '#390a2e',
}

RGB Array

[243, 247, 12], [145, 192, 38], [87, 146, 140], [77, 56, 120], [57, 10, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F3F70C, #91C026, #57928C, #4D3878, #390A2E is ideal for: tech websites, dark mode UIs, game UIs. 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: #f3f70c; --color-2: #91c026; --color-3: #57928c; --color-4: #4d3878; --color-5: #390a2e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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