← Back to Editor

#F7D77F · #E2CB00 · #00E48E · #FB0064 · #210033

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 AppData Visualization

Color Details Color Details

#F7D77F

Goose Yellow · Khaki · Sunflower

HEX
#F7D77F
RGB
rgb(247, 215, 127)
HSL
hsl(44, 88%, 73%)
HSB
hsb(44, 49%, 97%)
CMYK
cmyk(0%, 13%, 49%, 3%)
Oklch
oklch(88.8% 0.113 90.0)

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

#E2CB00

Autumn Sage · Gold · Honey Gold

HEX
#E2CB00
RGB
rgb(226, 203, 0)
HSL
hsl(54, 100%, 44%)
HSB
hsb(54, 100%, 89%)
CMYK
cmyk(0%, 10%, 100%, 11%)
Oklch
oklch(83.5% 0.174 101.1)

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

#00E48E

Mineral Blue · MediumSpringGreen · Olive Green

HEX
#00E48E
RGB
rgb(0, 228, 142)
HSL
hsl(157, 100%, 45%)
HSB
hsb(157, 100%, 89%)
CMYK
cmyk(100%, 0%, 38%, 11%)
Oklch
oklch(80.9% 0.191 157.4)

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

#FB0064

Dark Violet · DeepPink · Camellia

HEX
#FB0064
RGB
rgb(251, 0, 100)
HSL
hsl(336, 100%, 49%)
HSB
hsb(336, 100%, 98%)
CMYK
cmyk(0%, 100%, 60%, 2%)
Oklch
oklch(63.1% 0.252 10.6)

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

#210033

Royal Purple · Black · Dark Purple

HEX
#210033
RGB
rgb(33, 0, 51)
HSL
hsl(279, 100%, 10%)
HSB
hsb(279, 100%, 20%)
CMYK
cmyk(35%, 100%, 0%, 80%)
Oklch
oklch(19.1% 0.097 310.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D77F
7E9EF7

Analogous

F79A7E
F7D77F
DAF77E

Triadic

F7D77F
7EF7D6
D67EF7

Split-Comp.

F7D77F
7EDAF7
9A7EF7

Tetradic

F7D77F
7EF79A
7E9EF7
F77EDA

Contrast Matrix WCAG 2.1 Contrast

F7D77F
E2CB00
00E48E
FB0064
210033
—
1.2
Fail
1.2
Fail
2.8
Fail
13.5
AAA
1.2
Fail
—
1.0
Fail
2.4
Fail
11.5
AAA
1.2
Fail
1.0
Fail
—
2.4
Fail
11.2
AAA
2.8
Fail
2.4
Fail
2.4
Fail
—
4.8
AA
13.5
AAA
11.5
AAA
11.2
AAA
4.8
AA
—
White BG
1.4Fail
1.6Fail
1.7Fail
4.0AA Large
18.9AAA
Black BG
15.0AAA
12.8AAA
12.5AAA
5.3AA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E994
D8D831
6365A3
8E8C4C
131227

Deuteranopia

EBED99
D9DB3D
5644A8
9DB046
151724

Tritanopia

F5A5A9
E15860
0BB3B7
EE3935
1F1D1B

Achromatopsia

D7D7D7
BBBBBB
969696
565656
101010

Shades & Tints Shades & Tints

#F7D77F

Dark
Light

#E2CB00

Dark
Light

#00E48E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d77f;
  --color-2: #e2cb00;
  --color-3: #00e48e;
  --color-4: #fb0064;
  --color-5: #210033;
}

SCSS

$color-1: #f7d77f;
$color-2: #e2cb00;
$color-3: #00e48e;
$color-4: #fb0064;
$color-5: #210033;

TAILWIND

colors: {
  'brand-1': '#f7d77f',
  'brand-2': '#e2cb00',
  'brand-3': '#00e48e',
  'brand-4': '#fb0064',
  'brand-5': '#210033',
}

RGB Array

[247, 215, 127], [226, 203, 0], [0, 228, 142], [251, 0, 100], [33, 0, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7D77F, #E2CB00, #00E48E, #FB0064, #210033 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: #f7d77f; --color-2: #e2cb00; --color-3: #00e48e; --color-4: #fb0064; --color-5: #210033. 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 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