← Back to Editor

#CCFF33 · #D9E666 · #E6CC99 · #F2B3CC · #FF99FF

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

#CCFF33

Grass Green · GreenYellow · Olive Green

HEX
#CCFF33
RGB
rgb(204, 255, 51)
HSL
hsl(75, 100%, 60%)
HSB
hsb(75, 80%, 100%)
CMYK
cmyk(20%, 0%, 80%, 0%)
Oklch
oklch(93.2% 0.218 123.6)

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

#D9E666

Fresh Green · Khaki · Sunflower

HEX
#D9E666
RGB
rgb(217, 230, 102)
HSL
hsl(66, 72%, 65%)
HSB
hsb(66, 56%, 90%)
CMYK
cmyk(6%, 0%, 56%, 10%)
Oklch
oklch(89.0% 0.152 114.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E6CC99

Goose Yellow · BurlyWood · Sunflower

HEX
#E6CC99
RGB
rgb(230, 204, 153)
HSL
hsl(40, 61%, 75%)
HSB
hsb(40, 33%, 90%)
CMYK
cmyk(0%, 11%, 33%, 10%)
Oklch
oklch(85.5% 0.073 83.9)

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

#F2B3CC

Rouge · LightPink · Cherry Blossom

HEX
#F2B3CC
RGB
rgb(242, 179, 204)
HSL
hsl(336, 71%, 83%)
HSB
hsb(336, 26%, 95%)
CMYK
cmyk(0%, 26%, 16%, 5%)
Oklch
oklch(83.2% 0.080 353.4)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FF99FF

Mauve · Violet · Lilac Purple

HEX
#FF99FF
RGB
rgb(255, 153, 255)
HSL
hsl(300, 100%, 80%)
HSB
hsb(300, 40%, 100%)
CMYK
cmyk(0%, 40%, 0%, 0%)
Oklch
oklch(82.2% 0.175 327.0)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCFF33
6633FF

Analogous

FFCC33
CCFF33
66FF33

Triadic

CCFF33
33CCFF
FF33CC

Split-Comp.

CCFF33
3366FF
CC33FF

Tetradic

CCFF33
33FFCC
6633FF
FF3366

Contrast Matrix WCAG 2.1 Contrast

CCFF33
D9E666
E6CC99
F2B3CC
FF99FF
—
1.2
Fail
1.3
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
1.2Fail
1.4Fail
1.6Fail
1.7Fail
1.9Fail
Black BG
17.9AAA
15.5AAA
13.5AAA
12.1AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E364
DFDF85
DBDBA5
D7D6C6
D3D2E6

Deuteranopia

DFDB70
DEDD8C
DCDEA8
DADFC4
D9E0E0

Tritanopia

CF8B94
DA9DA3
E5AFB1
EFC1C0
FAD3CF

Achromatopsia

D8D8D8
D4D4D4
CECECE
C9C9C9
C3C3C3

Shades & Tints Shades & Tints

#CCFF33

Dark
Light

#D9E666

Dark
Light

#E6CC99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccff33;
  --color-2: #d9e666;
  --color-3: #e6cc99;
  --color-4: #f2b3cc;
  --color-5: #ff99ff;
}

SCSS

$color-1: #ccff33;
$color-2: #d9e666;
$color-3: #e6cc99;
$color-4: #f2b3cc;
$color-5: #ff99ff;

TAILWIND

colors: {
  'brand-1': '#ccff33',
  'brand-2': '#d9e666',
  'brand-3': '#e6cc99',
  'brand-4': '#f2b3cc',
  'brand-5': '#ff99ff',
}

RGB Array

[204, 255, 51], [217, 230, 102], [230, 204, 153], [242, 179, 204], [255, 153, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCFF33, #D9E666, #E6CC99, #F2B3CC, #FF99FF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #ccff33; --color-2: #d9e666; --color-3: #e6cc99; --color-4: #f2b3cc; --color-5: #ff99ff. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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