← Back to Editor

#777050 · #8E5E48 · #B1413C · #D5252F · #F80823

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#777050

Ochre · DimGray · Honey Gold

HEX
#777050
RGB
rgb(119, 112, 80)
HSL
hsl(49, 20%, 39%)
HSB
hsb(49, 33%, 47%)
CMYK
cmyk(0%, 6%, 33%, 53%)
Oklch
oklch(54.3% 0.047 97.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8E5E48

Tangerine · Sienna · Amber Brown

HEX
#8E5E48
RGB
rgb(142, 94, 72)
HSL
hsl(19, 33%, 42%)
HSB
hsb(19, 49%, 56%)
CMYK
cmyk(0%, 34%, 49%, 44%)
Oklch
oklch(52.8% 0.071 45.4)

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

#B1413C

Crimson · Sienna · Passion Red

HEX
#B1413C
RGB
rgb(177, 65, 60)
HSL
hsl(3, 49%, 46%)
HSB
hsb(3, 66%, 69%)
CMYK
cmyk(0%, 63%, 66%, 31%)
Oklch
oklch(53.0% 0.147 25.9)

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

#D5252F

Vermilion · Crimson · Passion Red

HEX
#D5252F
RGB
rgb(213, 37, 47)
HSL
hsl(357, 70%, 49%)
HSB
hsb(357, 83%, 84%)
CMYK
cmyk(0%, 83%, 78%, 16%)
Oklch
oklch(56.5% 0.209 24.9)

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

#F80823

Vermilion · Red · Passion Red

HEX
#F80823
RGB
rgb(248, 8, 35)
HSL
hsl(353, 94%, 50%)
HSB
hsb(353, 97%, 97%)
CMYK
cmyk(0%, 97%, 86%, 3%)
Oklch
oklch(61.8% 0.249 26.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

777050
505777

Analogous

775C50
777050
6B7750

Triadic

777050
507770
705077

Split-Comp.

777050
506B77
5C5077

Tetradic

777050
50775C
505777
77506B

Contrast Matrix WCAG 2.1 Contrast

777050
8E5E48
B1413C
D5252F
F80823
—
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.4
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
White BG
5.0AA
5.5AA
5.7AA
5.1AA
4.2AA Large
Black BG
4.2AA Large
3.8AA Large
3.7AA Large
4.1AA Large
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747458
79794D
817F3D
89872D
908E1C

Deuteranopia

74755A
7C804F
878F3E
93A02C
9EB01B

Tritanopia

775E5F
8C5252
AB3E3E
CC2B2A
EC1716

Achromatopsia

6E6E6E
6A6A6A
626262
5B5B5B
535353

Shades & Tints Shades & Tints

#777050

Dark
Light

#8E5E48

Dark
Light

#B1413C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #777050;
  --color-2: #8e5e48;
  --color-3: #b1413c;
  --color-4: #d5252f;
  --color-5: #f80823;
}

SCSS

$color-1: #777050;
$color-2: #8e5e48;
$color-3: #b1413c;
$color-4: #d5252f;
$color-5: #f80823;

TAILWIND

colors: {
  'brand-1': '#777050',
  'brand-2': '#8e5e48',
  'brand-3': '#b1413c',
  'brand-4': '#d5252f',
  'brand-5': '#f80823',
}

RGB Array

[119, 112, 80], [142, 94, 72], [177, 65, 60], [213, 37, 47], [248, 8, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #777050, #8E5E48, #B1413C, #D5252F, #F80823 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #777050; --color-2: #8e5e48; --color-3: #b1413c; --color-4: #d5252f; --color-5: #f80823. 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. 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 tech, SaaS, healthcare, eco industries. 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