← Back to Editor

#C46C4D · #97715A · #812107 · #220803 · #34383F

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

#C46C4D

Tangerine · Chocolate · Warm Sun

HEX
#C46C4D
RGB
rgb(196, 108, 77)
HSL
hsl(16, 50%, 54%)
HSB
hsb(16, 61%, 77%)
CMYK
cmyk(0%, 45%, 61%, 23%)
Oklch
oklch(62.5% 0.121 40.0)

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

#97715A

Tangerine · Gray · Amber Brown

HEX
#97715A
RGB
rgb(151, 113, 90)
HSL
hsl(23, 25%, 47%)
HSB
hsb(23, 40%, 59%)
CMYK
cmyk(0%, 25%, 40%, 41%)
Oklch
oklch(58.1% 0.059 52.4)

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

#812107

Vermilion · Maroon · Wine Red

HEX
#812107
RGB
rgb(129, 33, 7)
HSL
hsl(13, 90%, 27%)
HSB
hsb(13, 95%, 51%)
CMYK
cmyk(0%, 74%, 95%, 49%)
Oklch
oklch(40.2% 0.135 34.7)

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

#220803

Vermilion · Black · Deep Berry

HEX
#220803
RGB
rgb(34, 8, 3)
HSL
hsl(10, 84%, 7%)
HSB
hsb(10, 91%, 13%)
CMYK
cmyk(0%, 76%, 91%, 87%)
Oklch
oklch(17.8% 0.047 36.4)

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

#34383F

Indigo · DarkSlateGray · Prussian Blue

HEX
#34383F
RGB
rgb(52, 56, 63)
HSL
hsl(218, 10%, 23%)
HSB
hsb(218, 17%, 25%)
CMYK
cmyk(17%, 11%, 0%, 75%)
Oklch
oklch(34.0% 0.013 261.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C46C4D
4FA5C4

Analogous

C44F6A
C46C4D
C4A94F

Triadic

C46C4D
4FC46E
6E4FC4

Split-Comp.

C46C4D
4FC4A9
4F6AC4

Tetradic

C46C4D
6AC44F
4FA5C4
A94FC4

Contrast Matrix WCAG 2.1 Contrast

C46C4D
97715A
812107
220803
34383F
—
1.2
Fail
2.6
Fail
5.1
AA
3.1
AA Large
1.2
Fail
—
2.2
Fail
4.4
AA Large
2.7
Fail
2.6
Fail
2.2
Fail
—
2.0
Fail
1.2
Fail
5.1
AA
4.4
AA Large
2.0
Fail
—
1.6
Fail
3.1
AA Large
2.7
Fail
1.2
Fail
1.6
Fail
—
White BG
3.8AA Large
4.4AA Large
9.7AAA
19.0AAA
11.8AAA
Black BG
5.6AA
4.8AA
2.2Fail
1.1Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9D55
878660
57570D
171704
36363D

Deuteranopia

A3AA56
898C61
5D640F
181A05
36353D

Tritanopia

C05A5C
956465
7C1213
210505
343C3C

Achromatopsia

838383
7A7A7A
3B3B3B
0F0F0F
383838

Shades & Tints Shades & Tints

#C46C4D

Dark
Light

#97715A

Dark
Light

#812107

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c46c4d;
  --color-2: #97715a;
  --color-3: #812107;
  --color-4: #220803;
  --color-5: #34383f;
}

SCSS

$color-1: #c46c4d;
$color-2: #97715a;
$color-3: #812107;
$color-4: #220803;
$color-5: #34383f;

TAILWIND

colors: {
  'brand-1': '#c46c4d',
  'brand-2': '#97715a',
  'brand-3': '#812107',
  'brand-4': '#220803',
  'brand-5': '#34383f',
}

RGB Array

[196, 108, 77], [151, 113, 90], [129, 33, 7], [34, 8, 3], [52, 56, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C46C4D, #97715A, #812107, #220803, #34383F 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: #c46c4d; --color-2: #97715a; --color-3: #812107; --color-4: #220803; --color-5: #34383f. 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