← Back to Editor

#78B8AD · #7A8F7F · #716050 · #673C38 · #25161C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#78B8AD

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#78B8AD
RGB
rgb(120, 184, 173)
HSL
hsl(170, 31%, 60%)
HSB
hsb(170, 35%, 72%)
CMYK
cmyk(35%, 0%, 6%, 28%)
Oklch
oklch(73.6% 0.068 182.4)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#7A8F7F

Celadon · Gray · Warm Gray

HEX
#7A8F7F
RGB
rgb(122, 143, 127)
HSL
hsl(134, 9%, 52%)
HSB
hsb(134, 15%, 56%)
CMYK
cmyk(15%, 0%, 11%, 44%)
Oklch
oklch(62.9% 0.034 152.5)

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

#716050

Tangerine · DimGray · Amber Brown

HEX
#716050
RGB
rgb(113, 96, 80)
HSL
hsl(29, 17%, 38%)
HSB
hsb(29, 29%, 44%)
CMYK
cmyk(0%, 15%, 29%, 56%)
Oklch
oklch(50.1% 0.033 65.2)

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

#673C38

Crimson · DarkOliveGreen · Wine Red

HEX
#673C38
RGB
rgb(103, 60, 56)
HSL
hsl(5, 30%, 31%)
HSB
hsb(5, 46%, 40%)
CMYK
cmyk(0%, 42%, 46%, 60%)
Oklch
oklch(40.7% 0.062 25.8)

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

#25161C

Dark Violet · Black · Raspberry

HEX
#25161C
RGB
rgb(37, 22, 28)
HSL
hsl(336, 25%, 12%)
HSB
hsb(336, 41%, 15%)
CMYK
cmyk(0%, 41%, 24%, 85%)
Oklch
oklch(22.2% 0.026 353.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

78B8AD
B97984

Analogous

79B98E
78B8AD
79A4B9

Triadic

78B8AD
AE79B9
B9AE79

Split-Comp.

78B8AD
B979A4
B98E79

Tetradic

78B8AD
8E79B9
B97984
A4B979

Contrast Matrix WCAG 2.1 Contrast

78B8AD
7A8F7F
716050
673C38
25161C
—
1.5
Fail
2.7
Fail
4.1
AA Large
7.7
AAA
1.5
Fail
—
1.7
Fail
2.7
Fail
5.0
AA
2.7
Fail
1.7
Fail
—
1.5
Fail
2.9
Fail
4.1
AA Large
2.7
Fail
1.5
Fail
—
1.9
Fail
7.7
AAA
5.0
AA
2.9
Fail
1.9
Fail
—
White BG
2.3Fail
3.5AA Large
6.0AA
9.2AAA
17.4AAA
Black BG
9.3AAA
6.1AA
3.5AA Large
2.3Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9494B0
838383
6A6954
545439
1F1E1B

Deuteranopia

908BB0
828084
6B6C55
575A39
1F211A

Tritanopia

7BB2B2
7B8687
705758
653A3A
241919

Achromatopsia

A4A4A4
878787
636363
484848
1B1B1B

Shades & Tints Shades & Tints

#78B8AD

Dark
Light

#7A8F7F

Dark
Light

#716050

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #78b8ad;
  --color-2: #7a8f7f;
  --color-3: #716050;
  --color-4: #673c38;
  --color-5: #25161c;
}

SCSS

$color-1: #78b8ad;
$color-2: #7a8f7f;
$color-3: #716050;
$color-4: #673c38;
$color-5: #25161c;

TAILWIND

colors: {
  'brand-1': '#78b8ad',
  'brand-2': '#7a8f7f',
  'brand-3': '#716050',
  'brand-4': '#673c38',
  'brand-5': '#25161c',
}

RGB Array

[120, 184, 173], [122, 143, 127], [113, 96, 80], [103, 60, 56], [37, 22, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #78B8AD, #7A8F7F, #716050, #673C38, #25161C is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #78b8ad; --color-2: #7a8f7f; --color-3: #716050; --color-4: #673c38; --color-5: #25161c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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