← Back to Editor

#CC4541 · #892A2E · #651E2C · #2B1F21 · #462633

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

#CC4541

Crimson · Sienna · Passion Red

HEX
#CC4541
RGB
rgb(204, 69, 65)
HSL
hsl(2, 58%, 53%)
HSB
hsb(2, 68%, 80%)
CMYK
cmyk(0%, 66%, 68%, 20%)
Oklch
oklch(58.0% 0.172 25.7)

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

#892A2E

Crimson · Brown · Wine Red

HEX
#892A2E
RGB
rgb(137, 42, 46)
HSL
hsl(357, 53%, 35%)
HSB
hsb(357, 69%, 54%)
CMYK
cmyk(0%, 69%, 66%, 46%)
Oklch
oklch(43.1% 0.129 22.1)

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

#651E2C

Crimson · Maroon · Wine Red

HEX
#651E2C
RGB
rgb(101, 30, 44)
HSL
hsl(348, 54%, 26%)
HSB
hsb(348, 70%, 40%)
CMYK
cmyk(0%, 70%, 56%, 60%)
Oklch
oklch(35.1% 0.102 12.4)

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

#2B1F21

Crimson · Black · Deep Berry

HEX
#2B1F21
RGB
rgb(43, 31, 33)
HSL
hsl(350, 16%, 15%)
HSB
hsb(350, 28%, 17%)
CMYK
cmyk(0%, 28%, 23%, 83%)
Oklch
oklch(25.5% 0.019 7.3)

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

#462633

Dark Violet · DarkSlateGray · Raspberry

HEX
#462633
RGB
rgb(70, 38, 51)
HSL
hsl(336, 30%, 21%)
HSB
hsb(336, 46%, 27%)
CMYK
cmyk(0%, 46%, 27%, 73%)
Oklch
oklch(31.5% 0.052 354.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC4541
42C8CD

Analogous

CD4283
CC4541
CD8C42

Triadic

CC4541
42CD46
4642CD

Split-Comp.

CC4541
42CD8C
4283CD

Tetradic

CC4541
83CD42
42C8CD
8C42CD

Contrast Matrix WCAG 2.1 Contrast

CC4541
892A2E
651E2C
2B1F21
462633
—
1.8
Fail
2.5
Fail
3.4
AA Large
2.8
Fail
1.8
Fail
—
1.4
Fail
1.8
Fail
1.5
Fail
2.5
Fail
1.4
Fail
—
1.3
Fail
1.1
Fail
3.4
AA Large
1.8
Fail
1.3
Fail
—
1.2
Fail
2.8
Fail
1.5
Fail
1.1
Fail
1.2
Fail
—
White BG
4.7AA
8.6AAA
11.8AAA
15.9AAA
13.2AAA
Black BG
4.5AA Large
2.4Fail
1.8Fail
1.3Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

929042
605F2D
464629
262621
383830

Deuteranopia

99A342
656C2D
4A5028
272720
3A3C2F

Tritanopia

C54343
842C2C
612625
2A2020
442D2D

Achromatopsia

6D6D6D
474747
353535
232323
313131

Shades & Tints Shades & Tints

#CC4541

Dark
Light

#892A2E

Dark
Light

#651E2C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc4541;
  --color-2: #892a2e;
  --color-3: #651e2c;
  --color-4: #2b1f21;
  --color-5: #462633;
}

SCSS

$color-1: #cc4541;
$color-2: #892a2e;
$color-3: #651e2c;
$color-4: #2b1f21;
$color-5: #462633;

TAILWIND

colors: {
  'brand-1': '#cc4541',
  'brand-2': '#892a2e',
  'brand-3': '#651e2c',
  'brand-4': '#2b1f21',
  'brand-5': '#462633',
}

RGB Array

[204, 69, 65], [137, 42, 46], [101, 30, 44], [43, 31, 33], [70, 38, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC4541, #892A2E, #651E2C, #2B1F21, #462633 is ideal for: tech websites, dark mode UIs, game UIs. 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: #cc4541; --color-2: #892a2e; --color-3: #651e2c; --color-4: #2b1f21; --color-5: #462633. 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 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