← Back to Editor

#787C7B · #768F8A · #B5B199 · #DBBCA7 · #F36668

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

#787C7B

Ink Gray · Gray · Warm Gray

HEX
#787C7B
RGB
rgb(120, 124, 123)
HSL
hsl(165, 2%, 48%)
HSB
hsb(165, 3%, 49%)
CMYK
cmyk(3%, 0%, 1%, 51%)
Oklch
oklch(58.3% 0.005 179.6)

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

#768F8A

Mineral Blue · LightSlateGray · Lake Green

HEX
#768F8A
RGB
rgb(118, 143, 138)
HSL
hsl(168, 10%, 51%)
HSB
hsb(168, 17%, 56%)
CMYK
cmyk(17%, 0%, 3%, 44%)
Oklch
oklch(62.9% 0.029 181.9)

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

#B5B199

Fresh Green · DarkGray · Sunflower

HEX
#B5B199
RGB
rgb(181, 177, 153)
HSL
hsl(51, 16%, 65%)
HSB
hsb(51, 15%, 71%)
CMYK
cmyk(0%, 2%, 15%, 29%)
Oklch
oklch(75.7% 0.034 99.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DBBCA7

Apricot · Tan · Peach Orange

HEX
#DBBCA7
RGB
rgb(219, 188, 167)
HSL
hsl(24, 42%, 76%)
HSB
hsb(24, 24%, 86%)
CMYK
cmyk(0%, 14%, 24%, 14%)
Oklch
oklch(81.6% 0.046 56.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F36668

Peach Pink · Salmon · Coral Red

HEX
#F36668
RGB
rgb(243, 102, 104)
HSL
hsl(359, 85%, 68%)
HSB
hsb(359, 58%, 95%)
CMYK
cmyk(0%, 58%, 57%, 5%)
Oklch
oklch(68.7% 0.174 22.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

787C7B
7D7879

Analogous

787D79
787C7B
787C7D

Triadic

787C7B
7C787D
7D7C78

Split-Comp.

787C7B
7D787C
7D7978

Tetradic

787C7B
79787D
7D7879
7C7D78

Contrast Matrix WCAG 2.1 Contrast

787C7B
768F8A
B5B199
DBBCA7
F36668
—
1.2
Fail
2.0
Fail
2.4
Fail
1.4
Fail
1.2
Fail
—
1.6
Fail
1.9
Fail
1.1
Fail
2.0
Fail
1.6
Fail
—
1.2
Fail
1.4
Fail
2.4
Fail
1.9
Fail
1.2
Fail
—
1.7
Fail
1.4
Fail
1.1
Fail
1.4
Fail
1.7
Fail
—
White BG
4.2AA Large
3.5AA Large
2.2Fail
1.8Fail
3.0AA Large
Black BG
5.0AA
6.1AA
9.7AAA
11.8AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7A7B
81818B
B3B39F
CECDAC
B6B568

Deuteranopia

7A797B
7F7E8C
B4B4A0
CFD2AD
BEC967

Tritanopia

787B7B
778C8C
B5A3A4
D9B0B1
EC6767

Achromatopsia

7B7B7B
878787
AFAFAF
C3C3C3
909090

Shades & Tints Shades & Tints

#787C7B

Dark
Light

#768F8A

Dark
Light

#B5B199

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #787c7b;
  --color-2: #768f8a;
  --color-3: #b5b199;
  --color-4: #dbbca7;
  --color-5: #f36668;
}

SCSS

$color-1: #787c7b;
$color-2: #768f8a;
$color-3: #b5b199;
$color-4: #dbbca7;
$color-5: #f36668;

TAILWIND

colors: {
  'brand-1': '#787c7b',
  'brand-2': '#768f8a',
  'brand-3': '#b5b199',
  'brand-4': '#dbbca7',
  'brand-5': '#f36668',
}

RGB Array

[120, 124, 123], [118, 143, 138], [181, 177, 153], [219, 188, 167], [243, 102, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #787C7B, #768F8A, #B5B199, #DBBCA7, #F36668 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #787c7b; --color-2: #768f8a; --color-3: #b5b199; --color-4: #dbbca7; --color-5: #f36668. 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. 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