#9C7F63 + #351E34 + #7C182A + #DA1B32 + #D86F44 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9C7F63

Tangerine · Gray · Amber Brown

HEX

#9C7F63

RGB

rgb(156, 127, 99)

HSL

hsl(29, 22%, 50%)

HSB

hsb(29, 37%, 61%)

CMYK

cmyk(0%, 19%, 37%, 39%)

Oklch

oklch(61.7% 0.054 65.6)

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

#351E34

Rose Purple · DarkSlateGray · Dark Purple

HEX

#351E34

RGB

rgb(53, 30, 52)

HSL

hsl(303, 28%, 16%)

HSB

hsb(303, 43%, 21%)

CMYK

cmyk(0%, 43%, 2%, 79%)

Oklch

oklch(27.5% 0.051 328.4)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#7C182A

Vermilion · Brown · Wine Red

HEX

#7C182A

RGB

rgb(124, 24, 42)

HSL

hsl(349, 68%, 29%)

HSB

hsb(349, 81%, 49%)

CMYK

cmyk(0%, 81%, 66%, 51%)

Oklch

oklch(38.8% 0.134 16.6)

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

#DA1B32

Vermilion · Crimson · Passion Red

HEX

#DA1B32

RGB

rgb(218, 27, 50)

HSL

hsl(353, 78%, 48%)

HSB

hsb(353, 88%, 85%)

CMYK

cmyk(0%, 88%, 77%, 15%)

Oklch

oklch(56.9% 0.218 23.3)

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

#D86F44

Tangerine · Chocolate · Warm Sun

HEX

#D86F44

RGB

rgb(216, 111, 68)

HSL

hsl(17, 65%, 56%)

HSB

hsb(17, 69%, 85%)

CMYK

cmyk(0%, 49%, 69%, 15%)

Oklch

oklch(65.6% 0.144 42.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C7F63

63809C

Analogous

9C6364

9C7F63

9C9B63

Triadic

9C7F63

639C7F

7F639C

Split-Comp.

9C7F63

639C9B

63649C

Tetradic

9C7F63

649C63

63809C

9B639C

Contrast Matrix WCAG 2.1 Contrast

9C7F63	351E34	7C182A	DA1B32	D86F44
—	4.1 AA Large	2.8 Fail	1.3 Fail	1.1 Fail
4.1 AA Large	—	1.5 Fail	3.0 AA Large	4.5 AA
2.8 Fail	1.5 Fail	—	2.1 Fail	3.1 AA Large
1.3 Fail	3.0 AA Large	2.1 Fail	—	1.5 Fail
1.1 Fail	4.5 AA	3.1 AA Large	1.5 Fail	—

White BG

3.7AA Large

15.1AAA

10.4AAA

5.0AA

3.3AA Large

Black BG

5.6AA

1.4Fail

2.0Fail

4.2AA Large

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F6A

2B2B2F

515026

87862C

ABAA4E

Deuteranopia

91936B

2C2E2D

575E25

92A12B

B1B951

Tritanopia

9B6F70

342A2A

772221

D02827

D35758

Achromatopsia

848484

272727

383838

575757

898989

Shades & Tints Shades & Tints

#9C7F63

Dark

Light

#351E34

Dark

Light

#7C182A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c7f63;
  --color-2: #351e34;
  --color-3: #7c182a;
  --color-4: #da1b32;
  --color-5: #d86f44;
}

SCSS

$color-1: #9c7f63;
$color-2: #351e34;
$color-3: #7c182a;
$color-4: #da1b32;
$color-5: #d86f44;

TAILWIND

colors: {
  'brand-1': '#9c7f63',
  'brand-2': '#351e34',
  'brand-3': '#7c182a',
  'brand-4': '#da1b32',
  'brand-5': '#d86f44',
}

RGB Array

[156, 127, 99], [53, 30, 52], [124, 24, 42], [218, 27, 50], [216, 111, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C7F63, #351E34, #7C182A, #DA1B32, #D86F44 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: #9c7f63; --color-2: #351e34; --color-3: #7c182a; --color-4: #da1b32; --color-5: #d86f44. 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