← Back to Editor

#2C232E · #664370 · #916F5A · #90915A · #86AD7F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2C232E

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2C232E
RGB
rgb(44, 35, 46)
HSL
hsl(289, 14%, 16%)
HSB
hsb(289, 24%, 18%)
CMYK
cmyk(4%, 24%, 0%, 82%)
Oklch
oklch(27.1% 0.024 320.1)

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

#664370

Dark Plum · DimGray · Eggplant

HEX
#664370
RGB
rgb(102, 67, 112)
HSL
hsl(287, 25%, 35%)
HSB
hsb(287, 40%, 44%)
CMYK
cmyk(9%, 40%, 0%, 56%)
Oklch
oklch(44.1% 0.083 318.5)

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

#916F5A

Tangerine · DimGray · Amber Brown

HEX
#916F5A
RGB
rgb(145, 111, 90)
HSL
hsl(23, 23%, 46%)
HSB
hsb(23, 38%, 57%)
CMYK
cmyk(0%, 23%, 38%, 43%)
Oklch
oklch(57.0% 0.053 53.0)

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

#90915A

Autumn Sage · Gray · Honey Gold

HEX
#90915A
RGB
rgb(144, 145, 90)
HSL
hsl(61, 23%, 46%)
HSB
hsb(61, 38%, 57%)
CMYK
cmyk(1%, 0%, 38%, 43%)
Oklch
oklch(64.2% 0.075 109.2)

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

#86AD7F

Celadon · DarkSeaGreen · Olive Green

HEX
#86AD7F
RGB
rgb(134, 173, 127)
HSL
hsl(111, 22%, 59%)
HSB
hsb(111, 27%, 68%)
CMYK
cmyk(23%, 0%, 27%, 32%)
Oklch
oklch(70.7% 0.078 140.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C232E
252F23

Analogous

27232F
2C232E
2F232B

Triadic

2C232E
2F2C23
232F2C

Split-Comp.

2C232E
2B2F23
232F27

Tetradic

2C232E
2F2723
252F23
232B2F

Contrast Matrix WCAG 2.1 Contrast

2C232E
664370
916F5A
90915A
86AD7F
—
1.9
Fail
3.3
AA Large
4.6
AA
6.0
AA
1.9
Fail
—
1.8
Fail
2.5
Fail
3.2
AA Large
3.3
AA Large
1.8
Fail
—
1.4
Fail
1.8
Fail
4.6
AA
2.5
Fail
1.4
Fail
—
1.3
Fail
6.0
AA
3.2
AA Large
1.8
Fail
1.3
Fail
—
White BG
15.1AAA
8.1AAA
4.5AA
3.3AA Large
2.5Fail
Black BG
1.4Fail
2.6Fail
4.6AA
6.4AA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

28282B
575765
82825F
909067
97978A

Deuteranopia

29292B
595B62
848760
90906B
95928D

Tritanopia

2C2929
645D5B
8F6364
907274
889395

Achromatopsia

272727
535353
777777
8A8A8A
9C9C9C

Shades & Tints Shades & Tints

#2C232E

Dark
Light

#664370

Dark
Light

#916F5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c232e;
  --color-2: #664370;
  --color-3: #916f5a;
  --color-4: #90915a;
  --color-5: #86ad7f;
}

SCSS

$color-1: #2c232e;
$color-2: #664370;
$color-3: #916f5a;
$color-4: #90915a;
$color-5: #86ad7f;

TAILWIND

colors: {
  'brand-1': '#2c232e',
  'brand-2': '#664370',
  'brand-3': '#916f5a',
  'brand-4': '#90915a',
  'brand-5': '#86ad7f',
}

RGB Array

[44, 35, 46], [102, 67, 112], [145, 111, 90], [144, 145, 90], [134, 173, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C232E, #664370, #916F5A, #90915A, #86AD7F is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2c232e; --color-2: #664370; --color-3: #916f5a; --color-4: #90915a; --color-5: #86ad7f. 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. 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. Restrained colors convey professionalism and trust. 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