← Back to Editor

#F48224 · #EC3224 · #CCCC66 · #FFFFFF · #003D4C

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

#F48224

Tangerine · Chocolate · Warm Sun

HEX
#F48224
RGB
rgb(244, 130, 36)
HSL
hsl(27, 90%, 55%)
HSB
hsb(27, 85%, 96%)
CMYK
cmyk(0%, 47%, 85%, 4%)
Oklch
oklch(72.1% 0.169 53.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#EC3224

Vermilion · Crimson · Passion Red

HEX
#EC3224
RGB
rgb(236, 50, 36)
HSL
hsl(4, 84%, 53%)
HSB
hsb(4, 85%, 93%)
CMYK
cmyk(0%, 79%, 85%, 7%)
Oklch
oklch(61.4% 0.222 29.5)

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

#CCCC66

Autumn Sage · BurlyWood · Sunflower

HEX
#CCCC66
RGB
rgb(204, 204, 102)
HSL
hsl(60, 50%, 60%)
HSB
hsb(60, 50%, 80%)
CMYK
cmyk(0%, 0%, 50%, 20%)
Oklch
oklch(82.4% 0.125 108.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#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

#003D4C

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003D4C
RGB
rgb(0, 61, 76)
HSL
hsl(192, 100%, 15%)
HSB
hsb(192, 100%, 30%)
CMYK
cmyk(100%, 20%, 0%, 70%)
Oklch
oklch(33.3% 0.061 220.6)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F48224
2597F4

Analogous

F4252F
F48224
F4E925

Triadic

F48224
25F482
8225F4

Split-Comp.

F48224
25F4E9
252FF4

Tetradic

F48224
2FF425
2597F4
E925F4

Contrast Matrix WCAG 2.1 Contrast

F48224
EC3224
CCCC66
FFFFFF
003D4C
—
1.6
Fail
1.5
Fail
2.6
Fail
4.6
AA
1.6
Fail
—
2.5
Fail
4.2
AA Large
2.8
Fail
1.5
Fail
2.5
Fail
—
1.7
Fail
7.0
AA
2.6
Fail
4.2
AA Large
1.7
Fail
—
11.9
AAA
4.6
AA
2.8
Fail
7.0
AA
11.9
AAA
—
White BG
2.6Fail
4.2AA Large
1.7Fail
1.0Fail
11.9AAA
Black BG
8.1AAA
5.0AA
12.4AAA
21.0AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C23B
9B9A27
CCCC7F
FFFFFF
1A1B48

Deuteranopia

C9D240
A6B428
CCCC85
FFFFFF
171248

Tritanopia

EE4D51
E32A2B
CC9296
FFFFFF
034645

Achromatopsia

999999
686868
C0C0C0
FFFFFF
2C2C2C

Shades & Tints Shades & Tints

#F48224

Dark
Light

#EC3224

Dark
Light

#CCCC66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f48224;
  --color-2: #ec3224;
  --color-3: #cccc66;
  --color-4: #ffffff;
  --color-5: #003d4c;
}

SCSS

$color-1: #f48224;
$color-2: #ec3224;
$color-3: #cccc66;
$color-4: #ffffff;
$color-5: #003d4c;

TAILWIND

colors: {
  'brand-1': '#f48224',
  'brand-2': '#ec3224',
  'brand-3': '#cccc66',
  'brand-4': '#ffffff',
  'brand-5': '#003d4c',
}

RGB Array

[244, 130, 36], [236, 50, 36], [204, 204, 102], [255, 255, 255], [0, 61, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F48224, #EC3224, #CCCC66, #FFFFFF, #003D4C is ideal for: social media posters, mobile apps, e-commerce promos, 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: #f48224; --color-2: #ec3224; --color-3: #cccc66; --color-4: #ffffff; --color-5: #003d4c. 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. 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