← Back to Editor

#180E21 · #2D4D46 · #3D7A52 · #B0A704 · #CDCF8F

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

#180E21

Dark Plum · Black · Dark Purple

HEX
#180E21
RGB
rgb(24, 14, 33)
HSL
hsl(272, 40%, 9%)
HSB
hsb(272, 58%, 13%)
CMYK
cmyk(27%, 58%, 0%, 87%)
Oklch
oklch(18.8% 0.040 307.2)

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

#2D4D46

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2D4D46
RGB
rgb(45, 77, 70)
HSL
hsl(167, 26%, 24%)
HSB
hsb(167, 42%, 30%)
CMYK
cmyk(42%, 0%, 9%, 70%)
Oklch
oklch(39.3% 0.040 178.6)

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

#3D7A52

Celadon · SeaGreen · Forest Green

HEX
#3D7A52
RGB
rgb(61, 122, 82)
HSL
hsl(141, 33%, 36%)
HSB
hsb(141, 50%, 48%)
CMYK
cmyk(50%, 0%, 33%, 52%)
Oklch
oklch(52.7% 0.090 153.4)

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

#B0A704

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#B0A704
RGB
rgb(176, 167, 4)
HSL
hsl(57, 96%, 35%)
HSB
hsb(57, 98%, 69%)
CMYK
cmyk(0%, 5%, 98%, 31%)
Oklch
oklch(71.3% 0.151 105.7)

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

#CDCF8F

Fresh Green · Tan · Sunflower

HEX
#CDCF8F
RGB
rgb(205, 207, 143)
HSL
hsl(62, 40%, 69%)
HSB
hsb(62, 31%, 81%)
CMYK
cmyk(1%, 0%, 31%, 19%)
Oklch
oklch(83.8% 0.084 109.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

180E21
16200E

Analogous

0E0E20
180E21
200E20

Triadic

180E21
20180E
0E2018

Split-Comp.

180E21
20200E
0E200E

Tetradic

180E21
200E0E
16200E
0E2020

Contrast Matrix WCAG 2.1 Contrast

180E21
2D4D46
3D7A52
B0A704
CDCF8F
—
2.0
Fail
3.7
AA Large
7.5
AAA
11.5
AAA
2.0
Fail
—
1.8
Fail
3.7
AA Large
5.7
AA
3.7
AA Large
1.8
Fail
—
2.0
Fail
3.1
AA Large
7.5
AAA
3.7
AA Large
2.0
Fail
—
1.5
Fail
11.5
AAA
5.7
AA
3.1
AA Large
1.5
Fail
—
White BG
18.7AAA
9.3AAA
5.1AA
2.5Fail
1.6Fail
Black BG
1.1Fail
2.3Fail
4.1AA Large
8.4AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

14141C
3B3B48
57585C
ACAC2B
CECE9E

Deuteranopia

14151B
393748
544F5E
ADAD35
CECEA2

Tritanopia

171918
2F4949
406365
B04B51
CDABAD

Achromatopsia

131313
434343
636363
979797
C7C7C7

Shades & Tints Shades & Tints

#180E21

Dark
Light

#2D4D46

Dark
Light

#3D7A52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #180e21;
  --color-2: #2d4d46;
  --color-3: #3d7a52;
  --color-4: #b0a704;
  --color-5: #cdcf8f;
}

SCSS

$color-1: #180e21;
$color-2: #2d4d46;
$color-3: #3d7a52;
$color-4: #b0a704;
$color-5: #cdcf8f;

TAILWIND

colors: {
  'brand-1': '#180e21',
  'brand-2': '#2d4d46',
  'brand-3': '#3d7a52',
  'brand-4': '#b0a704',
  'brand-5': '#cdcf8f',
}

RGB Array

[24, 14, 33], [45, 77, 70], [61, 122, 82], [176, 167, 4], [205, 207, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #180E21, #2D4D46, #3D7A52, #B0A704, #CDCF8F 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: #180e21; --color-2: #2d4d46; --color-3: #3d7a52; --color-4: #b0a704; --color-5: #cdcf8f. 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