← Back to Editor

#F1E80E · #84CD48 · #21A672 · #0A725B · #332B32

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F1E80E

Autumn Sage · Gold · Honey Gold

HEX
#F1E80E
RGB
rgb(241, 232, 14)
HSL
hsl(58, 89%, 50%)
HSB
hsb(58, 94%, 95%)
CMYK
cmyk(0%, 4%, 94%, 5%)
Oklch
oklch(90.9% 0.193 106.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#84CD48

Emerald · GreenYellow · Olive Green

HEX
#84CD48
RGB
rgb(132, 205, 72)
HSL
hsl(93, 57%, 54%)
HSB
hsb(93, 65%, 80%)
CMYK
cmyk(36%, 0%, 65%, 20%)
Oklch
oklch(77.3% 0.181 133.6)

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

#21A672

Mineral Blue · MediumSeaGreen · Forest Green

HEX
#21A672
RGB
rgb(33, 166, 114)
HSL
hsl(157, 67%, 39%)
HSB
hsb(157, 80%, 65%)
CMYK
cmyk(80%, 0%, 31%, 35%)
Oklch
oklch(64.4% 0.135 161.0)

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

#0A725B

Mineral Blue · Teal · Peacock Green

HEX
#0A725B
RGB
rgb(10, 114, 91)
HSL
hsl(167, 84%, 24%)
HSB
hsb(167, 91%, 45%)
CMYK
cmyk(91%, 0%, 20%, 55%)
Oklch
oklch(49.3% 0.093 171.9)

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

#332B32

Rose Purple · DarkSlateGray · Dark Stone

HEX
#332B32
RGB
rgb(51, 43, 50)
HSL
hsl(308, 9%, 18%)
HSB
hsb(308, 16%, 20%)
CMYK
cmyk(0%, 16%, 2%, 80%)
Oklch
oklch(30.1% 0.017 330.1)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1E80E
0E16F1

Analogous

F1780E
F1E80E
87F10E

Triadic

F1E80E
0EF1E9
E90EF1

Split-Comp.

F1E80E
0E87F1
780EF1

Tetradic

F1E80E
0EF178
0E16F1
F10E87

Contrast Matrix WCAG 2.1 Contrast

F1E80E
84CD48
21A672
0A725B
332B32
—
1.5
Fail
2.4
Fail
4.6
AA
10.6
AAA
1.5
Fail
—
1.6
Fail
3.0
AA Large
7.1
AAA
2.4
Fail
1.6
Fail
—
1.9
Fail
4.4
AA Large
4.6
AA
3.0
AA Large
1.9
Fail
—
2.3
Fail
10.6
AAA
7.1
AAA
4.4
AA Large
2.3
Fail
—
White BG
1.3Fail
1.9Fail
3.1AA Large
5.9AA
13.7AAA
Black BG
16.3AAA
10.8AAA
6.8AA
3.6AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDED43
A4A468
5B5C7F
373861
302F30

Deuteranopia

EEEE4F
9F9A70
534982
312962
303130

Tritanopia

F16C76
888287
28898B
0F6566
332F2F

Achromatopsia

D2D2D2
A8A8A8
787878
505050
2E2E2E

Shades & Tints Shades & Tints

#F1E80E

Dark
Light

#84CD48

Dark
Light

#21A672

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1e80e;
  --color-2: #84cd48;
  --color-3: #21a672;
  --color-4: #0a725b;
  --color-5: #332b32;
}

SCSS

$color-1: #f1e80e;
$color-2: #84cd48;
$color-3: #21a672;
$color-4: #0a725b;
$color-5: #332b32;

TAILWIND

colors: {
  'brand-1': '#f1e80e',
  'brand-2': '#84cd48',
  'brand-3': '#21a672',
  'brand-4': '#0a725b',
  'brand-5': '#332b32',
}

RGB Array

[241, 232, 14], [132, 205, 72], [33, 166, 114], [10, 114, 91], [51, 43, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1E80E, #84CD48, #21A672, #0A725B, #332B32 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #f1e80e; --color-2: #84cd48; --color-3: #21a672; --color-4: #0a725b; --color-5: #332b32. 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 general-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