← Back to Editor

#778C87 · #736F75 · #59352D · #91644C · #C9AE7B

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

#778C87

Mineral Blue · Gray · Warm Gray

HEX
#778C87
RGB
rgb(119, 140, 135)
HSL
hsl(166, 8%, 51%)
HSB
hsb(166, 15%, 55%)
CMYK
cmyk(15%, 0%, 4%, 45%)
Oklch
oklch(62.2% 0.025 179.5)

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

#736F75

Ink Gray · DimGray · Warm Gray

HEX
#736F75
RGB
rgb(115, 111, 117)
HSL
hsl(280, 3%, 45%)
HSB
hsb(280, 5%, 46%)
CMYK
cmyk(2%, 5%, 0%, 54%)
Oklch
oklch(54.7% 0.010 314.7)

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

#59352D

Crimson · DarkOliveGreen · Wine Red

HEX
#59352D
RGB
rgb(89, 53, 45)
HSL
hsl(11, 33%, 26%)
HSB
hsb(11, 49%, 35%)
CMYK
cmyk(0%, 40%, 49%, 65%)
Oklch
oklch(37.1% 0.054 33.2)

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

#91644C

Tangerine · Sienna · Amber Brown

HEX
#91644C
RGB
rgb(145, 100, 76)
HSL
hsl(21, 31%, 43%)
HSB
hsb(21, 48%, 57%)
CMYK
cmyk(0%, 31%, 48%, 43%)
Oklch
oklch(54.5% 0.069 48.9)

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

#C9AE7B

Ginger · Tan · Warm Sun

HEX
#C9AE7B
RGB
rgb(201, 174, 123)
HSL
hsl(39, 42%, 64%)
HSB
hsb(39, 39%, 79%)
CMYK
cmyk(0%, 13%, 39%, 21%)
Oklch
oklch(76.2% 0.074 82.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

778C87
8C787D

Analogous

788C7D
778C87
78878C

Triadic

778C87
87788C
8C8778

Split-Comp.

778C87
8C7887
8C7D78

Tetradic

778C87
7D788C
8C787D
878C78

Contrast Matrix WCAG 2.1 Contrast

778C87
736F75
59352D
91644C
C9AE7B
—
1.4
Fail
3.0
Fail
1.4
Fail
1.7
Fail
1.4
Fail
—
2.2
Fail
1.0
Fail
2.3
Fail
3.0
Fail
2.2
Fail
—
2.1
Fail
5.0
AA
1.4
Fail
1.0
Fail
2.1
Fail
—
2.4
Fail
1.7
Fail
2.3
Fail
5.0
AA
2.4
Fail
—
White BG
3.6AA Large
4.9AA
10.6AAA
5.1AA
2.1Fail
Black BG
5.9AA
4.3AA Large
2.0Fail
4.1AA Large
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808088
717174
49492F
7E7D52
BDBD87

Deuteranopia

7F7D89
727273
4C4E2F
808453
BFC18A

Tritanopia

788989
737272
573031
8F5657
C89193

Achromatopsia

858585
717171
3F3F3F
6F6F6F
B0B0B0

Shades & Tints Shades & Tints

#778C87

Dark
Light

#736F75

Dark
Light

#59352D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #778c87;
  --color-2: #736f75;
  --color-3: #59352d;
  --color-4: #91644c;
  --color-5: #c9ae7b;
}

SCSS

$color-1: #778c87;
$color-2: #736f75;
$color-3: #59352d;
$color-4: #91644c;
$color-5: #c9ae7b;

TAILWIND

colors: {
  'brand-1': '#778c87',
  'brand-2': '#736f75',
  'brand-3': '#59352d',
  'brand-4': '#91644c',
  'brand-5': '#c9ae7b',
}

RGB Array

[119, 140, 135], [115, 111, 117], [89, 53, 45], [145, 100, 76], [201, 174, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #778C87, #736F75, #59352D, #91644C, #C9AE7B 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: #778c87; --color-2: #736f75; --color-3: #59352d; --color-4: #91644c; --color-5: #c9ae7b. 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