← Back to Editor

#420A0A · #56A896 · #F5E2B5 · #AB1E09 · #F7DF88

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

#420A0A

Vermilion · Maroon · Deep Berry

HEX
#420A0A
RGB
rgb(66, 10, 10)
HSL
hsl(0, 74%, 15%)
HSB
hsb(0, 85%, 26%)
CMYK
cmyk(0%, 85%, 85%, 74%)
Oklch
oklch(25.1% 0.085 25.8)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#56A896

Mineral Blue · CadetBlue · Mint Ice

HEX
#56A896
RGB
rgb(86, 168, 150)
HSL
hsl(167, 32%, 50%)
HSB
hsb(167, 49%, 66%)
CMYK
cmyk(49%, 0%, 11%, 34%)
Oklch
oklch(67.5% 0.085 177.5)

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

#F5E2B5

Goose Yellow · Wheat · Lemon Cream

HEX
#F5E2B5
RGB
rgb(245, 226, 181)
HSL
hsl(42, 76%, 84%)
HSB
hsb(42, 26%, 96%)
CMYK
cmyk(0%, 8%, 26%, 4%)
Oklch
oklch(91.7% 0.062 87.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#AB1E09

Vermilion · FireBrick · Wine Red

HEX
#AB1E09
RGB
rgb(171, 30, 9)
HSL
hsl(8, 90%, 35%)
HSB
hsb(8, 95%, 67%)
CMYK
cmyk(0%, 82%, 95%, 33%)
Oklch
oklch(47.9% 0.178 31.3)

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

#F7DF88

Goose Yellow · Khaki · Sunflower

HEX
#F7DF88
RGB
rgb(247, 223, 136)
HSL
hsl(47, 87%, 75%)
HSB
hsb(47, 45%, 97%)
CMYK
cmyk(0%, 10%, 45%, 3%)
Oklch
oklch(90.5% 0.110 94.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

420A0A
0A4343

Analogous

430A26
420A0A
43260A

Triadic

420A0A
0A430A
0A0A43

Split-Comp.

420A0A
0A4326
0A2643

Tetradic

420A0A
26430A
0A4343
260A43

Contrast Matrix WCAG 2.1 Contrast

420A0A
56A896
F5E2B5
AB1E09
F7DF88
—
5.8
AA
12.8
AAA
2.3
Fail
12.4
AAA
5.8
AA
—
2.2
Fail
2.5
Fail
2.1
Fail
12.8
AAA
2.2
Fail
—
5.6
AA
1.0
Fail
2.3
Fail
2.5
Fail
5.6
AA
—
5.4
AA
12.4
AAA
2.1
Fail
1.0
Fail
5.4
AA
—
White BG
16.4AAA
2.8Fail
1.3Fail
7.2AAA
1.3Fail
Black BG
1.3Fail
7.4AAA
16.4AAA
2.9Fail
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A290A
7A7A9A
EDEDC0
6E6D0E
EDEC9D

Deuteranopia

2D310A
756F9B
EEEFC3
76810F
EEF0A2

Tritanopia

3F0A0A
5A9E9F
F4C8CA
A41213
F6AEB1

Achromatopsia

1B1B1B
8D8D8D
E3E3E3
464646
DCDCDC

Shades & Tints Shades & Tints

#420A0A

Dark
Light

#56A896

Dark
Light

#F5E2B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #420a0a;
  --color-2: #56a896;
  --color-3: #f5e2b5;
  --color-4: #ab1e09;
  --color-5: #f7df88;
}

SCSS

$color-1: #420a0a;
$color-2: #56a896;
$color-3: #f5e2b5;
$color-4: #ab1e09;
$color-5: #f7df88;

TAILWIND

colors: {
  'brand-1': '#420a0a',
  'brand-2': '#56a896',
  'brand-3': '#f5e2b5',
  'brand-4': '#ab1e09',
  'brand-5': '#f7df88',
}

RGB Array

[66, 10, 10], [86, 168, 150], [245, 226, 181], [171, 30, 9], [247, 223, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #420A0A, #56A896, #F5E2B5, #AB1E09, #F7DF88 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: #420a0a; --color-2: #56a896; --color-3: #f5e2b5; --color-4: #ab1e09; --color-5: #f7df88. 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