← Back to Editor

#2D2731 · #2A3332 · #4F5644 · #C2BE5A · #FFF136

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2D2731

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2D2731
RGB
rgb(45, 39, 49)
HSL
hsl(276, 11%, 17%)
HSB
hsb(276, 20%, 19%)
CMYK
cmyk(8%, 20%, 0%, 81%)
Oklch
oklch(28.3% 0.020 311.8)

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

#2A3332

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2A3332
RGB
rgb(42, 51, 50)
HSL
hsl(173, 10%, 18%)
HSB
hsb(173, 18%, 20%)
CMYK
cmyk(18%, 0%, 2%, 80%)
Oklch
oklch(31.2% 0.012 188.3)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#4F5644

Grass Green · DarkOliveGreen · Forest Green

HEX
#4F5644
RGB
rgb(79, 86, 68)
HSL
hsl(83, 12%, 30%)
HSB
hsb(83, 21%, 34%)
CMYK
cmyk(8%, 0%, 21%, 66%)
Oklch
oklch(44.1% 0.030 124.9)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#C2BE5A

Autumn Sage · BurlyWood · Sunflower

HEX
#C2BE5A
RGB
rgb(194, 190, 90)
HSL
hsl(58, 46%, 56%)
HSB
hsb(58, 54%, 76%)
CMYK
cmyk(0%, 2%, 54%, 24%)
Oklch
oklch(78.4% 0.123 106.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FFF136

Fresh Green · Yellow · Sunflower

HEX
#FFF136
RGB
rgb(255, 241, 54)
HSL
hsl(56, 100%, 61%)
HSB
hsb(56, 79%, 100%)
CMYK
cmyk(0%, 5%, 79%, 0%)
Oklch
oklch(94.0% 0.187 104.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D2731
2A3027

Analogous

282730
2D2731
30272F

Triadic

2D2731
302C27
27302C

Split-Comp.

2D2731
2F3027
273028

Tetradic

2D2731
302827
2A3027
272F30

Contrast Matrix WCAG 2.1 Contrast

2D2731
2A3332
4F5644
C2BE5A
FFF136
—
1.1
Fail
1.9
Fail
7.5
AAA
12.4
AAA
1.1
Fail
—
1.7
Fail
6.7
AA
11.1
AAA
1.9
Fail
1.7
Fail
—
3.9
AA Large
6.5
AA
7.5
AAA
6.7
AA
3.9
AA Large
—
1.7
Fail
12.4
AAA
11.1
AAA
6.5
AA
1.7
Fail
—
White BG
14.5AAA
13.0AAA
7.6AAA
1.9Fail
1.2Fail
Black BG
1.4Fail
1.6Fail
2.7Fail
10.8AAA
17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A2F
2E2E32
525248
C0C072
F9F963

Deuteranopia

2B2B2E
2D2D32
525149
C1C178
FAFB6E

Tritanopia

2D2D2C
2A3232
4F4C4D
C2858A
FE878F

Achromatopsia

2A2A2A
303030
525252
B4B4B4
E0E0E0

Shades & Tints Shades & Tints

#2D2731

Dark
Light

#2A3332

Dark
Light

#4F5644

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d2731;
  --color-2: #2a3332;
  --color-3: #4f5644;
  --color-4: #c2be5a;
  --color-5: #fff136;
}

SCSS

$color-1: #2d2731;
$color-2: #2a3332;
$color-3: #4f5644;
$color-4: #c2be5a;
$color-5: #fff136;

TAILWIND

colors: {
  'brand-1': '#2d2731',
  'brand-2': '#2a3332',
  'brand-3': '#4f5644',
  'brand-4': '#c2be5a',
  'brand-5': '#fff136',
}

RGB Array

[45, 39, 49], [42, 51, 50], [79, 86, 68], [194, 190, 90], [255, 241, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D2731, #2A3332, #4F5644, #C2BE5A, #FFF136 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #2d2731; --color-2: #2a3332; --color-3: #4f5644; --color-4: #c2be5a; --color-5: #fff136. 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. 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. 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