← Back to Editor

#CC0516 · #B0473C · #9F623E · #87754C · #727F65

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

#CC0516

Vermilion · FireBrick · Passion Red

HEX
#CC0516
RGB
rgb(204, 5, 22)
HSL
hsl(355, 95%, 41%)
HSB
hsb(355, 98%, 80%)
CMYK
cmyk(0%, 98%, 89%, 20%)
Oklch
oklch(53.3% 0.215 27.1)

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

#B0473C

Crimson · Sienna · Passion Red

HEX
#B0473C
RGB
rgb(176, 71, 60)
HSL
hsl(6, 49%, 46%)
HSB
hsb(6, 66%, 69%)
CMYK
cmyk(0%, 60%, 66%, 31%)
Oklch
oklch(53.6% 0.140 28.6)

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

#9F623E

Tangerine · Sienna · Amber Brown

HEX
#9F623E
RGB
rgb(159, 98, 62)
HSL
hsl(22, 44%, 43%)
HSB
hsb(22, 61%, 62%)
CMYK
cmyk(0%, 38%, 61%, 38%)
Oklch
oklch(55.6% 0.094 50.4)

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

#87754C

Ochre · DimGray · Honey Gold

HEX
#87754C
RGB
rgb(135, 117, 76)
HSL
hsl(42, 28%, 41%)
HSB
hsb(42, 44%, 53%)
CMYK
cmyk(0%, 13%, 44%, 47%)
Oklch
oklch(56.9% 0.062 86.8)

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

#727F65

Celadon · DimGray · Olive Green

HEX
#727F65
RGB
rgb(114, 127, 101)
HSL
hsl(90, 11%, 45%)
HSB
hsb(90, 20%, 50%)
CMYK
cmyk(10%, 0%, 20%, 50%)
Oklch
oklch(57.8% 0.042 129.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC0516
05CCBB

Analogous

CC0579
CC0516
CC5805

Triadic

CC0516
16CC05
0516CC

Split-Comp.

CC0516
05CC58
0579CC

Tetradic

CC0516
79CC05
05CCBB
5805CC

Contrast Matrix WCAG 2.1 Contrast

CC0516
B0473C
9F623E
87754C
727F65
—
1.1
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
5.8AA
5.5AA
4.9AA
4.5AA Large
4.3AA Large
Black BG
3.6AA Large
3.8AA Large
4.3AA Large
4.7AA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

767412
83823F
858447
7F7F56
78786B

Deuteranopia

819011
89913F
888D49
808258
77766D

Tritanopia

C20F0E
AB4141
9C4E4F
865E5F
737071

Achromatopsia

424242
656565
707070
767676
787878

Shades & Tints Shades & Tints

#CC0516

Dark
Light

#B0473C

Dark
Light

#9F623E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc0516;
  --color-2: #b0473c;
  --color-3: #9f623e;
  --color-4: #87754c;
  --color-5: #727f65;
}

SCSS

$color-1: #cc0516;
$color-2: #b0473c;
$color-3: #9f623e;
$color-4: #87754c;
$color-5: #727f65;

TAILWIND

colors: {
  'brand-1': '#cc0516',
  'brand-2': '#b0473c',
  'brand-3': '#9f623e',
  'brand-4': '#87754c',
  'brand-5': '#727f65',
}

RGB Array

[204, 5, 22], [176, 71, 60], [159, 98, 62], [135, 117, 76], [114, 127, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC0516, #B0473C, #9F623E, #87754C, #727F65 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: #cc0516; --color-2: #b0473c; --color-3: #9f623e; --color-4: #87754c; --color-5: #727f65. 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