#474A2F + #E3D914 + #B8AF11 + #332822 + #4C2726 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#474A2F

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#474A2F

RGB

rgb(71, 74, 47)

HSL

hsl(67, 22%, 24%)

HSB

hsb(67, 36%, 29%)

CMYK

cmyk(4%, 0%, 36%, 71%)

Oklch

oklch(39.9% 0.043 113.5)

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

#E3D914

Autumn Sage · Gold · Honey Gold

HEX

#E3D914

RGB

rgb(227, 217, 20)

HSL

hsl(57, 84%, 48%)

HSB

hsb(57, 91%, 89%)

CMYK

cmyk(0%, 4%, 91%, 11%)

Oklch

oklch(86.6% 0.182 106.2)

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

#B8AF11

Autumn Sage · GoldenRod · Honey Gold

HEX

#B8AF11

RGB

rgb(184, 175, 17)

HSL

hsl(57, 83%, 39%)

HSB

hsb(57, 91%, 72%)

CMYK

cmyk(0%, 5%, 91%, 28%)

Oklch

oklch(73.8% 0.154 105.8)

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

#332822

Tangerine · DarkSlateGray · Cinnamon

HEX

#332822

RGB

rgb(51, 40, 34)

HSL

hsl(21, 20%, 17%)

HSB

hsb(21, 33%, 20%)

CMYK

cmyk(0%, 22%, 33%, 80%)

Oklch

oklch(28.7% 0.020 50.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#4C2726

Crimson · DarkSlateGray · Wine Red

HEX

#4C2726

RGB

rgb(76, 39, 38)

HSL

hsl(2, 33%, 22%)

HSB

hsb(2, 50%, 30%)

CMYK

cmyk(0%, 49%, 50%, 70%)

Oklch

oklch(32.2% 0.056 22.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

474A2F

33304B

Analogous

4B4030

474A2F

3A4B30

Triadic

474A2F

30484B

4B3048

Split-Comp.

474A2F

303A4B

40304B

Tetradic

474A2F

304B40

33304B

4B303A

Contrast Matrix WCAG 2.1 Contrast

474A2F	E3D914	B8AF11	332822	4C2726
—	6.2 AA	4.0 AA Large	1.6 Fail	1.4 Fail
6.2 AA	—	1.5 Fail	9.7 AAA	8.7 AAA
4.0 AA Large	1.5 Fail	—	6.3 AA	5.6 AA
1.6 Fail	9.7 AAA	6.3 AA	—	1.1 Fail
1.4 Fail	8.7 AAA	5.6 AA	1.1 Fail	—

White BG

9.2AAA

1.5Fail

2.3Fail

14.3AAA

12.9AAA

Black BG

2.3Fail

14.2AAA

9.2AAA

1.5Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

484836

DFDF44

B4B437

2E2E23

3C3C26

Deuteranopia

484837

DFE04F

B5B540

2F3024

3E4126

Tritanopia

473B3C

E26972

B8555C

322525

4A2626

Achromatopsia

464646

C6C6C6

A0A0A0

2B2B2B

323232

Shades & Tints Shades & Tints

#474A2F

Dark

Light

#E3D914

Dark

Light

#B8AF11

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #474a2f;
  --color-2: #e3d914;
  --color-3: #b8af11;
  --color-4: #332822;
  --color-5: #4c2726;
}

SCSS

$color-1: #474a2f;
$color-2: #e3d914;
$color-3: #b8af11;
$color-4: #332822;
$color-5: #4c2726;

TAILWIND

colors: {
  'brand-1': '#474a2f',
  'brand-2': '#e3d914',
  'brand-3': '#b8af11',
  'brand-4': '#332822',
  'brand-5': '#4c2726',
}

RGB Array

[71, 74, 47], [227, 217, 20], [184, 175, 17], [51, 40, 34], [76, 39, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #474A2F, #E3D914, #B8AF11, #332822, #4C2726 is ideal for: tech websites, dark mode UIs, game UIs. 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: #474a2f; --color-2: #e3d914; --color-3: #b8af11; --color-4: #332822; --color-5: #4c2726. 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. 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