← Back to Editor

#04195C · #8C0F0C · #95570C · #D4B81A · #F7FDD0

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

#04195C

Indigo · MidnightBlue · Deep Sea Blue

HEX
#04195C
RGB
rgb(4, 25, 92)
HSL
hsl(226, 92%, 19%)
HSB
hsb(226, 96%, 36%)
CMYK
cmyk(96%, 73%, 0%, 64%)
Oklch
oklch(25.5% 0.122 264.3)

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

#8C0F0C

Vermilion · DarkRed · Wine Red

HEX
#8C0F0C
RGB
rgb(140, 15, 12)
HSL
hsl(1, 84%, 30%)
HSB
hsb(1, 91%, 55%)
CMYK
cmyk(0%, 89%, 91%, 45%)
Oklch
oklch(40.9% 0.158 28.6)

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

#95570C

Ochre · Sienna · Amber Brown

HEX
#95570C
RGB
rgb(149, 87, 12)
HSL
hsl(33, 85%, 32%)
HSB
hsb(33, 92%, 58%)
CMYK
cmyk(0%, 42%, 92%, 42%)
Oklch
oklch(51.7% 0.114 62.8)

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

#D4B81A

Autumn Sage · GoldenRod · Honey Gold

HEX
#D4B81A
RGB
rgb(212, 184, 26)
HSL
hsl(51, 78%, 47%)
HSB
hsb(51, 88%, 83%)
CMYK
cmyk(0%, 13%, 88%, 17%)
Oklch
oklch(78.4% 0.157 97.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F7FDD0

Fresh Green · Beige · Lemon Cream

HEX
#F7FDD0
RGB
rgb(247, 253, 208)
HSL
hsl(68, 92%, 90%)
HSB
hsb(68, 18%, 99%)
CMYK
cmyk(2%, 0%, 18%, 1%)
Oklch
oklch(97.8% 0.059 113.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04195C
5D4804

Analogous

04455D
04195C
1C045D

Triadic

04195C
5D0419
195D04

Split-Comp.

04195C
5D1C04
455D04

Tetradic

04195C
5D0445
5D4804
045D1C

Contrast Matrix WCAG 2.1 Contrast

04195C
8C0F0C
95570C
D4B81A
F7FDD0
—
1.7
Fail
2.8
Fail
8.2
AAA
15.3
AAA
1.7
Fail
—
1.7
Fail
4.9
AA
9.1
AAA
2.8
Fail
1.7
Fail
—
2.9
Fail
5.5
AA
8.2
AAA
4.9
AA
2.9
Fail
—
1.9
Fail
15.3
AAA
9.1
AAA
5.5
AA
1.9
Fail
—
White BG
16.2AAA
9.6AAA
5.8AA
2.0Fail
1.1Fail
Black BG
1.3Fail
2.2Fail
3.6AA Large
10.7AAA
19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0D0D4C
56550D
7A7A1E
C8C840
FAFADB

Deuteranopia

0C0A48
5D670D
7E8223
CACC49
F9F9DE

Tritanopia

053F3C
860D0D
922C30
D35E65
F7E3E5

Achromatopsia

1A1A1A
343434
616161
AEAEAE
F6F6F6

Shades & Tints Shades & Tints

#04195C

Dark
Light

#8C0F0C

Dark
Light

#95570C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04195c;
  --color-2: #8c0f0c;
  --color-3: #95570c;
  --color-4: #d4b81a;
  --color-5: #f7fdd0;
}

SCSS

$color-1: #04195c;
$color-2: #8c0f0c;
$color-3: #95570c;
$color-4: #d4b81a;
$color-5: #f7fdd0;

TAILWIND

colors: {
  'brand-1': '#04195c',
  'brand-2': '#8c0f0c',
  'brand-3': '#95570c',
  'brand-4': '#d4b81a',
  'brand-5': '#f7fdd0',
}

RGB Array

[4, 25, 92], [140, 15, 12], [149, 87, 12], [212, 184, 26], [247, 253, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #04195C, #8C0F0C, #95570C, #D4B81A, #F7FDD0 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: #04195c; --color-2: #8c0f0c; --color-3: #95570c; --color-4: #d4b81a; --color-5: #f7fdd0. 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