← Back to Editor

#C23C2A · #A92731 · #6D4B1C · #897747 · #C7A15A

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

#C23C2A

Vermilion · FireBrick · Passion Red

HEX
#C23C2A
RGB
rgb(194, 60, 42)
HSL
hsl(7, 64%, 46%)
HSB
hsb(7, 78%, 76%)
CMYK
cmyk(0%, 69%, 78%, 24%)
Oklch
oklch(55.0% 0.174 30.8)

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

#A92731

Vermilion · Brown · Passion Red

HEX
#A92731
RGB
rgb(169, 39, 49)
HSL
hsl(355, 63%, 41%)
HSB
hsb(355, 77%, 66%)
CMYK
cmyk(0%, 77%, 71%, 34%)
Oklch
oklch(48.6% 0.166 22.2)

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

#6D4B1C

Ochre · DarkOliveGreen · Amber Brown

HEX
#6D4B1C
RGB
rgb(109, 75, 28)
HSL
hsl(35, 59%, 27%)
HSB
hsb(35, 74%, 43%)
CMYK
cmyk(0%, 31%, 74%, 57%)
Oklch
oklch(44.1% 0.077 71.9)

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

#897747

Ochre · DimGray · Honey Gold

HEX
#897747
RGB
rgb(137, 119, 71)
HSL
hsl(44, 32%, 41%)
HSB
hsb(44, 48%, 54%)
CMYK
cmyk(0%, 13%, 48%, 46%)
Oklch
oklch(57.5% 0.070 89.6)

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

#C7A15A

Ginger · SandyBrown · Warm Sun

HEX
#C7A15A
RGB
rgb(199, 161, 90)
HSL
hsl(39, 49%, 57%)
HSB
hsb(39, 55%, 78%)
CMYK
cmyk(0%, 19%, 55%, 22%)
Oklch
oklch(72.9% 0.100 81.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C23C2A
2AAFC0

Analogous

C02A64
C23C2A
C0872A

Triadic

C23C2A
2AC03C
3C2AC0

Split-Comp.

C23C2A
2AC087
2A64C0

Tetradic

C23C2A
64C02A
2AAFC0
872AC0

Contrast Matrix WCAG 2.1 Contrast

C23C2A
A92731
6D4B1C
897747
C7A15A
—
1.3
Fail
1.5
Fail
1.2
Fail
2.2
Fail
1.3
Fail
—
1.1
Fail
1.6
Fail
2.9
Fail
1.5
Fail
1.1
Fail
—
1.8
Fail
3.2
AA Large
1.2
Fail
1.6
Fail
1.8
Fail
—
1.8
Fail
2.2
Fail
2.9
Fail
3.2
AA Large
1.8
Fail
—
White BG
5.3AA
7.0AA
7.9AAA
4.4AA Large
2.4Fail
Black BG
4.0AA Large
3.0AA Large
2.7Fail
4.8AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

88872E
71702F
5E5E27
818153
B7B66B

Deuteranopia

909A2F
78822E
60632A
828455
B9BC6F

Tritanopia

BB3233
A22D2C
6B3032
885C5E
C5797C

Achromatopsia

626262
4F4F4F
505050
777777
A4A4A4

Shades & Tints Shades & Tints

#C23C2A

Dark
Light

#A92731

Dark
Light

#6D4B1C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c23c2a;
  --color-2: #a92731;
  --color-3: #6d4b1c;
  --color-4: #897747;
  --color-5: #c7a15a;
}

SCSS

$color-1: #c23c2a;
$color-2: #a92731;
$color-3: #6d4b1c;
$color-4: #897747;
$color-5: #c7a15a;

TAILWIND

colors: {
  'brand-1': '#c23c2a',
  'brand-2': '#a92731',
  'brand-3': '#6d4b1c',
  'brand-4': '#897747',
  'brand-5': '#c7a15a',
}

RGB Array

[194, 60, 42], [169, 39, 49], [109, 75, 28], [137, 119, 71], [199, 161, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C23C2A, #A92731, #6D4B1C, #897747, #C7A15A 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: #c23c2a; --color-2: #a92731; --color-3: #6d4b1c; --color-4: #897747; --color-5: #c7a15a. 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