#372C3A + #60A45B + #808162 + #9F5854 + #E82243 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#372C3A

Dark Plum · DarkSlateGray · Dark Purple

HEX

#372C3A

RGB

rgb(55, 44, 58)

HSL

hsl(287, 14%, 20%)

HSB

hsb(287, 24%, 23%)

CMYK

cmyk(5%, 24%, 0%, 77%)

Oklch

oklch(31.1% 0.029 318.9)

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

#60A45B

Celadon · MediumSeaGreen · Olive Green

HEX

#60A45B

RGB

rgb(96, 164, 91)

HSL

hsl(116, 29%, 50%)

HSB

hsb(116, 45%, 64%)

CMYK

cmyk(41%, 0%, 45%, 36%)

Oklch

oklch(65.5% 0.126 142.5)

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

#808162

Autumn Sage · Gray · Honey Gold

HEX

#808162

RGB

rgb(128, 129, 98)

HSL

hsl(62, 14%, 45%)

HSB

hsb(62, 24%, 51%)

CMYK

cmyk(1%, 0%, 24%, 49%)

Oklch

oklch(59.4% 0.045 109.2)

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

#9F5854

Crimson · Sienna · Passion Red

HEX

#9F5854

RGB

rgb(159, 88, 84)

HSL

hsl(3, 31%, 48%)

HSB

hsb(3, 47%, 62%)

CMYK

cmyk(0%, 45%, 47%, 38%)

Oklch

oklch(54.2% 0.094 24.1)

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

#E82243

Vermilion · Crimson · Passion Red

HEX

#E82243

RGB

rgb(232, 34, 67)

HSL

hsl(350, 81%, 52%)

HSB

hsb(350, 85%, 91%)

CMYK

cmyk(0%, 85%, 71%, 9%)

Oklch

oklch(60.0% 0.225 20.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372C3A

2F3A2C

Analogous

302C3A

372C3A

3A2C36

Triadic

372C3A

3A372C

2C3A37

Split-Comp.

372C3A

363A2C

2C3A30

Tetradic

372C3A

3A302C

2F3A2C

2C363A

Contrast Matrix WCAG 2.1 Contrast

372C3A	60A45B	808162	9F5854	E82243
—	4.4 AA Large	3.3 AA Large	2.5 Fail	3.0 Fail
4.4 AA Large	—	1.3 Fail	1.7 Fail	1.5 Fail
3.3 AA Large	1.3 Fail	—	1.3 Fail	1.1 Fail
2.5 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
3.0 Fail	1.5 Fail	1.1 Fail	1.2 Fail	—

White BG

13.3AAA

3.0AA Large

4.0AA Large

5.3AA

4.4AA Large

Black BG

1.6Fail

7.0AA

5.2AA

4.0AA Large

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

323237

7D7E6D

80806A

808055

92903B

Deuteranopia

333436

7A7471

80806B

848A55

9EAD39

Tritanopia

363433

637B7E

806F71

9B5656

DE3533

Achromatopsia

313131

878787

7D7D7D

6D6D6D

616161

Shades & Tints Shades & Tints

#372C3A

Dark

Light

#60A45B

Dark

Light

#808162

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372c3a;
  --color-2: #60a45b;
  --color-3: #808162;
  --color-4: #9f5854;
  --color-5: #e82243;
}

SCSS

$color-1: #372c3a;
$color-2: #60a45b;
$color-3: #808162;
$color-4: #9f5854;
$color-5: #e82243;

TAILWIND

colors: {
  'brand-1': '#372c3a',
  'brand-2': '#60a45b',
  'brand-3': '#808162',
  'brand-4': '#9f5854',
  'brand-5': '#e82243',
}

RGB Array

[55, 44, 58], [96, 164, 91], [128, 129, 98], [159, 88, 84], [232, 34, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #372C3A, #60A45B, #808162, #9F5854, #E82243 is ideal for: corporate websites, product showcases, portfolios. 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: #372c3a; --color-2: #60a45b; --color-3: #808162; --color-4: #9f5854; --color-5: #e82243. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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