← Back to Editor

#C2776A · #97614B · #6C4337 · #412D2E · #321C21

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 LibraryData Visualization

Color Details Color Details

#C2776A

Crimson · LightCoral · Passion Red

HEX
#C2776A
RGB
rgb(194, 119, 106)
HSL
hsl(9, 42%, 59%)
HSB
hsb(9, 45%, 76%)
CMYK
cmyk(0%, 39%, 45%, 24%)
Oklch
oklch(64.6% 0.097 30.5)

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

#97614B

Tangerine · Sienna · Amber Brown

HEX
#97614B
RGB
rgb(151, 97, 75)
HSL
hsl(17, 34%, 44%)
HSB
hsb(17, 50%, 59%)
CMYK
cmyk(0%, 36%, 50%, 41%)
Oklch
oklch(54.6% 0.078 42.9)

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

#6C4337

Crimson · DarkOliveGreen · Wine Red

HEX
#6C4337
RGB
rgb(108, 67, 55)
HSL
hsl(14, 33%, 32%)
HSB
hsb(14, 49%, 42%)
CMYK
cmyk(0%, 38%, 49%, 58%)
Oklch
oklch(42.7% 0.061 37.1)

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

#412D2E

Crimson · DarkSlateGray · Wine Red

HEX
#412D2E
RGB
rgb(65, 45, 46)
HSL
hsl(357, 18%, 22%)
HSB
hsb(357, 31%, 25%)
CMYK
cmyk(0%, 31%, 29%, 75%)
Oklch
oklch(32.1% 0.030 15.5)

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

#321C21

Crimson · Black · Deep Berry

HEX
#321C21
RGB
rgb(50, 28, 33)
HSL
hsl(346, 28%, 15%)
HSB
hsb(346, 44%, 20%)
CMYK
cmyk(0%, 44%, 34%, 80%)
Oklch
oklch(25.7% 0.035 5.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2776A
6BB5C2

Analogous

C26B89
C2776A
C2A46B

Triadic

C2776A
6BC278
786BC2

Split-Comp.

C2776A
6BC2A4
6B89C2

Tetradic

C2776A
89C26B
6BB5C2
A46BC2

Contrast Matrix WCAG 2.1 Contrast

C2776A
97614B
6C4337
412D2E
321C21
—
1.5
Fail
2.5
Fail
3.7
AA Large
4.6
AA
1.5
Fail
—
1.7
Fail
2.5
Fail
3.1
AA Large
2.5
Fail
1.7
Fail
—
1.5
Fail
1.9
Fail
3.7
AA Large
2.5
Fail
1.5
Fail
—
1.2
Fail
4.6
AA
3.1
AA Large
1.9
Fail
1.2
Fail
—
White BG
3.4AA Large
5.1AA
8.4AAA
12.8AAA
15.9AAA
Black BG
6.1AA
4.1AA Large
2.5Fail
1.6Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A16D
807F50
5A5A3A
38382E
282820

Deuteranopia

A6AB6E
838752
5D603B
3A3B2E
2A2B20

Tritanopia

BE7070
945555
6A3C3D
402E2E
311F1F

Achromatopsia

8C8C8C
6F6F6F
4E4E4E
333333
232323

Shades & Tints Shades & Tints

#C2776A

Dark
Light

#97614B

Dark
Light

#6C4337

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2776a;
  --color-2: #97614b;
  --color-3: #6c4337;
  --color-4: #412d2e;
  --color-5: #321c21;
}

SCSS

$color-1: #c2776a;
$color-2: #97614b;
$color-3: #6c4337;
$color-4: #412d2e;
$color-5: #321c21;

TAILWIND

colors: {
  'brand-1': '#c2776a',
  'brand-2': '#97614b',
  'brand-3': '#6c4337',
  'brand-4': '#412d2e',
  'brand-5': '#321c21',
}

RGB Array

[194, 119, 106], [151, 97, 75], [108, 67, 55], [65, 45, 46], [50, 28, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2776A, #97614B, #6C4337, #412D2E, #321C21 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #c2776a; --color-2: #97614b; --color-3: #6c4337; --color-4: #412d2e; --color-5: #321c21. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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