← Back to Editor

#78878D · #565E64 · #4A4B4E · #8F755C · #F3D77B

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 LibraryData Visualization

Color Details Color Details

#78878D

Slate Blue · SlateGray · Warm Gray

HEX
#78878D
RGB
rgb(120, 135, 141)
HSL
hsl(197, 8%, 51%)
HSB
hsb(197, 15%, 55%)
CMYK
cmyk(15%, 4%, 0%, 45%)
Oklch
oklch(61.3% 0.020 223.8)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#565E64

Slate Blue · DimGray · Charcoal

HEX
#565E64
RGB
rgb(86, 94, 100)
HSL
hsl(206, 8%, 36%)
HSB
hsb(206, 14%, 39%)
CMYK
cmyk(14%, 6%, 0%, 61%)
Oklch
oklch(47.7% 0.014 240.1)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#4A4B4E

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4A4B4E
RGB
rgb(74, 75, 78)
HSL
hsl(225, 3%, 30%)
HSB
hsb(225, 5%, 31%)
CMYK
cmyk(5%, 4%, 0%, 69%)
Oklch
oklch(41.3% 0.005 271.3)

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

#8F755C

Tangerine · Gray · Amber Brown

HEX
#8F755C
RGB
rgb(143, 117, 92)
HSL
hsl(29, 22%, 46%)
HSB
hsb(29, 36%, 56%)
CMYK
cmyk(0%, 18%, 36%, 44%)
Oklch
oklch(58.1% 0.049 65.5)

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

#F3D77B

Goose Yellow · Khaki · Sunflower

HEX
#F3D77B
RGB
rgb(243, 215, 123)
HSL
hsl(46, 83%, 72%)
HSB
hsb(46, 49%, 95%)
CMYK
cmyk(0%, 12%, 49%, 5%)
Oklch
oklch(88.3% 0.116 92.9)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

78878D
8C7E78

Analogous

788C88
78878D
787C8C

Triadic

78878D
8C7886
868C78

Split-Comp.

78878D
8C787C
8C8878

Tetradic

78878D
88788C
8C7E78
7C8C78

Contrast Matrix WCAG 2.1 Contrast

78878D
565E64
4A4B4E
8F755C
F3D77B
—
1.8
Fail
2.3
Fail
1.2
Fail
2.6
Fail
1.8
Fail
—
1.3
Fail
1.5
Fail
4.7
AA
2.3
Fail
1.3
Fail
—
2.0
Fail
6.2
AA
1.2
Fail
1.5
Fail
2.0
Fail
—
3.0
AA Large
2.6
Fail
4.7
AA
6.2
AA
3.0
AA Large
—
White BG
3.7AA Large
6.6AA
8.7AAA
4.3AA Large
1.4Fail
Black BG
5.6AA
3.2AA Large
2.4Fail
4.9AA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7F8C
595A63
4A4A4D
848462
E7E791

Deuteranopia

7E7D8B
595862
4A4A4D
858764
E9EB97

Tritanopia

798A8A
566161
4A4D4D
8E6768
F2A3A7

Achromatopsia

838383
5C5C5C
4B4B4B
7A7A7A
D5D5D5

Shades & Tints Shades & Tints

#78878D

Dark
Light

#565E64

Dark
Light

#4A4B4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #78878d;
  --color-2: #565e64;
  --color-3: #4a4b4e;
  --color-4: #8f755c;
  --color-5: #f3d77b;
}

SCSS

$color-1: #78878d;
$color-2: #565e64;
$color-3: #4a4b4e;
$color-4: #8f755c;
$color-5: #f3d77b;

TAILWIND

colors: {
  'brand-1': '#78878d',
  'brand-2': '#565e64',
  'brand-3': '#4a4b4e',
  'brand-4': '#8f755c',
  'brand-5': '#f3d77b',
}

RGB Array

[120, 135, 141], [86, 94, 100], [74, 75, 78], [143, 117, 92], [243, 215, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #78878D, #565E64, #4A4B4E, #8F755C, #F3D77B is ideal for: brand design, premium product pages, magazine layouts, 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: #78878d; --color-2: #565e64; --color-3: #4a4b4e; --color-4: #8f755c; --color-5: #f3d77b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco 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