← Back to Editor

#182921 · #244F48 · #706324 · #808507 · #D4E88B

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

#182921

Mineral Blue · Black · Dark Green

HEX
#182921
RGB
rgb(24, 41, 33)
HSL
hsl(152, 26%, 13%)
HSB
hsb(152, 41%, 16%)
CMYK
cmyk(41%, 0%, 20%, 84%)
Oklch
oklch(26.3% 0.027 163.5)

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

#244F48

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#244F48
RGB
rgb(36, 79, 72)
HSL
hsl(170, 37%, 23%)
HSB
hsb(170, 54%, 31%)
CMYK
cmyk(54%, 0%, 9%, 69%)
Oklch
oklch(39.5% 0.050 181.7)

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

#706324

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#706324
RGB
rgb(112, 99, 36)
HSL
hsl(50, 51%, 29%)
HSB
hsb(50, 68%, 44%)
CMYK
cmyk(0%, 12%, 68%, 56%)
Oklch
oklch(49.9% 0.084 97.6)

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

#808507

Autumn Sage · Olive · Honey Gold

HEX
#808507
RGB
rgb(128, 133, 7)
HSL
hsl(62, 90%, 27%)
HSB
hsb(62, 95%, 52%)
CMYK
cmyk(4%, 0%, 95%, 48%)
Oklch
oklch(59.3% 0.130 112.4)

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

#D4E88B

Willow Green · Khaki · Apple Green

HEX
#D4E88B
RGB
rgb(212, 232, 139)
HSL
hsl(73, 67%, 73%)
HSB
hsb(73, 40%, 91%)
CMYK
cmyk(9%, 0%, 40%, 9%)
Oklch
oklch(89.5% 0.120 118.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

182921
2A1921

Analogous

192A19
182921
19292A

Triadic

182921
22192A
2A2219

Split-Comp.

182921
2A1929
2A1919

Tetradic

182921
19192A
2A1921
292A19

Contrast Matrix WCAG 2.1 Contrast

182921
244F48
706324
808507
D4E88B
—
1.7
Fail
2.5
Fail
3.8
AA Large
11.4
AAA
1.7
Fail
—
1.5
Fail
2.3
Fail
6.9
AA
2.5
Fail
1.5
Fail
—
1.5
Fail
4.5
AA Large
3.8
AA Large
2.3
Fail
1.5
Fail
—
3.0
Fail
11.4
AAA
6.9
AA
4.5
AA Large
3.0
Fail
—
White BG
15.2AAA
9.2AAA
6.0AA
4.0AA Large
1.3Fail
Black BG
1.4Fail
2.3Fail
3.5AA Large
5.3AA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F2023
37374A
6A6A33
828225
DDDDA2

Deuteranopia

1E1D23
34314A
6B6C37
82822D
DCDAA7

Tritanopia

192425
264B4B
6F3F42
803E43
D5B3B7

Achromatopsia

232323
414141
606060
757575
D7D7D7

Shades & Tints Shades & Tints

#182921

Dark
Light

#244F48

Dark
Light

#706324

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #182921;
  --color-2: #244f48;
  --color-3: #706324;
  --color-4: #808507;
  --color-5: #d4e88b;
}

SCSS

$color-1: #182921;
$color-2: #244f48;
$color-3: #706324;
$color-4: #808507;
$color-5: #d4e88b;

TAILWIND

colors: {
  'brand-1': '#182921',
  'brand-2': '#244f48',
  'brand-3': '#706324',
  'brand-4': '#808507',
  'brand-5': '#d4e88b',
}

RGB Array

[24, 41, 33], [36, 79, 72], [112, 99, 36], [128, 133, 7], [212, 232, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #182921, #244F48, #706324, #808507, #D4E88B 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: #182921; --color-2: #244f48; --color-3: #706324; --color-4: #808507; --color-5: #d4e88b. 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