← Back to Editor

#C4C38A · #5A746B · #3C4154 · #3D2B43 · #361832

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

#C4C38A

Fresh Green · Tan · Sunflower

HEX
#C4C38A
RGB
rgb(196, 195, 138)
HSL
hsl(59, 33%, 65%)
HSB
hsb(59, 30%, 77%)
CMYK
cmyk(0%, 1%, 30%, 23%)
Oklch
oklch(80.4% 0.075 107.1)

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

#5A746B

Mineral Blue · DimGray · Forest Green

HEX
#5A746B
RGB
rgb(90, 116, 107)
HSL
hsl(159, 13%, 40%)
HSB
hsb(159, 22%, 45%)
CMYK
cmyk(22%, 0%, 8%, 55%)
Oklch
oklch(53.6% 0.034 171.8)

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

#3C4154

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C4154
RGB
rgb(60, 65, 84)
HSL
hsl(228, 17%, 28%)
HSB
hsb(228, 29%, 33%)
CMYK
cmyk(29%, 23%, 0%, 67%)
Oklch
oklch(37.9% 0.033 273.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3D2B43

Dark Plum · DarkSlateGray · Eggplant

HEX
#3D2B43
RGB
rgb(61, 43, 67)
HSL
hsl(285, 22%, 22%)
HSB
hsb(285, 36%, 26%)
CMYK
cmyk(9%, 36%, 0%, 74%)
Oklch
oklch(32.0% 0.048 317.5)

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

#361832

Rose Purple · DarkSlateGray · Dark Purple

HEX
#361832
RGB
rgb(54, 24, 50)
HSL
hsl(308, 38%, 15%)
HSB
hsb(308, 56%, 21%)
CMYK
cmyk(0%, 56%, 7%, 79%)
Oklch
oklch(26.3% 0.063 332.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4C38A
8889C3

Analogous

C3A588
C4C38A
A7C388

Triadic

C4C38A
88C3C2
C288C3

Split-Comp.

C4C38A
88A7C3
A588C3

Tetradic

C4C38A
88C3A5
8889C3
C388A7

Contrast Matrix WCAG 2.1 Contrast

C4C38A
5A746B
3C4154
3D2B43
361832
—
2.8
Fail
5.5
AA
7.1
AAA
8.6
AAA
2.8
Fail
—
2.0
Fail
2.6
Fail
3.1
AA Large
5.5
AA
2.0
Fail
—
1.3
Fail
1.6
Fail
7.1
AAA
2.6
Fail
1.3
Fail
—
1.2
Fail
8.6
AAA
3.1
AA Large
1.6
Fail
1.2
Fail
—
White BG
1.8Fail
5.1AA
10.1AAA
12.9AAA
15.7AAA
Black BG
11.5AAA
4.1AA Large
2.1Fail
1.6Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C498
65656D
3E3E4F
35353D
29292C

Deuteranopia

C4C49B
64626E
3E3E4E
36383C
2B2D2A

Tritanopia

C4A3A5
5B6F6F
3C4C4B
3C3938
352726

Achromatopsia

BDBDBD
6B6B6B
424242
333333
242424

Shades & Tints Shades & Tints

#C4C38A

Dark
Light

#5A746B

Dark
Light

#3C4154

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4c38a;
  --color-2: #5a746b;
  --color-3: #3c4154;
  --color-4: #3d2b43;
  --color-5: #361832;
}

SCSS

$color-1: #c4c38a;
$color-2: #5a746b;
$color-3: #3c4154;
$color-4: #3d2b43;
$color-5: #361832;

TAILWIND

colors: {
  'brand-1': '#c4c38a',
  'brand-2': '#5a746b',
  'brand-3': '#3c4154',
  'brand-4': '#3d2b43',
  'brand-5': '#361832',
}

RGB Array

[196, 195, 138], [90, 116, 107], [60, 65, 84], [61, 43, 67], [54, 24, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4C38A, #5A746B, #3C4154, #3D2B43, #361832 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: #c4c38a; --color-2: #5a746b; --color-3: #3c4154; --color-4: #3d2b43; --color-5: #361832. 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