← Back to Editor

#778385 · #807884 · #7C6E6F · #6A5758 · #3C2C2D

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

#778385

Ink Gray · Gray · Warm Gray

HEX
#778385
RGB
rgb(119, 131, 133)
HSL
hsl(189, 6%, 49%)
HSB
hsb(189, 11%, 52%)
CMYK
cmyk(11%, 2%, 0%, 48%)
Oklch
oklch(60.1% 0.014 208.7)

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

#807884

Ink Gray · Gray · Warm Gray

HEX
#807884
RGB
rgb(128, 120, 132)
HSL
hsl(280, 5%, 49%)
HSB
hsb(280, 9%, 52%)
CMYK
cmyk(3%, 9%, 0%, 48%)
Oklch
oklch(58.4% 0.020 314.7)

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

#7C6E6F

Ink Gray · DimGray · Warm Gray

HEX
#7C6E6F
RGB
rgb(124, 110, 111)
HSL
hsl(356, 6%, 46%)
HSB
hsb(356, 11%, 49%)
CMYK
cmyk(0%, 11%, 10%, 51%)
Oklch
oklch(55.2% 0.018 12.8)

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

#6A5758

Crimson · DimGray · Wine Red

HEX
#6A5758
RGB
rgb(106, 87, 88)
HSL
hsl(357, 10%, 38%)
HSB
hsb(357, 18%, 42%)
CMYK
cmyk(0%, 18%, 17%, 58%)
Oklch
oklch(47.6% 0.025 14.5)

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

#3C2C2D

Crimson · DarkSlateGray · Deep Berry

HEX
#3C2C2D
RGB
rgb(60, 44, 45)
HSL
hsl(356, 15%, 20%)
HSB
hsb(356, 27%, 24%)
CMYK
cmyk(0%, 27%, 25%, 76%)
Oklch
oklch(31.2% 0.024 14.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

778385
847875

Analogous

75847F
778385
757B84

Triadic

778385
847582
828475

Split-Comp.

778385
84757B
847F75

Tetradic

778385
7F7584
847875
7B8475

Contrast Matrix WCAG 2.1 Contrast

778385
807884
7C6E6F
6A5758
3C2C2D
—
1.1
Fail
1.2
Fail
1.7
Fail
3.4
AA Large
1.1
Fail
—
1.1
Fail
1.6
Fail
3.1
AA Large
1.2
Fail
1.1
Fail
—
1.4
Fail
2.7
Fail
1.7
Fail
1.6
Fail
1.4
Fail
—
2.0
Fail
3.4
AA Large
3.1
AA Large
2.7
Fail
2.0
Fail
—
White BG
3.9AA Large
4.3AA Large
4.9AA
6.7AA
13.2AAA
Black BG
5.4AA
4.9AA
4.3AA Large
3.1AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C85
7D7C81
76766F
626258
35352D

Deuteranopia

7C7B84
7D7E80
77786F
636458
36372D

Tritanopia

788484
807F7E
7B6F6F
695858
3B2D2D

Achromatopsia

808080
7C7C7C
727272
5D5D5D
313131

Shades & Tints Shades & Tints

#778385

Dark
Light

#807884

Dark
Light

#7C6E6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #778385;
  --color-2: #807884;
  --color-3: #7c6e6f;
  --color-4: #6a5758;
  --color-5: #3c2c2d;
}

SCSS

$color-1: #778385;
$color-2: #807884;
$color-3: #7c6e6f;
$color-4: #6a5758;
$color-5: #3c2c2d;

TAILWIND

colors: {
  'brand-1': '#778385',
  'brand-2': '#807884',
  'brand-3': '#7c6e6f',
  'brand-4': '#6a5758',
  'brand-5': '#3c2c2d',
}

RGB Array

[119, 131, 133], [128, 120, 132], [124, 110, 111], [106, 87, 88], [60, 44, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #778385, #807884, #7C6E6F, #6A5758, #3C2C2D 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: #778385; --color-2: #807884; --color-3: #7c6e6f; --color-4: #6a5758; --color-5: #3c2c2d. 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