← Back to Editor

#FFCC33 · #F2994D · #E66666 · #D93380 · #CC0099

A 5-color palette 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

#FFCC33

Ginger · Gold · Sunflower

HEX
#FFCC33
RGB
rgb(255, 204, 51)
HSL
hsl(45, 100%, 60%)
HSB
hsb(45, 80%, 100%)
CMYK
cmyk(0%, 20%, 80%, 0%)
Oklch
oklch(86.7% 0.165 88.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F2994D

Apricot · SandyBrown · Warm Sun

HEX
#F2994D
RGB
rgb(242, 153, 77)
HSL
hsl(28, 86%, 63%)
HSB
hsb(28, 68%, 95%)
CMYK
cmyk(0%, 37%, 68%, 5%)
Oklch
oklch(76.0% 0.140 58.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E66666

Peach Pink · Salmon · Coral Red

HEX
#E66666
RGB
rgb(230, 102, 102)
HSL
hsl(0, 72%, 65%)
HSB
hsb(0, 56%, 90%)
CMYK
cmyk(0%, 56%, 56%, 10%)
Oklch
oklch(66.8% 0.160 22.4)

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

#D93380

Dark Violet · MediumVioletRed · Rose Pink

HEX
#D93380
RGB
rgb(217, 51, 128)
HSL
hsl(332, 69%, 53%)
HSB
hsb(332, 76%, 85%)
CMYK
cmyk(0%, 76%, 41%, 15%)
Oklch
oklch(59.9% 0.209 357.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#CC0099

Rose Purple · MediumVioletRed · Eggplant

HEX
#CC0099
RGB
rgb(204, 0, 153)
HSL
hsl(315, 100%, 40%)
HSB
hsb(315, 100%, 80%)
CMYK
cmyk(0%, 100%, 25%, 20%)
Oklch
oklch(56.5% 0.242 343.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCC33
3366FF

Analogous

FF6633
FFCC33
CCFF33

Triadic

FFCC33
33FFCC
CC33FF

Split-Comp.

FFCC33
33CCFF
6633FF

Tetradic

FFCC33
33FF66
3366FF
FF33CC

Contrast Matrix WCAG 2.1 Contrast

FFCC33
F2994D
E66666
D93380
CC0099
—
1.5
Fail
2.2
Fail
2.9
Fail
3.5
AA Large
1.5
Fail
—
1.5
Fail
2.0
Fail
2.3
Fail
2.2
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
2.9
Fail
2.0
Fail
1.4
Fail
—
1.2
Fail
3.5
AA Large
2.3
Fail
1.6
Fail
1.2
Fail
—
White BG
1.5Fail
2.2Fail
3.3AA Large
4.4AA Large
5.2AA
Black BG
13.9AAA
9.4AAA
6.5AA
4.7AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E858
CBCB5F
AFAD66
91906D
747274

Deuteranopia

ECF061
D1D764
B6C066
9BA769
808F6B

Tritanopia

FC757C
EE6E71
E06666
D15F5B
C25750

Achromatopsia

CACACA
ABABAB
8C8C8C
6D6D6D
4E4E4E

Shades & Tints Shades & Tints

#FFCC33

Dark
Light

#F2994D

Dark
Light

#E66666

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcc33;
  --color-2: #f2994d;
  --color-3: #e66666;
  --color-4: #d93380;
  --color-5: #cc0099;
}

SCSS

$color-1: #ffcc33;
$color-2: #f2994d;
$color-3: #e66666;
$color-4: #d93380;
$color-5: #cc0099;

TAILWIND

colors: {
  'brand-1': '#ffcc33',
  'brand-2': '#f2994d',
  'brand-3': '#e66666',
  'brand-4': '#d93380',
  'brand-5': '#cc0099',
}

RGB Array

[255, 204, 51], [242, 153, 77], [230, 102, 102], [217, 51, 128], [204, 0, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFCC33, #F2994D, #E66666, #D93380, #CC0099 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: #ffcc33; --color-2: #f2994d; --color-3: #e66666; --color-4: #d93380; --color-5: #cc0099. 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 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