#372A24 + #424034 + #5B6856 + #819E7F + #7E1000 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#372A24

Tangerine · DarkSlateGray · Cinnamon

HEX

#372A24

RGB

rgb(55, 42, 36)

HSL

hsl(19, 21%, 18%)

HSB

hsb(19, 35%, 22%)

CMYK

cmyk(0%, 24%, 35%, 78%)

Oklch

oklch(29.8% 0.022 46.1)

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

#424034

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#424034

RGB

rgb(66, 64, 52)

HSL

hsl(51, 12%, 23%)

HSB

hsb(51, 21%, 26%)

CMYK

cmyk(0%, 3%, 21%, 74%)

Oklch

oklch(37.0% 0.020 99.5)

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

#5B6856

Celadon · DimGray · Charcoal

HEX

#5B6856

RGB

rgb(91, 104, 86)

HSL

hsl(103, 9%, 37%)

HSB

hsb(103, 17%, 41%)

CMYK

cmyk(12%, 0%, 17%, 59%)

Oklch

oklch(50.1% 0.032 137.0)

Traditional「Celadon」· Paint「Charcoal」· Creative Midnight Shadow

#819E7F

Celadon · Gray · Olive Green

HEX

#819E7F

RGB

rgb(129, 158, 127)

HSL

hsl(116, 14%, 56%)

HSB

hsb(116, 20%, 62%)

CMYK

cmyk(18%, 0%, 20%, 38%)

Oklch

oklch(66.8% 0.056 143.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#7E1000

Vermilion · Maroon · Wine Red

HEX

#7E1000

RGB

rgb(126, 16, 0)

HSL

hsl(8, 100%, 25%)

HSB

hsb(8, 100%, 49%)

CMYK

cmyk(0%, 87%, 100%, 51%)

Oklch

oklch(38.1% 0.145 31.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372A24

243138

Analogous

382428

372A24

383424

Triadic

372A24

24382A

2A2438

Split-Comp.

372A24

243834

242838

Tetradic

372A24

283824

243138

342438

Contrast Matrix WCAG 2.1 Contrast

372A24	424034	5B6856	819E7F	7E1000
—	1.3 Fail	2.3 Fail	4.7 AA	1.3 Fail
1.3 Fail	—	1.8 Fail	3.5 AA Large	1.0 Fail
2.3 Fail	1.8 Fail	—	2.0 Fail	1.8 Fail
4.7 AA	3.5 AA Large	2.0 Fail	—	3.6 AA Large
1.3 Fail	1.0 Fail	1.8 Fail	3.6 AA Large	—

White BG

13.8AAA

10.4AAA

5.9AA

2.9Fail

10.7AAA

Black BG

1.5Fail

2.0Fail

3.6AA Large

7.1AAA

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

313125

414137

61615A

8E8E87

4E4D04

Deuteranopia

323326

414138

605F5B

8C8A88

555D05

Tritanopia

362727

42393A

5C5E5F

828C8E

780708

Achromatopsia

2D2D2D

3F3F3F

626262

929292

2F2F2F

Shades & Tints Shades & Tints

#372A24

Dark

Light

#424034

Dark

Light

#5B6856

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372a24;
  --color-2: #424034;
  --color-3: #5b6856;
  --color-4: #819e7f;
  --color-5: #7e1000;
}

SCSS

$color-1: #372a24;
$color-2: #424034;
$color-3: #5b6856;
$color-4: #819e7f;
$color-5: #7e1000;

TAILWIND

colors: {
  'brand-1': '#372a24',
  'brand-2': '#424034',
  'brand-3': '#5b6856',
  'brand-4': '#819e7f',
  'brand-5': '#7e1000',
}

RGB Array

[55, 42, 36], [66, 64, 52], [91, 104, 86], [129, 158, 127], [126, 16, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #372A24, #424034, #5B6856, #819E7F, #7E1000 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: #372a24; --color-2: #424034; --color-3: #5b6856; --color-4: #819e7f; --color-5: #7e1000. 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