← Back to Editor

#4F424E · #5A625F · #8C6E1B · #945909 · #753C06

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4F424E

Rose Purple · DarkSlateGray · Charcoal

HEX
#4F424E
RGB
rgb(79, 66, 78)
HSL
hsl(305, 9%, 28%)
HSB
hsb(305, 16%, 31%)
CMYK
cmyk(0%, 16%, 1%, 69%)
Oklch
oklch(39.7% 0.026 328.5)

Traditional「Rose Purple」· Paint「Charcoal」· Creative Midnight Shadow

#5A625F

Ink Gray · DimGray · Charcoal

HEX
#5A625F
RGB
rgb(90, 98, 95)
HSL
hsl(157, 4%, 37%)
HSB
hsb(157, 8%, 38%)
CMYK
cmyk(8%, 0%, 3%, 62%)
Oklch
oklch(48.8% 0.011 171.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#8C6E1B

Ochre · Olive · Honey Gold

HEX
#8C6E1B
RGB
rgb(140, 110, 27)
HSL
hsl(44, 68%, 33%)
HSB
hsb(44, 81%, 55%)
CMYK
cmyk(0%, 21%, 81%, 45%)
Oklch
oklch(55.3% 0.103 87.5)

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

#945909

Ochre · Sienna · Amber Brown

HEX
#945909
RGB
rgb(148, 89, 9)
HSL
hsl(35, 89%, 31%)
HSB
hsb(35, 94%, 58%)
CMYK
cmyk(0%, 40%, 94%, 42%)
Oklch
oklch(51.9% 0.113 65.5)

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

#753C06

Tangerine · Maroon · Cinnamon

HEX
#753C06
RGB
rgb(117, 60, 6)
HSL
hsl(29, 90%, 24%)
HSB
hsb(29, 95%, 46%)
CMYK
cmyk(0%, 49%, 95%, 54%)
Oklch
oklch(42.1% 0.099 55.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F424E
414E42

Analogous

48414E
4F424E
4E4146

Triadic

4F424E
4D4E41
414D4E

Split-Comp.

4F424E
464E41
414E48

Tetradic

4F424E
4E4841
414E42
41464E

Contrast Matrix WCAG 2.1 Contrast

4F424E
5A625F
8C6E1B
945909
753C06
—
1.5
Fail
2.0
Fail
1.7
Fail
1.1
Fail
1.5
Fail
—
1.3
Fail
1.1
Fail
1.4
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.8
Fail
1.7
Fail
1.1
Fail
1.2
Fail
—
1.5
Fail
1.1
Fail
1.4
Fail
1.8
Fail
1.5
Fail
—
White BG
9.5AAA
6.3AA
4.8AA
5.7AA
8.7AAA
Black BG
2.2Fail
3.3AA Large
4.4AA Large
3.7AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

49494B
5D5E60
7F7F2F
7A7A1C
5C5C13

Deuteranopia

4A4B4A
5D5C60
818334
7E8221
606416

Tritanopia

4E4948
5A6060
8B3F42
912C2F
721D20

Achromatopsia

474747
5F5F5F
6E6E6E
626262
474747

Shades & Tints Shades & Tints

#4F424E

Dark
Light

#5A625F

Dark
Light

#8C6E1B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f424e;
  --color-2: #5a625f;
  --color-3: #8c6e1b;
  --color-4: #945909;
  --color-5: #753c06;
}

SCSS

$color-1: #4f424e;
$color-2: #5a625f;
$color-3: #8c6e1b;
$color-4: #945909;
$color-5: #753c06;

TAILWIND

colors: {
  'brand-1': '#4f424e',
  'brand-2': '#5a625f',
  'brand-3': '#8c6e1b',
  'brand-4': '#945909',
  'brand-5': '#753c06',
}

RGB Array

[79, 66, 78], [90, 98, 95], [140, 110, 27], [148, 89, 9], [117, 60, 6]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F424E, #5A625F, #8C6E1B, #945909, #753C06 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: #4f424e; --color-2: #5a625f; --color-3: #8c6e1b; --color-4: #945909; --color-5: #753c06. 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