← Back to Editor

#FF3366 · #FF6666 · #FF9966 · #FFCC66 · #FFFF66

sunset

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

#FF3366

Vermilion · DeepPink · Passion Red

HEX
#FF3366
RGB
rgb(255, 51, 102)
HSL
hsl(345, 100%, 60%)
HSB
hsb(345, 80%, 100%)
CMYK
cmyk(0%, 80%, 60%, 0%)
Oklch
oklch(65.6% 0.235 13.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#FF6666

Peach Pink · Salmon · Coral Red

HEX
#FF6666
RGB
rgb(255, 102, 102)
HSL
hsl(0, 100%, 70%)
HSB
hsb(0, 60%, 100%)
CMYK
cmyk(0%, 60%, 60%, 0%)
Oklch
oklch(70.4% 0.187 23.2)

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

#FF9966

Apricot · SandyBrown · Warm Sun

HEX
#FF9966
RGB
rgb(255, 153, 102)
HSL
hsl(20, 100%, 70%)
HSB
hsb(20, 60%, 100%)
CMYK
cmyk(0%, 40%, 60%, 0%)
Oklch
oklch(77.9% 0.139 46.6)

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

#FFCC66

Ginger · SandyBrown · Sunflower

HEX
#FFCC66
RGB
rgb(255, 204, 102)
HSL
hsl(40, 100%, 70%)
HSB
hsb(40, 60%, 100%)
CMYK
cmyk(0%, 20%, 60%, 0%)
Oklch
oklch(87.1% 0.133 82.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FFFF66

Fresh Green · Khaki · Sunflower

HEX
#FFFF66
RGB
rgb(255, 255, 102)
HSL
hsl(60, 100%, 70%)
HSB
hsb(60, 60%, 100%)
CMYK
cmyk(0%, 0%, 60%, 0%)
Oklch
oklch(97.2% 0.171 109.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3366
33FFCC

Analogous

FF33CC
FF3366
FF6633

Triadic

FF3366
66FF33
3366FF

Split-Comp.

FF3366
33FF66
33CCFF

Tetradic

FF3366
CCFF33
33FFCC
6633FF

Contrast Matrix WCAG 2.1 Contrast

FF3366
FF6666
FF9966
FFCC66
FFFF66
—
1.2
Fail
1.7
Fail
2.4
Fail
3.3
AA Large
1.2
Fail
—
1.4
Fail
1.9
Fail
2.7
Fail
1.7
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
2.4
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
3.3
AA Large
2.7
Fail
2.0
Fail
1.4
Fail
—
White BG
3.5AA Large
2.9Fail
2.1Fail
1.5Fail
1.1Fail
Black BG
5.9AA
7.3AAA
10.0AAA
14.1AAA
19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A55A
BDBB66
D3D272
E9E87F
FFFF8B

Deuteranopia

B3C257
C6D166
D9E075
ECF085
FFFF94

Tritanopia

F5504E
F76666
FA7C7E
FC9296
FFA8AF

Achromatopsia

767676
949494
B2B2B2
D0D0D0
EEEEEE

Shades & Tints Shades & Tints

#FF3366

Dark
Light

#FF6666

Dark
Light

#FF9966

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3366;
  --color-2: #ff6666;
  --color-3: #ff9966;
  --color-4: #ffcc66;
  --color-5: #ffff66;
}

SCSS

$color-1: #ff3366;
$color-2: #ff6666;
$color-3: #ff9966;
$color-4: #ffcc66;
$color-5: #ffff66;

TAILWIND

colors: {
  'brand-1': '#ff3366',
  'brand-2': '#ff6666',
  'brand-3': '#ff9966',
  'brand-4': '#ffcc66',
  'brand-5': '#ffff66',
}

RGB Array

[255, 51, 102], [255, 102, 102], [255, 153, 102], [255, 204, 102], [255, 255, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FF3366, #FF6666, #FF9966, #FFCC66, #FFFF66 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: #ff3366; --color-2: #ff6666; --color-3: #ff9966; --color-4: #ffcc66; --color-5: #ffff66. 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 sunset-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