← Back to Editor

#FF6600 · #003399 · #3399FF · #CCFFFF · #FFFFFF

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

#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

#003399

Indigo · MidnightBlue · Prussian Blue

HEX
#003399
RGB
rgb(0, 51, 153)
HSL
hsl(220, 100%, 30%)
HSB
hsb(220, 100%, 60%)
CMYK
cmyk(100%, 67%, 0%, 40%)
Oklch
oklch(37.1% 0.173 262.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3399FF

Azure · DodgerBlue · Navy Blue

HEX
#3399FF
RGB
rgb(51, 153, 255)
HSL
hsl(210, 100%, 60%)
HSB
hsb(210, 80%, 100%)
CMYK
cmyk(80%, 40%, 0%, 0%)
Oklch
oklch(67.6% 0.176 252.3)

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

#CCFFFF

Sky Blue · Lavender · Glacier Blue

HEX
#CCFFFF
RGB
rgb(204, 255, 255)
HSL
hsl(180, 100%, 90%)
HSB
hsb(180, 20%, 100%)
CMYK
cmyk(20%, 0%, 0%, 0%)
Oklch
oklch(96.5% 0.052 196.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF6600
0099FF

Analogous

FF0019
FF6600
FFE600

Triadic

FF6600
00FF66
6600FF

Split-Comp.

FF6600
00FFE6
0019FF

Tetradic

FF6600
1AFF00
0099FF
E600FF

Contrast Matrix WCAG 2.1 Contrast

FF6600
003399
3399FF
CCFFFF
FFFFFF
—
3.7
AA Large
1.0
Fail
2.7
Fail
2.9
Fail
3.7
AA Large
—
3.7
AA Large
10.0
AAA
10.9
AAA
1.0
Fail
3.7
AA Large
—
2.7
Fail
2.9
Fail
2.7
Fail
10.0
AAA
2.7
Fail
—
1.1
Fail
2.9
Fail
10.9
AAA
2.9
Fail
1.1
Fail
—
White BG
2.9Fail
10.9AAA
2.9Fail
1.1Fail
1.0Fail
Black BG
7.2AAA
1.9Fail
7.1AAA
19.3AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBB19
161780
5F60E6
E2E3FF
FFFFFF

Deuteranopia

C6D11F
130F7A
5952E0
DFDBFF
FFFFFF

Tritanopia

F72C30
036D69
38D3CF
CFFFFF
FFFFFF

Achromatopsia

888888
2F2F2F
868686
F0F0F0
FFFFFF

Shades & Tints Shades & Tints

#FF6600

Dark
Light

#003399

Dark
Light

#3399FF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff6600;
  --color-2: #003399;
  --color-3: #3399ff;
  --color-4: #ccffff;
  --color-5: #ffffff;
}

SCSS

$color-1: #ff6600;
$color-2: #003399;
$color-3: #3399ff;
$color-4: #ccffff;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#ff6600',
  'brand-2': '#003399',
  'brand-3': '#3399ff',
  'brand-4': '#ccffff',
  'brand-5': '#ffffff',
}

RGB Array

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

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF6600, #003399, #3399FF, #CCFFFF, #FFFFFF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #ff6600; --color-2: #003399; --color-3: #3399ff; --color-4: #ccffff; --color-5: #ffffff. 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. 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