← Back to Editor

#449EB4 · #F8DFB4 · #EEA62B · #F53F1A · #8D220C

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

#449EB4

Slate Blue · SteelBlue · Mint Ice

HEX
#449EB4
RGB
rgb(68, 158, 180)
HSL
hsl(192, 45%, 49%)
HSB
hsb(192, 62%, 71%)
CMYK
cmyk(62%, 12%, 0%, 29%)
Oklch
oklch(65.4% 0.091 216.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F8DFB4

Goose Yellow · Wheat · Peach Orange

HEX
#F8DFB4
RGB
rgb(248, 223, 180)
HSL
hsl(38, 83%, 84%)
HSB
hsb(38, 27%, 97%)
CMYK
cmyk(0%, 10%, 27%, 3%)
Oklch
oklch(91.4% 0.062 81.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#EEA62B

Ginger · GoldenRod · Warm Sun

HEX
#EEA62B
RGB
rgb(238, 166, 43)
HSL
hsl(38, 85%, 55%)
HSB
hsb(38, 82%, 93%)
CMYK
cmyk(0%, 30%, 82%, 7%)
Oklch
oklch(77.6% 0.152 74.9)

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

#F53F1A

Vermilion · OrangeRed · Passion Red

HEX
#F53F1A
RGB
rgb(245, 63, 26)
HSL
hsl(10, 92%, 53%)
HSB
hsb(10, 89%, 96%)
CMYK
cmyk(0%, 74%, 89%, 4%)
Oklch
oklch(63.9% 0.223 32.9)

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

#8D220C

Vermilion · DarkRed · Wine Red

HEX
#8D220C
RGB
rgb(141, 34, 12)
HSL
hsl(10, 84%, 30%)
HSB
hsb(10, 91%, 55%)
CMYK
cmyk(0%, 76%, 91%, 45%)
Oklch
oklch(42.6% 0.146 33.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

449EB4
B55B45

Analogous

45B593
449EB4
4566B5

Triadic

449EB4
B5459F
9FB545

Split-Comp.

449EB4
B54566
B59345

Tetradic

449EB4
9345B5
B55B45
66B545

Contrast Matrix WCAG 2.1 Contrast

449EB4
F8DFB4
EEA62B
F53F1A
8D220C
—
2.4
Fail
1.5
Fail
1.2
Fail
2.9
Fail
2.4
Fail
—
1.6
Fail
2.9
Fail
6.8
AA
1.5
Fail
1.6
Fail
—
1.8
Fail
4.3
AA Large
1.2
Fail
2.9
Fail
1.8
Fail
—
2.4
Fail
2.9
Fail
6.8
AA
4.3
AA Large
2.4
Fail
—
White BG
3.1AA Large
1.3Fail
2.1Fail
3.7AA Large
8.9AAA
Black BG
6.8AA
16.2AAA
10.1AAA
5.6AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6CAF
EDEDBE
CFCE49
A6A523
5F5E11

Deuteranopia

665FAD
EFF1C1
D3D850
B1BE25
656D13

Tritanopia

49AAAA
F7C7C8
EA6065
EC2A2C
881616

Achromatopsia

868686
E2E2E2
AEAEAE
717171
3F3F3F

Shades & Tints Shades & Tints

#449EB4

Dark
Light

#F8DFB4

Dark
Light

#EEA62B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #449eb4;
  --color-2: #f8dfb4;
  --color-3: #eea62b;
  --color-4: #f53f1a;
  --color-5: #8d220c;
}

SCSS

$color-1: #449eb4;
$color-2: #f8dfb4;
$color-3: #eea62b;
$color-4: #f53f1a;
$color-5: #8d220c;

TAILWIND

colors: {
  'brand-1': '#449eb4',
  'brand-2': '#f8dfb4',
  'brand-3': '#eea62b',
  'brand-4': '#f53f1a',
  'brand-5': '#8d220c',
}

RGB Array

[68, 158, 180], [248, 223, 180], [238, 166, 43], [245, 63, 26], [141, 34, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #449EB4, #F8DFB4, #EEA62B, #F53F1A, #8D220C 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: #449eb4; --color-2: #f8dfb4; --color-3: #eea62b; --color-4: #f53f1a; --color-5: #8d220c. 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