← Back to Editor

#51060F · #C2581E · #BF2727 · #05737F · #F0CA93

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

#51060F

Vermilion · Maroon · Deep Berry

HEX
#51060F
RGB
rgb(81, 6, 15)
HSL
hsl(353, 86%, 17%)
HSB
hsb(353, 93%, 32%)
CMYK
cmyk(0%, 93%, 81%, 68%)
Oklch
oklch(28.1% 0.105 22.0)

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

#C2581E

Tangerine · Chocolate · Amber Brown

HEX
#C2581E
RGB
rgb(194, 88, 30)
HSL
hsl(21, 73%, 44%)
HSB
hsb(21, 85%, 76%)
CMYK
cmyk(0%, 55%, 85%, 24%)
Oklch
oklch(58.5% 0.152 45.1)

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

#BF2727

Vermilion · FireBrick · Passion Red

HEX
#BF2727
RGB
rgb(191, 39, 39)
HSL
hsl(0, 66%, 45%)
HSB
hsb(0, 80%, 75%)
CMYK
cmyk(0%, 80%, 80%, 25%)
Oklch
oklch(52.5% 0.188 26.7)

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

#05737F

Lake Blue · Teal · Mint Ice

HEX
#05737F
RGB
rgb(5, 115, 127)
HSL
hsl(186, 92%, 26%)
HSB
hsb(186, 96%, 50%)
CMYK
cmyk(96%, 9%, 0%, 50%)
Oklch
oklch(50.8% 0.086 207.6)

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

#F0CA93

Goose Yellow · BurlyWood · Peach Orange

HEX
#F0CA93
RGB
rgb(240, 202, 147)
HSL
hsl(35, 76%, 76%)
HSB
hsb(35, 39%, 94%)
CMYK
cmyk(0%, 16%, 39%, 6%)
Oklch
oklch(85.9% 0.083 76.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51060F
065148

Analogous

510634
51060F
512306

Triadic

51060F
0F5106
060F51

Split-Comp.

51060F
065123
063451

Tetradic

51060F
345106
065148
230651

Contrast Matrix WCAG 2.1 Contrast

51060F
C2581E
BF2727
05737F
F0CA93
—
3.4
AA Large
2.6
Fail
2.7
Fail
9.8
AAA
3.4
AA Large
—
1.3
Fail
1.3
Fail
2.9
Fail
2.6
Fail
1.3
Fail
—
1.1
Fail
3.8
AA Large
2.7
Fail
1.3
Fail
1.1
Fail
—
3.6
AA Large
9.8
AAA
2.9
Fail
3.8
AA Large
3.6
AA Large
—
White BG
15.2AAA
4.5AA Large
5.9AA
5.6AA
1.5Fail
Black BG
1.4Fail
4.7AA
3.5AA Large
3.8AA Large
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31300D
94932C
7D7C27
35367C
E0DFA0

Deuteranopia

353A0C
9AA22F
869127
2E267B
E2E5A4

Tritanopia

4D0B0B
BD373A
B72727
0B7A79
EEABAD

Achromatopsia

1D1D1D
717171
545454
535353
CFCFCF

Shades & Tints Shades & Tints

#51060F

Dark
Light

#C2581E

Dark
Light

#BF2727

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51060f;
  --color-2: #c2581e;
  --color-3: #bf2727;
  --color-4: #05737f;
  --color-5: #f0ca93;
}

SCSS

$color-1: #51060f;
$color-2: #c2581e;
$color-3: #bf2727;
$color-4: #05737f;
$color-5: #f0ca93;

TAILWIND

colors: {
  'brand-1': '#51060f',
  'brand-2': '#c2581e',
  'brand-3': '#bf2727',
  'brand-4': '#05737f',
  'brand-5': '#f0ca93',
}

RGB Array

[81, 6, 15], [194, 88, 30], [191, 39, 39], [5, 115, 127], [240, 202, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51060F, #C2581E, #BF2727, #05737F, #F0CA93 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: #51060f; --color-2: #c2581e; --color-3: #bf2727; --color-4: #05737f; --color-5: #f0ca93. 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