← Back to Editor

#C76C22 · #CF2D2D · #B51535 · #820E2F · #400820

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#C76C22

Tangerine · Chocolate · Amber Brown

HEX
#C76C22
RGB
rgb(199, 108, 34)
HSL
hsl(27, 71%, 46%)
HSB
hsb(27, 83%, 78%)
CMYK
cmyk(0%, 46%, 83%, 22%)
Oklch
oklch(62.4% 0.141 54.3)

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

#CF2D2D

Vermilion · Crimson · Passion Red

HEX
#CF2D2D
RGB
rgb(207, 45, 45)
HSL
hsl(0, 64%, 49%)
HSB
hsb(0, 78%, 81%)
CMYK
cmyk(0%, 78%, 78%, 19%)
Oklch
oklch(55.9% 0.198 26.5)

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

#B51535

Vermilion · FireBrick · Wine Red

HEX
#B51535
RGB
rgb(181, 21, 53)
HSL
hsl(348, 79%, 40%)
HSB
hsb(348, 88%, 71%)
CMYK
cmyk(0%, 88%, 71%, 29%)
Oklch
oklch(49.7% 0.189 18.8)

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

#820E2F

Dark Violet · Brown · Camellia

HEX
#820E2F
RGB
rgb(130, 14, 47)
HSL
hsl(343, 81%, 28%)
HSB
hsb(343, 89%, 51%)
CMYK
cmyk(0%, 89%, 64%, 49%)
Oklch
oklch(39.4% 0.147 12.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#400820

Dark Violet · Black · Raspberry

HEX
#400820
RGB
rgb(64, 8, 32)
HSL
hsl(334, 78%, 14%)
HSB
hsb(334, 88%, 25%)
CMYK
cmyk(0%, 88%, 50%, 75%)
Oklch
oklch(25.1% 0.087 0.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C76C22
227EC9

Analogous

C9222A
C76C22
C9C022

Triadic

C76C22
22C96D
6D22C9

Split-Comp.

C76C22
22C9C0
222AC9

Tetradic

C76C22
2AC922
227EC9
C022C9

Contrast Matrix WCAG 2.1 Contrast

C76C22
CF2D2D
B51535
820E2F
400820
—
1.4
Fail
1.8
Fail
2.7
Fail
4.4
AA Large
1.4
Fail
—
1.3
Fail
2.0
Fail
3.2
AA Large
1.8
Fail
1.3
Fail
—
1.5
Fail
2.5
Fail
2.7
Fail
2.0
Fail
1.5
Fail
—
1.6
Fail
4.4
AA Large
3.2
AA Large
2.5
Fail
1.6
Fail
—
White BG
3.8AA Large
5.2AA
6.7AA
10.2AAA
16.5AAA
Black BG
5.6AA
4.1AA Large
3.1AA Large
2.1Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F34
89872D
706E2D
504F27
28271A

Deuteranopia

A5AC38
929E2D
79852B
575F25
2B2F19

Tritanopia

C24245
C72D2D
AD2726
7C211F
3D1615

Achromatopsia

7F7F7F
5D5D5D
484848
343434
1B1B1B

Shades & Tints Shades & Tints

#C76C22

Dark
Light

#CF2D2D

Dark
Light

#B51535

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c76c22;
  --color-2: #cf2d2d;
  --color-3: #b51535;
  --color-4: #820e2f;
  --color-5: #400820;
}

SCSS

$color-1: #c76c22;
$color-2: #cf2d2d;
$color-3: #b51535;
$color-4: #820e2f;
$color-5: #400820;

TAILWIND

colors: {
  'brand-1': '#c76c22',
  'brand-2': '#cf2d2d',
  'brand-3': '#b51535',
  'brand-4': '#820e2f',
  'brand-5': '#400820',
}

RGB Array

[199, 108, 34], [207, 45, 45], [181, 21, 53], [130, 14, 47], [64, 8, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C76C22, #CF2D2D, #B51535, #820E2F, #400820 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #c76c22; --color-2: #cf2d2d; --color-3: #b51535; --color-4: #820e2f; --color-5: #400820. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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