← Back to Editor

#778576 · #0CB199 · #76C064 · #BBC471 · #7B8676

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#778576

Ink Gray · Gray · Warm Gray

HEX
#778576
RGB
rgb(119, 133, 118)
HSL
hsl(116, 6%, 49%)
HSB
hsb(116, 11%, 52%)
CMYK
cmyk(11%, 0%, 11%, 48%)
Oklch
oklch(60.1% 0.028 143.4)

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

#0CB199

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#0CB199
RGB
rgb(12, 177, 153)
HSL
hsl(171, 87%, 37%)
HSB
hsb(171, 93%, 69%)
CMYK
cmyk(93%, 0%, 14%, 31%)
Oklch
oklch(68.1% 0.124 178.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#76C064

Celadon · DarkSeaGreen · Olive Green

HEX
#76C064
RGB
rgb(118, 192, 100)
HSL
hsl(108, 42%, 57%)
HSB
hsb(108, 48%, 75%)
CMYK
cmyk(39%, 0%, 48%, 25%)
Oklch
oklch(73.8% 0.146 139.7)

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

#BBC471

Fresh Green · Tan · Sunflower

HEX
#BBC471
RGB
rgb(187, 196, 113)
HSL
hsl(67, 41%, 61%)
HSB
hsb(67, 42%, 77%)
CMYK
cmyk(5%, 0%, 42%, 23%)
Oklch
oklch(79.5% 0.107 113.9)

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

#7B8676

Ink Gray · Gray · Warm Gray

HEX
#7B8676
RGB
rgb(123, 134, 118)
HSL
hsl(101, 6%, 49%)
HSB
hsb(101, 12%, 53%)
CMYK
cmyk(8%, 0%, 12%, 47%)
Oklch
oklch(60.6% 0.027 135.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

778576
837584

Analogous

7E8475
778576
75847C

Triadic

778576
757684
847576

Split-Comp.

778576
7C7584
84757E

Tetradic

778576
757E84
837584
847C75

Contrast Matrix WCAG 2.1 Contrast

778576
0CB199
76C064
BBC471
7B8676
—
1.4
Fail
1.8
Fail
2.1
Fail
1.0
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
1.4
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
2.1
Fail
1.4
Fail
1.2
Fail
—
2.0
Fail
1.0
Fail
1.4
Fail
1.7
Fail
2.0
Fail
—
White BG
3.9AA Large
2.7Fail
2.2Fail
1.9Fail
3.8AA Large
Black BG
5.4AA
7.8AAA
9.5AAA
11.2AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D7A
53559F
96977A
BFBF85
80807A

Deuteranopia

7C7B7B
4A3EA0
928C80
BEBE8A
7F7E7B

Tritanopia

787C7D
14A3A4
7A8C90
BB9598
7C7D7E

Achromatopsia

7F7F7F
7D7D7D
9F9F9F
B8B8B8
818181

Shades & Tints Shades & Tints

#778576

Dark
Light

#0CB199

Dark
Light

#76C064

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #778576;
  --color-2: #0cb199;
  --color-3: #76c064;
  --color-4: #bbc471;
  --color-5: #7b8676;
}

SCSS

$color-1: #778576;
$color-2: #0cb199;
$color-3: #76c064;
$color-4: #bbc471;
$color-5: #7b8676;

TAILWIND

colors: {
  'brand-1': '#778576',
  'brand-2': '#0cb199',
  'brand-3': '#76c064',
  'brand-4': '#bbc471',
  'brand-5': '#7b8676',
}

RGB Array

[119, 133, 118], [12, 177, 153], [118, 192, 100], [187, 196, 113], [123, 134, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #778576, #0CB199, #76C064, #BBC471, #7B8676 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: #778576; --color-2: #0cb199; --color-3: #76c064; --color-4: #bbc471; --color-5: #7b8676. 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