← Back to Editor

#948C7F · #7B857D · #6E7C7C · #34576B · #3E3F41

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

#948C7F

Ginger · Gray · Warm Gray

HEX
#948C7F
RGB
rgb(148, 140, 127)
HSL
hsl(37, 9%, 54%)
HSB
hsb(37, 14%, 58%)
CMYK
cmyk(0%, 5%, 14%, 42%)
Oklch
oklch(64.3% 0.021 80.1)

Traditional「Ginger」· Paint「Warm Gray」· Creative Urban Concrete

#7B857D

Ink Gray · Gray · Warm Gray

HEX
#7B857D
RGB
rgb(123, 133, 125)
HSL
hsl(132, 4%, 50%)
HSB
hsb(132, 8%, 52%)
CMYK
cmyk(8%, 0%, 6%, 48%)
Oklch
oklch(60.6% 0.017 151.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#6E7C7C

Ink Gray · Gray · Warm Gray

HEX
#6E7C7C
RGB
rgb(110, 124, 124)
HSL
hsl(180, 6%, 46%)
HSB
hsb(180, 11%, 49%)
CMYK
cmyk(11%, 0%, 0%, 51%)
Oklch
oklch(57.5% 0.017 196.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#34576B

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#34576B
RGB
rgb(52, 87, 107)
HSL
hsl(202, 35%, 31%)
HSB
hsb(202, 51%, 42%)
CMYK
cmyk(51%, 19%, 0%, 58%)
Oklch
oklch(43.9% 0.052 234.8)

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

#3E3F41

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3E3F41
RGB
rgb(62, 63, 65)
HSL
hsl(220, 2%, 25%)
HSB
hsb(220, 5%, 25%)
CMYK
cmyk(5%, 3%, 0%, 75%)
Oklch
oklch(36.7% 0.004 264.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

948C7F
7F8794

Analogous

94827F
948C7F
92947F

Triadic

948C7F
7F948C
8C7F94

Split-Comp.

948C7F
7F9294
827F94

Tetradic

948C7F
7F9482
7F8794
947F92

Contrast Matrix WCAG 2.1 Contrast

948C7F
7B857D
6E7C7C
34576B
3E3F41
—
1.1
Fail
1.3
Fail
2.3
Fail
3.2
AA Large
1.1
Fail
—
1.1
Fail
2.0
Fail
2.8
Fail
1.3
Fail
1.1
Fail
—
1.8
Fail
2.4
Fail
2.3
Fail
2.0
Fail
1.8
Fail
—
1.4
Fail
3.2
AA Large
2.8
Fail
2.4
Fail
1.4
Fail
—
White BG
3.3AA Large
3.8AA Large
4.3AA Large
7.7AAA
10.5AAA
Black BG
6.3AA
5.5AA
4.8AA
2.7Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

919082
7F7F7F
74747C
434366
3E3E41

Deuteranopia

919283
7F7E7F
73727C
413F65
3E3E40

Tritanopia

948585
7C8081
6F7C7C
366262
3E4040

Achromatopsia

8D8D8D
818181
787878
4F4F4F
3F3F3F

Shades & Tints Shades & Tints

#948C7F

Dark
Light

#7B857D

Dark
Light

#6E7C7C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #948c7f;
  --color-2: #7b857d;
  --color-3: #6e7c7c;
  --color-4: #34576b;
  --color-5: #3e3f41;
}

SCSS

$color-1: #948c7f;
$color-2: #7b857d;
$color-3: #6e7c7c;
$color-4: #34576b;
$color-5: #3e3f41;

TAILWIND

colors: {
  'brand-1': '#948c7f',
  'brand-2': '#7b857d',
  'brand-3': '#6e7c7c',
  'brand-4': '#34576b',
  'brand-5': '#3e3f41',
}

RGB Array

[148, 140, 127], [123, 133, 125], [110, 124, 124], [52, 87, 107], [62, 63, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #948C7F, #7B857D, #6E7C7C, #34576B, #3E3F41 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #948c7f; --color-2: #7b857d; --color-3: #6e7c7c; --color-4: #34576b; --color-5: #3e3f41. 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. 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