← Back to Editor

#151B33 · #B10712 · #9D031B · #D81C1A · #F77515

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

#151B33

Indigo · MidnightBlue · Deep Sea Blue

HEX
#151B33
RGB
rgb(21, 27, 51)
HSL
hsl(228, 42%, 14%)
HSB
hsb(228, 59%, 20%)
CMYK
cmyk(59%, 47%, 0%, 80%)
Oklch
oklch(23.0% 0.047 271.6)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#B10712

Vermilion · FireBrick · Wine Red

HEX
#B10712
RGB
rgb(177, 7, 18)
HSL
hsl(356, 92%, 36%)
HSB
hsb(356, 96%, 69%)
CMYK
cmyk(0%, 96%, 90%, 31%)
Oklch
oklch(48.0% 0.193 27.3)

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

#9D031B

Vermilion · DarkRed · Wine Red

HEX
#9D031B
RGB
rgb(157, 3, 27)
HSL
hsl(351, 96%, 31%)
HSB
hsb(351, 98%, 62%)
CMYK
cmyk(0%, 98%, 83%, 38%)
Oklch
oklch(44.0% 0.176 24.0)

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

#D81C1A

Vermilion · Crimson · Passion Red

HEX
#D81C1A
RGB
rgb(216, 28, 26)
HSL
hsl(1, 79%, 47%)
HSB
hsb(1, 88%, 85%)
CMYK
cmyk(0%, 87%, 88%, 15%)
Oklch
oklch(56.3% 0.218 28.3)

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

#F77515

Tangerine · Chocolate · Warm Sun

HEX
#F77515
RGB
rgb(247, 117, 21)
HSL
hsl(25, 93%, 53%)
HSB
hsb(25, 91%, 97%)
CMYK
cmyk(0%, 53%, 91%, 3%)
Oklch
oklch(70.5% 0.184 48.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

151B33
332D15

Analogous

152A33
151B33
1E1533

Triadic

151B33
33151B
1B3315

Split-Comp.

151B33
331E15
2A3315

Tetradic

151B33
33152A
332D15
15331E

Contrast Matrix WCAG 2.1 Contrast

151B33
B10712
9D031B
D81C1A
F77515
—
2.4
Fail
2.0
Fail
3.3
AA Large
6.1
AA
2.4
Fail
—
1.2
Fail
1.4
Fail
2.6
Fail
2.0
Fail
1.2
Fail
—
1.7
Fail
3.0
AA Large
3.3
AA Large
1.4
Fail
1.7
Fail
—
1.8
Fail
6.1
AA
2.6
Fail
3.0
AA Large
1.8
Fail
—
White BG
17.0AAA
7.2AAA
8.5AAA
5.1AA
2.8Fail
Black BG
1.2Fail
2.9Fail
2.5Fail
4.1AA Large
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

18182D
67660F
5A5915
87851A
BFBE2C

Deuteranopia

17172C
717E0F
636F14
92A01B
C6D032

Tritanopia

152928
A90D0D
951110
CF1B1B
F03F43

Achromatopsia

1C1C1C
3B3B3B
343434
545454
919191

Shades & Tints Shades & Tints

#151B33

Dark
Light

#B10712

Dark
Light

#9D031B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #151b33;
  --color-2: #b10712;
  --color-3: #9d031b;
  --color-4: #d81c1a;
  --color-5: #f77515;
}

SCSS

$color-1: #151b33;
$color-2: #b10712;
$color-3: #9d031b;
$color-4: #d81c1a;
$color-5: #f77515;

TAILWIND

colors: {
  'brand-1': '#151b33',
  'brand-2': '#b10712',
  'brand-3': '#9d031b',
  'brand-4': '#d81c1a',
  'brand-5': '#f77515',
}

RGB Array

[21, 27, 51], [177, 7, 18], [157, 3, 27], [216, 28, 26], [247, 117, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #151B33, #B10712, #9D031B, #D81C1A, #F77515 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #151b33; --color-2: #b10712; --color-3: #9d031b; --color-4: #d81c1a; --color-5: #f77515. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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