← Back to Editor

#ACB382 · #63962C · #3F6B2C · #24452C · #233027

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#ACB382

Fresh Green · DarkSeaGreen · Sunflower

HEX
#ACB382
RGB
rgb(172, 179, 130)
HSL
hsl(69, 24%, 61%)
HSB
hsb(69, 27%, 70%)
CMYK
cmyk(4%, 0%, 27%, 30%)
Oklch
oklch(74.9% 0.067 114.7)

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

#63962C

Grass Green · DarkOliveGreen · Forest Green

HEX
#63962C
RGB
rgb(99, 150, 44)
HSL
hsl(89, 55%, 38%)
HSB
hsb(89, 71%, 59%)
CMYK
cmyk(34%, 0%, 71%, 41%)
Oklch
oklch(61.5% 0.146 131.7)

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

#3F6B2C

Celadon · DarkOliveGreen · Forest Green

HEX
#3F6B2C
RGB
rgb(63, 107, 44)
HSL
hsl(102, 42%, 30%)
HSB
hsb(102, 59%, 42%)
CMYK
cmyk(41%, 0%, 59%, 58%)
Oklch
oklch(48.0% 0.105 137.2)

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

#24452C

Celadon · DarkSlateGray · Forest Green

HEX
#24452C
RGB
rgb(36, 69, 44)
HSL
hsl(135, 31%, 21%)
HSB
hsb(135, 48%, 27%)
CMYK
cmyk(48%, 0%, 36%, 73%)
Oklch
oklch(35.7% 0.058 150.4)

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

#233027

Celadon · DarkSlateGray · Dark Green

HEX
#233027
RGB
rgb(35, 48, 39)
HSL
hsl(138, 16%, 16%)
HSB
hsb(138, 27%, 19%)
CMYK
cmyk(27%, 0%, 19%, 81%)
Oklch
oklch(29.4% 0.024 154.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACB382
8B84B3

Analogous

B3A384
ACB382
94B384

Triadic

ACB382
84ACB3
B384AC

Split-Comp.

ACB382
8494B3
A384B3

Tetradic

ACB382
84B3A3
8B84B3
B38494

Contrast Matrix WCAG 2.1 Contrast

ACB382
63962C
3F6B2C
24452C
233027
—
1.6
Fail
2.8
Fail
4.9
AA
6.3
AA
1.6
Fail
—
1.8
Fail
3.0
AA Large
3.9
AA Large
2.8
Fail
1.8
Fail
—
1.7
Fail
2.2
Fail
4.9
AA
3.0
AA Large
1.7
Fail
—
1.3
Fail
6.3
AA
3.9
AA Large
2.2
Fail
1.3
Fail
—
White BG
2.2Fail
3.5AA Large
6.3AA
10.7AAA
13.8AAA
Black BG
9.5AAA
5.9AA
3.4AA Large
2.0Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF8E
797A46
52523B
323332
292929

Deuteranopia

AFAE91
76724C
504C3F
302E34
28272A

Tritanopia

AC9799
665A5E
41474A
263738
242B2B

Achromatopsia

ABABAB
7B7B7B
575757
383838
2B2B2B

Shades & Tints Shades & Tints

#ACB382

Dark
Light

#63962C

Dark
Light

#3F6B2C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #acb382;
  --color-2: #63962c;
  --color-3: #3f6b2c;
  --color-4: #24452c;
  --color-5: #233027;
}

SCSS

$color-1: #acb382;
$color-2: #63962c;
$color-3: #3f6b2c;
$color-4: #24452c;
$color-5: #233027;

TAILWIND

colors: {
  'brand-1': '#acb382',
  'brand-2': '#63962c',
  'brand-3': '#3f6b2c',
  'brand-4': '#24452c',
  'brand-5': '#233027',
}

RGB Array

[172, 179, 130], [99, 150, 44], [63, 107, 44], [36, 69, 44], [35, 48, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ACB382, #63962C, #3F6B2C, #24452C, #233027 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: #acb382; --color-2: #63962c; --color-3: #3f6b2c; --color-4: #24452c; --color-5: #233027. 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