← Back to Editor

#0B1938 · #B31B3E · #E0882E · #DFCF3E · #DEF246

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

#0B1938

Indigo · MidnightBlue · Deep Sea Blue

HEX
#0B1938
RGB
rgb(11, 25, 56)
HSL
hsl(221, 67%, 13%)
HSB
hsb(221, 80%, 22%)
CMYK
cmyk(80%, 55%, 0%, 78%)
Oklch
oklch(22.1% 0.063 263.7)

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

#B31B3E

Vermilion · Brown · Wine Red

HEX
#B31B3E
RGB
rgb(179, 27, 62)
HSL
hsl(346, 74%, 40%)
HSB
hsb(346, 85%, 70%)
CMYK
cmyk(0%, 85%, 65%, 30%)
Oklch
oklch(49.8% 0.184 15.7)

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

#E0882E

Ginger · GoldenRod · Warm Sun

HEX
#E0882E
RGB
rgb(224, 136, 46)
HSL
hsl(30, 74%, 53%)
HSB
hsb(30, 79%, 88%)
CMYK
cmyk(0%, 39%, 79%, 12%)
Oklch
oklch(70.6% 0.146 61.2)

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

#DFCF3E

Autumn Sage · GoldenRod · Sunflower

HEX
#DFCF3E
RGB
rgb(223, 207, 62)
HSL
hsl(54, 72%, 56%)
HSB
hsb(54, 72%, 87%)
CMYK
cmyk(0%, 7%, 72%, 13%)
Oklch
oklch(84.3% 0.158 102.9)

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

#DEF246

Fresh Green · GreenYellow · Sunflower

HEX
#DEF246
RGB
rgb(222, 242, 70)
HSL
hsl(67, 87%, 61%)
HSB
hsb(67, 71%, 95%)
CMYK
cmyk(8%, 0%, 71%, 5%)
Oklch
oklch(91.7% 0.187 116.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0B1938
37290B

Analogous

0B2F37
0B1938
130B37

Triadic

0B1938
370B19
19370B

Split-Comp.

0B1938
37130B
2F370B

Tetradic

0B1938
370B2F
37290B
0B3713

Contrast Matrix WCAG 2.1 Contrast

0B1938
B31B3E
E0882E
DFCF3E
DEF246
—
2.6
Fail
6.4
AA
10.8
AAA
14.0
AAA
2.6
Fail
—
2.5
Fail
4.2
AA Large
5.4
AA
6.4
AA
2.5
Fail
—
1.7
Fail
2.2
Fail
10.8
AAA
4.2
AA Large
1.7
Fail
—
1.3
Fail
14.0
AAA
5.4
AA
2.2
Fail
1.3
Fail
—
White BG
17.3AAA
6.7AA
2.7Fail
1.6Fail
1.2Fail
Black BG
1.2Fail
3.1AA Large
7.7AAA
13.1AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

111130
717036
BAB944
D8D861
E7E770

Deuteranopia

100F2F
7A8534
BFC649
D9DA6A
E6E47A

Tritanopia

0C2B29
AB2F2D
DC5559
DE7D83
DF9098

Achromatopsia

181818
4C4C4C
989898
C3C3C3
D8D8D8

Shades & Tints Shades & Tints

#0B1938

Dark
Light

#B31B3E

Dark
Light

#E0882E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0b1938;
  --color-2: #b31b3e;
  --color-3: #e0882e;
  --color-4: #dfcf3e;
  --color-5: #def246;
}

SCSS

$color-1: #0b1938;
$color-2: #b31b3e;
$color-3: #e0882e;
$color-4: #dfcf3e;
$color-5: #def246;

TAILWIND

colors: {
  'brand-1': '#0b1938',
  'brand-2': '#b31b3e',
  'brand-3': '#e0882e',
  'brand-4': '#dfcf3e',
  'brand-5': '#def246',
}

RGB Array

[11, 25, 56], [179, 27, 62], [224, 136, 46], [223, 207, 62], [222, 242, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0B1938, #B31B3E, #E0882E, #DFCF3E, #DEF246 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: #0b1938; --color-2: #b31b3e; --color-3: #e0882e; --color-4: #dfcf3e; --color-5: #def246. 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