← Back to Editor

#778F81 · #C7AA8C · #89675E · #785655 · #180815

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#778F81

Celadon · Gray · Olive Green

HEX
#778F81
RGB
rgb(119, 143, 129)
HSL
hsl(145, 10%, 51%)
HSB
hsb(145, 17%, 56%)
CMYK
cmyk(17%, 0%, 10%, 44%)
Oklch
oklch(62.7% 0.034 159.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#C7AA8C

Ginger · Tan · Warm Sun

HEX
#C7AA8C
RGB
rgb(199, 170, 140)
HSL
hsl(31, 35%, 66%)
HSB
hsb(31, 30%, 78%)
CMYK
cmyk(0%, 15%, 30%, 22%)
Oklch
oklch(75.6% 0.053 67.8)

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

#89675E

Crimson · DimGray · Passion Red

HEX
#89675E
RGB
rgb(137, 103, 94)
HSL
hsl(13, 19%, 45%)
HSB
hsb(13, 31%, 54%)
CMYK
cmyk(0%, 25%, 31%, 46%)
Oklch
oklch(54.6% 0.046 35.3)

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

#785655

Crimson · DimGray · Wine Red

HEX
#785655
RGB
rgb(120, 86, 85)
HSL
hsl(2, 17%, 40%)
HSB
hsb(2, 29%, 47%)
CMYK
cmyk(0%, 28%, 29%, 53%)
Oklch
oklch(48.9% 0.045 20.8)

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

#180815

Rose Purple · Black · Dark Purple

HEX
#180815
RGB
rgb(24, 8, 21)
HSL
hsl(311, 50%, 6%)
HSB
hsb(311, 67%, 9%)
CMYK
cmyk(0%, 67%, 12%, 91%)
Oklch
oklch(16.6% 0.037 334.4)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

778F81
8F7684

Analogous

788F76
778F81
768F8C

Triadic

778F81
80768F
8F8076

Split-Comp.

778F81
8C768F
8F7678

Tetradic

778F81
76788F
8F7684
8F8C76

Contrast Matrix WCAG 2.1 Contrast

778F81
C7AA8C
89675E
785655
180815
—
1.6
Fail
1.4
Fail
1.8
Fail
5.6
AA
1.6
Fail
—
2.3
Fail
2.9
Fail
8.8
AAA
1.4
Fail
2.3
Fail
—
1.3
Fail
3.8
AA Large
1.8
Fail
2.9
Fail
1.3
Fail
—
3.0
AA Large
5.6
AA
8.8
AAA
3.8
AA Large
3.0
AA Large
—
White BG
3.5AA Large
2.2Fail
5.0AA
6.4AA
19.4AAA
Black BG
6.0AA
9.6AAA
4.2AA Large
3.3AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

818284
BABA93
7A7A60
696955
111112

Deuteranopia

807E85
BCBE95
7C7F61
6B6E55
121311

Tritanopia

788788
C6999A
876262
765555
170F0F

Achromatopsia

868686
AFAFAF
707070
606060
0E0E0E

Shades & Tints Shades & Tints

#778F81

Dark
Light

#C7AA8C

Dark
Light

#89675E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #778f81;
  --color-2: #c7aa8c;
  --color-3: #89675e;
  --color-4: #785655;
  --color-5: #180815;
}

SCSS

$color-1: #778f81;
$color-2: #c7aa8c;
$color-3: #89675e;
$color-4: #785655;
$color-5: #180815;

TAILWIND

colors: {
  'brand-1': '#778f81',
  'brand-2': '#c7aa8c',
  'brand-3': '#89675e',
  'brand-4': '#785655',
  'brand-5': '#180815',
}

RGB Array

[119, 143, 129], [199, 170, 140], [137, 103, 94], [120, 86, 85], [24, 8, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #778F81, #C7AA8C, #89675E, #785655, #180815 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: #778f81; --color-2: #c7aa8c; --color-3: #89675e; --color-4: #785655; --color-5: #180815. 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