← Back to Editor

#901818 · #F34607 · #F5A218 · #969EAB · #4878A8

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

#901818

Vermilion · Brown · Wine Red

HEX
#901818
RGB
rgb(144, 24, 24)
HSL
hsl(0, 71%, 33%)
HSB
hsb(0, 83%, 56%)
CMYK
cmyk(0%, 83%, 83%, 44%)
Oklch
oklch(42.4% 0.155 27.0)

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

#F34607

Tangerine · OrangeRed · Amber Brown

HEX
#F34607
RGB
rgb(243, 70, 7)
HSL
hsl(16, 94%, 49%)
HSB
hsb(16, 97%, 95%)
CMYK
cmyk(0%, 71%, 97%, 5%)
Oklch
oklch(64.1% 0.217 35.9)

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

#F5A218

Ginger · Orange · Warm Sun

HEX
#F5A218
RGB
rgb(245, 162, 24)
HSL
hsl(37, 92%, 53%)
HSB
hsb(37, 90%, 96%)
CMYK
cmyk(0%, 34%, 90%, 4%)
Oklch
oklch(77.6% 0.162 71.6)

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

#969EAB

Azure · DarkGray · Cobalt Blue

HEX
#969EAB
RGB
rgb(150, 158, 171)
HSL
hsl(217, 11%, 63%)
HSB
hsb(217, 12%, 67%)
CMYK
cmyk(12%, 8%, 0%, 33%)
Oklch
oklch(69.7% 0.021 260.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#4878A8

Indigo · SteelBlue · Navy Blue

HEX
#4878A8
RGB
rgb(72, 120, 168)
HSL
hsl(210, 40%, 47%)
HSB
hsb(210, 57%, 66%)
CMYK
cmyk(57%, 29%, 0%, 34%)
Oklch
oklch(56.0% 0.092 249.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

901818
189090

Analogous

901854
901818
905418

Triadic

901818
189018
181890

Split-Comp.

901818
189054
185490

Tetradic

901818
549018
189090
541890

Contrast Matrix WCAG 2.1 Contrast

901818
F34607
F5A218
969EAB
4878A8
—
2.4
Fail
4.3
AA Large
3.3
AA Large
1.9
Fail
2.4
Fail
—
1.8
Fail
1.4
Fail
1.3
Fail
4.3
AA Large
1.8
Fail
—
1.3
Fail
2.2
Fail
3.3
AA Large
1.4
Fail
1.3
Fail
—
1.7
Fail
1.9
Fail
1.3
Fail
2.2
Fail
1.7
Fail
—
White BG
9.0AAA
3.7AA Large
2.1Fail
2.7Fail
4.6AA
Black BG
2.3Fail
5.7AA
10.1AAA
7.8AAA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5B18
A8A716
D1D039
999AA8
5D5D9C

Deuteranopia

636C18
B2BF1A
D6DC41
9998A7
5A569A

Tritanopia

8A1818
EA2225
F1545A
96A5A5
4A9391

Achromatopsia

3C3C3C
737373
ABABAB
9D9D9D
6F6F6F

Shades & Tints Shades & Tints

#901818

Dark
Light

#F34607

Dark
Light

#F5A218

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #901818;
  --color-2: #f34607;
  --color-3: #f5a218;
  --color-4: #969eab;
  --color-5: #4878a8;
}

SCSS

$color-1: #901818;
$color-2: #f34607;
$color-3: #f5a218;
$color-4: #969eab;
$color-5: #4878a8;

TAILWIND

colors: {
  'brand-1': '#901818',
  'brand-2': '#f34607',
  'brand-3': '#f5a218',
  'brand-4': '#969eab',
  'brand-5': '#4878a8',
}

RGB Array

[144, 24, 24], [243, 70, 7], [245, 162, 24], [150, 158, 171], [72, 120, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #901818, #F34607, #F5A218, #969EAB, #4878A8 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: #901818; --color-2: #f34607; --color-3: #f5a218; --color-4: #969eab; --color-5: #4878a8. 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