← Back to Editor

#808476 · #4DFFFD · #4DF0F0 · #787C6E · #737769

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

#808476

Ink Gray · Gray · Warm Gray

HEX
#808476
RGB
rgb(128, 132, 118)
HSL
hsl(77, 6%, 49%)
HSB
hsb(77, 11%, 52%)
CMYK
cmyk(3%, 0%, 11%, 48%)
Oklch
oklch(60.6% 0.021 120.0)

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

#4DFFFD

Jade · Turquoise · Lake Green

HEX
#4DFFFD
RGB
rgb(77, 255, 253)
HSL
hsl(179, 100%, 65%)
HSB
hsb(179, 70%, 100%)
CMYK
cmyk(70%, 0%, 1%, 0%)
Oklch
oklch(91.3% 0.140 193.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#4DF0F0

Sky Blue · Turquoise · Lake Green

HEX
#4DF0F0
RGB
rgb(77, 240, 240)
HSL
hsl(180, 84%, 62%)
HSB
hsb(180, 68%, 94%)
CMYK
cmyk(68%, 0%, 0%, 6%)
Oklch
oklch(87.3% 0.131 195.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#787C6E

Ink Gray · Gray · Warm Gray

HEX
#787C6E
RGB
rgb(120, 124, 110)
HSL
hsl(77, 6%, 46%)
HSB
hsb(77, 11%, 49%)
CMYK
cmyk(3%, 0%, 11%, 51%)
Oklch
oklch(57.9% 0.021 120.0)

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

#737769

Ink Gray · DimGray · Warm Gray

HEX
#737769
RGB
rgb(115, 119, 105)
HSL
hsl(77, 6%, 44%)
HSB
hsb(77, 12%, 47%)
CMYK
cmyk(3%, 0%, 12%, 53%)
Oklch
oklch(56.2% 0.022 120.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

808476
7A7584

Analogous

848175
808476
798475

Triadic

808476
758084
847580

Split-Comp.

808476
757984
817584

Tetradic

808476
758481
7A7584
847579

Contrast Matrix WCAG 2.1 Contrast

808476
4DFFFD
4DF0F0
787C6E
737769
—
3.1
AA Large
2.7
Fail
1.1
Fail
1.2
Fail
3.1
AA Large
—
1.1
Fail
3.5
AA Large
3.7
AA Large
2.7
Fail
1.1
Fail
—
3.1
AA Large
3.3
AA Large
1.1
Fail
3.5
AA Large
3.1
AA Large
—
1.1
Fail
1.2
Fail
3.7
AA Large
3.3
AA Large
1.1
Fail
—
White BG
3.8AA Large
1.2Fail
1.4Fail
4.3AA Large
4.6AA
Black BG
5.5AA
17.0AAA
15.0AAA
4.9AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828279
9A9CFD
9495F0
7A7A71
75756C

Deuteranopia

82817A
9082FE
8A7EF0
7A7972
75746D

Tritanopia

807C7D
56FEFE
55F0F0
787475
736F70

Achromatopsia

818181
CACACA
BFBFBF
797979
747474

Shades & Tints Shades & Tints

#808476

Dark
Light

#4DFFFD

Dark
Light

#4DF0F0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #808476;
  --color-2: #4dfffd;
  --color-3: #4df0f0;
  --color-4: #787c6e;
  --color-5: #737769;
}

SCSS

$color-1: #808476;
$color-2: #4dfffd;
$color-3: #4df0f0;
$color-4: #787c6e;
$color-5: #737769;

TAILWIND

colors: {
  'brand-1': '#808476',
  'brand-2': '#4dfffd',
  'brand-3': '#4df0f0',
  'brand-4': '#787c6e',
  'brand-5': '#737769',
}

RGB Array

[128, 132, 118], [77, 255, 253], [77, 240, 240], [120, 124, 110], [115, 119, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #808476, #4DFFFD, #4DF0F0, #787C6E, #737769 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: #808476; --color-2: #4dfffd; --color-3: #4df0f0; --color-4: #787c6e; --color-5: #737769. 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