← Back to Editor

#ACA77C · #522B3A · #9F637A · #2B2B2B · #38636C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#ACA77C

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACA77C
RGB
rgb(172, 167, 124)
HSL
hsl(54, 22%, 58%)
HSB
hsb(54, 28%, 67%)
CMYK
cmyk(0%, 3%, 28%, 33%)
Oklch
oklch(72.2% 0.059 102.2)

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

#522B3A

Dark Violet · DarkSlateGray · Raspberry

HEX
#522B3A
RGB
rgb(82, 43, 58)
HSL
hsl(337, 31%, 25%)
HSB
hsb(337, 48%, 32%)
CMYK
cmyk(0%, 48%, 29%, 68%)
Oklch
oklch(34.5% 0.061 356.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#9F637A

Dark Violet · Gray · Rose Pink

HEX
#9F637A
RGB
rgb(159, 99, 122)
HSL
hsl(337, 24%, 51%)
HSB
hsb(337, 38%, 62%)
CMYK
cmyk(0%, 38%, 23%, 38%)
Oklch
oklch(57.2% 0.083 355.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#2B2B2B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2B2B2B
RGB
rgb(43, 43, 43)
HSL
hsl(0, 0%, 17%)
HSB
hsb(0, 0%, 17%)
CMYK
cmyk(0%, 0%, 0%, 83%)
Oklch
oklch(28.9% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#38636C

Slate Blue · DarkSlateGray · Mint Ice

HEX
#38636C
RGB
rgb(56, 99, 108)
HSL
hsl(190, 32%, 32%)
HSB
hsb(190, 48%, 42%)
CMYK
cmyk(48%, 8%, 0%, 58%)
Oklch
oklch(47.2% 0.050 212.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACA77C
7C81AB

Analogous

AB8F7C
ACA77C
99AB7C

Triadic

ACA77C
7CABA7
A77CAB

Split-Comp.

ACA77C
7C99AB
8F7CAB

Tetradic

ACA77C
7CAB8F
7C81AB
AB7C99

Contrast Matrix WCAG 2.1 Contrast

ACA77C
522B3A
9F637A
2B2B2B
38636C
—
4.9
AA
1.9
Fail
5.8
AA
2.7
Fail
4.9
AA
—
2.6
Fail
1.2
Fail
1.8
Fail
1.9
Fail
2.6
Fail
—
3.1
AA Large
1.4
Fail
5.8
AA
1.2
Fail
3.1
AA Large
—
2.1
Fail
2.7
Fail
1.8
Fail
1.4
Fail
2.1
Fail
—
White BG
2.4Fail
11.9AAA
4.6AA
14.2AAA
6.6AA
Black BG
8.6AAA
1.8Fail
4.5AA
1.5Fail
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAA86
414136
858474
2B2B2B
4B4B6A

Deuteranopia

AAAB89
434635
898D73
2B2B2B
484569

Tritanopia

AC8F90
503433
9C706F
2B2B2B
3A6868

Achromatopsia

A4A4A4
383838
787878
2B2B2B
575757

Shades & Tints Shades & Tints

#ACA77C

Dark
Light

#522B3A

Dark
Light

#9F637A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aca77c;
  --color-2: #522b3a;
  --color-3: #9f637a;
  --color-4: #2b2b2b;
  --color-5: #38636c;
}

SCSS

$color-1: #aca77c;
$color-2: #522b3a;
$color-3: #9f637a;
$color-4: #2b2b2b;
$color-5: #38636c;

TAILWIND

colors: {
  'brand-1': '#aca77c',
  'brand-2': '#522b3a',
  'brand-3': '#9f637a',
  'brand-4': '#2b2b2b',
  'brand-5': '#38636c',
}

RGB Array

[172, 167, 124], [82, 43, 58], [159, 99, 122], [43, 43, 43], [56, 99, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ACA77C, #522B3A, #9F637A, #2B2B2B, #38636C is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #aca77c; --color-2: #522b3a; --color-3: #9f637a; --color-4: #2b2b2b; --color-5: #38636c. 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 finance, legal, luxury 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