← Back to Editor

#FF3300 · #FF6600 · #99CC33 · #3399CC · #FFCC33

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

#FF3300

Vermilion · OrangeRed · Passion Red

HEX
#FF3300
RGB
rgb(255, 51, 0)
HSL
hsl(12, 100%, 50%)
HSB
hsb(12, 100%, 100%)
CMYK
cmyk(0%, 80%, 100%, 0%)
Oklch
oklch(64.6% 0.241 32.6)

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

#FF6600

Tangerine · OrangeRed · Amber Brown

HEX
#FF6600
RGB
rgb(255, 102, 0)
HSL
hsl(24, 100%, 50%)
HSB
hsb(24, 100%, 100%)
CMYK
cmyk(0%, 60%, 100%, 0%)
Oklch
oklch(69.6% 0.204 43.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#99CC33

Grass Green · GreenYellow · Olive Green

HEX
#99CC33
RGB
rgb(153, 204, 51)
HSL
hsl(80, 60%, 50%)
HSB
hsb(80, 75%, 80%)
CMYK
cmyk(25%, 0%, 75%, 20%)
Oklch
oklch(78.2% 0.182 126.8)

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

#3399CC

Lake Blue · SteelBlue · Navy Blue

HEX
#3399CC
RGB
rgb(51, 153, 204)
HSL
hsl(200, 60%, 50%)
HSB
hsb(200, 75%, 80%)
CMYK
cmyk(75%, 25%, 0%, 20%)
Oklch
oklch(64.8% 0.119 235.0)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3300
00CCFF

Analogous

FF004C
FF3300
FFB300

Triadic

FF3300
00FF33
3300FF

Split-Comp.

FF3300
00FFB3
004CFF

Tetradic

FF3300
4DFF00
00CCFF
B300FF

Contrast Matrix WCAG 2.1 Contrast

FF3300
FF6600
99CC33
3399CC
FFCC33
—
1.2
Fail
1.9
Fail
1.1
Fail
2.4
Fail
1.2
Fail
—
1.5
Fail
1.1
Fail
1.9
Fail
1.9
Fail
1.5
Fail
—
1.7
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.7
Fail
—
2.1
Fail
2.4
Fail
1.9
Fail
1.3
Fail
2.1
Fail
—
White BG
3.7AA Large
2.9Fail
1.9Fail
3.2AA Large
1.5Fail
Black BG
5.7AA
7.2AAA
11.0AAA
6.6AA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A50C
BDBB19
AFB058
5F60C0
E9E858

Deuteranopia

B3C20F
C6D11F
ACA861
5952BD
ECF061

Tritanopia

F51618
F72C30
9C757C
38B6B4
FC757C

Achromatopsia

6A6A6A
888888
ABABAB
808080
CACACA

Shades & Tints Shades & Tints

#FF3300

Dark
Light

#FF6600

Dark
Light

#99CC33

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3300;
  --color-2: #ff6600;
  --color-3: #99cc33;
  --color-4: #3399cc;
  --color-5: #ffcc33;
}

SCSS

$color-1: #ff3300;
$color-2: #ff6600;
$color-3: #99cc33;
$color-4: #3399cc;
$color-5: #ffcc33;

TAILWIND

colors: {
  'brand-1': '#ff3300',
  'brand-2': '#ff6600',
  'brand-3': '#99cc33',
  'brand-4': '#3399cc',
  'brand-5': '#ffcc33',
}

RGB Array

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

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3300, #FF6600, #99CC33, #3399CC, #FFCC33 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: #ff3300; --color-2: #ff6600; --color-3: #99cc33; --color-4: #3399cc; --color-5: #ffcc33. 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