#3C3128 + #6C1900 + #CE4A23 + #A7934D + #78691E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3C3128

Tangerine · DarkSlateGray · Cinnamon

HEX

#3C3128

RGB

rgb(60, 49, 40)

HSL

hsl(27, 20%, 20%)

HSB

hsb(27, 33%, 24%)

CMYK

cmyk(0%, 18%, 33%, 76%)

Oklch

oklch(32.2% 0.022 61.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#6C1900

Vermilion · Maroon · Wine Red

HEX

#6C1900

RGB

rgb(108, 25, 0)

HSL

hsl(14, 100%, 21%)

HSB

hsb(14, 100%, 42%)

CMYK

cmyk(0%, 77%, 100%, 58%)

Oklch

oklch(35.2% 0.121 36.0)

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

#CE4A23

Vermilion · Chocolate · Passion Red

HEX

#CE4A23

RGB

rgb(206, 74, 35)

HSL

hsl(14, 71%, 47%)

HSB

hsb(14, 83%, 81%)

CMYK

cmyk(0%, 64%, 83%, 19%)

Oklch

oklch(58.5% 0.175 36.4)

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

#A7934D

Ochre · Gray · Honey Gold

HEX

#A7934D

RGB

rgb(167, 147, 77)

HSL

hsl(47, 37%, 48%)

HSB

hsb(47, 54%, 65%)

CMYK

cmyk(0%, 12%, 54%, 35%)

Oklch

oklch(66.6% 0.093 93.8)

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

#78691E

Autumn Sage · Olive · Honey Gold

HEX

#78691E

RGB

rgb(120, 105, 30)

HSL

hsl(50, 60%, 29%)

HSB

hsb(50, 75%, 47%)

CMYK

cmyk(0%, 13%, 75%, 53%)

Oklch

oklch(52.1% 0.094 97.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3128

29343D

Analogous

3D292A

3C3128

3D3C29

Triadic

3C3128

293D32

32293D

Split-Comp.

3C3128

293D3C

292A3D

Tetradic

3C3128

2A3D29

29343D

3C293D

Contrast Matrix WCAG 2.1 Contrast

3C3128	6C1900	CE4A23	A7934D	78691E
—	1.1 Fail	2.8 Fail	4.2 AA Large	2.3 Fail
1.1 Fail	—	2.6 Fail	3.9 AA Large	2.2 Fail
2.8 Fail	2.6 Fail	—	1.5 Fail	1.2 Fail
4.2 AA Large	3.9 AA Large	1.5 Fail	—	1.8 Fail
2.3 Fail	2.2 Fail	1.2 Fail	1.8 Fail	—

White BG

12.6AAA

11.8AAA

4.5AA

3.0AA Large

5.5AA

Black BG

1.7Fail

1.8Fail

4.6AA

6.9AA

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

37372A

484706

95942C

9E9E5E

727130

Deuteranopia

38392B

4D5308

9DA62F

A0A162

727435

Tritanopia

3B2C2C

680B0C

C73436

A66B6E

773E42

Achromatopsia

333333

2F2F2F

6D6D6D

919191

656565

Shades & Tints Shades & Tints

#3C3128

Dark

Light

#6C1900

Dark

Light

#CE4A23

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3128;
  --color-2: #6c1900;
  --color-3: #ce4a23;
  --color-4: #a7934d;
  --color-5: #78691e;
}

SCSS

$color-1: #3c3128;
$color-2: #6c1900;
$color-3: #ce4a23;
$color-4: #a7934d;
$color-5: #78691e;

TAILWIND

colors: {
  'brand-1': '#3c3128',
  'brand-2': '#6c1900',
  'brand-3': '#ce4a23',
  'brand-4': '#a7934d',
  'brand-5': '#78691e',
}

RGB Array

[60, 49, 40], [108, 25, 0], [206, 74, 35], [167, 147, 77], [120, 105, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C3128, #6C1900, #CE4A23, #A7934D, #78691E 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: #3c3128; --color-2: #6c1900; --color-3: #ce4a23; --color-4: #a7934d; --color-5: #78691e. 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