← Back to Editor

#C7C561 · #0A1414 · #063332 · #9C2123 · #CE2124

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C7C561

Autumn Sage · BurlyWood · Sunflower

HEX
#C7C561
RGB
rgb(199, 197, 97)
HSL
hsl(59, 48%, 58%)
HSB
hsb(59, 51%, 78%)
CMYK
cmyk(0%, 1%, 51%, 22%)
Oklch
oklch(80.5% 0.123 107.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#0A1414

Slate Blue · Black · Peacock Green

HEX
#0A1414
RGB
rgb(10, 20, 20)
HSL
hsl(180, 33%, 6%)
HSB
hsb(180, 50%, 8%)
CMYK
cmyk(50%, 0%, 0%, 92%)
Oklch
oklch(18.2% 0.015 195.9)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#063332

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#063332
RGB
rgb(6, 51, 50)
HSL
hsl(179, 79%, 11%)
HSB
hsb(179, 88%, 20%)
CMYK
cmyk(88%, 0%, 2%, 80%)
Oklch
oklch(29.2% 0.046 192.7)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#9C2123

Vermilion · Brown · Wine Red

HEX
#9C2123
RGB
rgb(156, 33, 35)
HSL
hsl(359, 65%, 37%)
HSB
hsb(359, 79%, 61%)
CMYK
cmyk(0%, 79%, 78%, 39%)
Oklch
oklch(45.5% 0.159 25.6)

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

#CE2124

Vermilion · FireBrick · Passion Red

HEX
#CE2124
RGB
rgb(206, 33, 36)
HSL
hsl(359, 72%, 47%)
HSB
hsb(359, 84%, 81%)
CMYK
cmyk(0%, 84%, 83%, 19%)
Oklch
oklch(54.8% 0.206 26.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7C561
6062C7

Analogous

C79260
C7C561
96C760

Triadic

C7C561
60C7C6
C660C7

Split-Comp.

C7C561
6096C7
9260C7

Tetradic

C7C561
60C792
6062C7
C76096

Contrast Matrix WCAG 2.1 Contrast

C7C561
0A1414
063332
9C2123
CE2124
—
10.3
AAA
7.6
AAA
4.4
AA Large
3.0
Fail
10.3
AAA
—
1.4
Fail
2.4
Fail
3.4
AA Large
7.6
AAA
1.4
Fail
—
1.7
Fail
2.5
Fail
4.4
AA Large
2.4
Fail
1.7
Fail
—
1.5
Fail
3.0
Fail
3.4
AA Large
2.5
Fail
1.5
Fail
—
White BG
1.8Fail
18.7AAA
13.7AAA
7.9AAA
5.4AA
Black BG
11.6AAA
1.1Fail
1.5Fail
2.7Fail
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C679
0E0E14
191A32
676623
838223

Deuteranopia

C6C67F
0E0D14
171432
6E7722
8D9A23

Tritanopia

C78C91
0B1414
083232
962222
C52323

Achromatopsia

BABABA
111111
252525
464646
555555

Shades & Tints Shades & Tints

#C7C561

Dark
Light

#0A1414

Dark
Light

#063332

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7c561;
  --color-2: #0a1414;
  --color-3: #063332;
  --color-4: #9c2123;
  --color-5: #ce2124;
}

SCSS

$color-1: #c7c561;
$color-2: #0a1414;
$color-3: #063332;
$color-4: #9c2123;
$color-5: #ce2124;

TAILWIND

colors: {
  'brand-1': '#c7c561',
  'brand-2': '#0a1414',
  'brand-3': '#063332',
  'brand-4': '#9c2123',
  'brand-5': '#ce2124',
}

RGB Array

[199, 197, 97], [10, 20, 20], [6, 51, 50], [156, 33, 35], [206, 33, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7C561, #0A1414, #063332, #9C2123, #CE2124 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: #c7c561; --color-2: #0a1414; --color-3: #063332; --color-4: #9c2123; --color-5: #ce2124. 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