#4B4A27 + #403317 + #3A2317 + #31121C + #600F97 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4B4A27

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#4B4A27

RGB

rgb(75, 74, 39)

HSL

hsl(58, 32%, 22%)

HSB

hsb(58, 48%, 29%)

CMYK

cmyk(0%, 1%, 48%, 71%)

Oklch

oklch(40.1% 0.053 107.1)

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

#403317

Ochre · DarkOliveGreen · Amber Gold

HEX

#403317

RGB

rgb(64, 51, 23)

HSL

hsl(41, 47%, 17%)

HSB

hsb(41, 64%, 25%)

CMYK

cmyk(0%, 20%, 64%, 75%)

Oklch

oklch(32.8% 0.047 84.8)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#3A2317

Tangerine · Black · Cinnamon

HEX

#3A2317

RGB

rgb(58, 35, 23)

HSL

hsl(21, 43%, 16%)

HSB

hsb(21, 60%, 23%)

CMYK

cmyk(0%, 40%, 60%, 77%)

Oklch

oklch(28.2% 0.041 48.1)

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

#31121C

Dark Violet · Black · Raspberry

HEX

#31121C

RGB

rgb(49, 18, 28)

HSL

hsl(341, 46%, 13%)

HSB

hsb(341, 63%, 19%)

CMYK

cmyk(0%, 63%, 43%, 81%)

Oklch

oklch(23.4% 0.052 1.6)

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

#600F97

Royal Purple · Purple · Eggplant

HEX

#600F97

RGB

rgb(96, 15, 151)

HSL

hsl(276, 82%, 33%)

HSB

hsb(276, 90%, 59%)

CMYK

cmyk(36%, 90%, 0%, 41%)

Oklch

oklch(39.6% 0.194 305.0)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B4A27

26274A

Analogous

4A3726

4B4A27

394A26

Triadic

4B4A27

264A49

49264A

Split-Comp.

4B4A27

26394A

37264A

Tetradic

4B4A27

264A37

26274A

4A2639

Contrast Matrix WCAG 2.1 Contrast

4B4A27	403317	3A2317	31121C	600F97
—	1.4 Fail	1.6 Fail	1.9 Fail	1.1 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.2 Fail
1.6 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.9 Fail	1.4 Fail	1.2 Fail	—	1.6 Fail
1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail	—

White BG

9.1AAA

12.3AAA

14.7AAA

17.0AAA

10.4AAA

Black BG

2.3Fail

1.7Fail

1.4Fail

1.2Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B2F

3A3A1E

30301A

24231A

3D3C76

Deuteranopia

4B4B32

3B3C1F

31331B

252819

42486E

Tritanopia

4B3638

3F2324

391C1D

2F1817

5C5C56

Achromatopsia

464646

343434

292929

1C1C1C

373737

Shades & Tints Shades & Tints

#4B4A27

Dark

Light

#403317

Dark

Light

#3A2317

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b4a27;
  --color-2: #403317;
  --color-3: #3a2317;
  --color-4: #31121c;
  --color-5: #600f97;
}

SCSS

$color-1: #4b4a27;
$color-2: #403317;
$color-3: #3a2317;
$color-4: #31121c;
$color-5: #600f97;

TAILWIND

colors: {
  'brand-1': '#4b4a27',
  'brand-2': '#403317',
  'brand-3': '#3a2317',
  'brand-4': '#31121c',
  'brand-5': '#600f97',
}

RGB Array

[75, 74, 39], [64, 51, 23], [58, 35, 23], [49, 18, 28], [96, 15, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B4A27, #403317, #3A2317, #31121C, #600F97 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: #4b4a27; --color-2: #403317; --color-3: #3a2317; --color-4: #31121c; --color-5: #600f97. 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