← Back to Editor

#787878 · #C8D8B0 · #D3DA88 · #DEDB61 · #E9DD39

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 Library

Color Details Color Details

#787878

Ink Gray · Gray · Warm Gray

HEX
#787878
RGB
rgb(120, 120, 120)
HSL
hsl(0, 0%, 47%)
HSB
hsb(0, 0%, 47%)
CMYK
cmyk(0%, 0%, 0%, 53%)
Oklch
oklch(57.3% 0.000 89.9)

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

#C8D8B0

Willow Green · Silver · Apple Green

HEX
#C8D8B0
RGB
rgb(200, 216, 176)
HSL
hsl(84, 34%, 77%)
HSB
hsb(84, 19%, 85%)
CMYK
cmyk(7%, 0%, 19%, 15%)
Oklch
oklch(86.0% 0.056 125.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D3DA88

Fresh Green · Khaki · Sunflower

HEX
#D3DA88
RGB
rgb(211, 218, 136)
HSL
hsl(65, 53%, 69%)
HSB
hsb(65, 38%, 85%)
CMYK
cmyk(3%, 0%, 38%, 15%)
Oklch
oklch(86.4% 0.105 112.6)

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

#DEDB61

Fresh Green · Khaki · Sunflower

HEX
#DEDB61
RGB
rgb(222, 219, 97)
HSL
hsl(59, 65%, 63%)
HSB
hsb(59, 56%, 87%)
CMYK
cmyk(0%, 1%, 56%, 13%)
Oklch
oklch(87.0% 0.144 107.7)

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

#E9DD39

Autumn Sage · Gold · Sunflower

HEX
#E9DD39
RGB
rgb(233, 221, 57)
HSL
hsl(56, 80%, 57%)
HSB
hsb(56, 76%, 91%)
CMYK
cmyk(0%, 5%, 76%, 9%)
Oklch
oklch(88.1% 0.172 105.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

787878
787878

Analogous

787878
787878
787878

Triadic

787878
787878
787878

Split-Comp.

787878
787878
787878

Tetradic

787878
787878
787878
787878

Contrast Matrix WCAG 2.1 Contrast

787878
C8D8B0
D3DA88
DEDB61
E9DD39
—
2.9
Fail
3.0
Fail
3.0
AA Large
3.1
AA Large
2.9
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
3.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
3.0
AA Large
1.0
Fail
1.0
Fail
—
1.0
Fail
3.1
AA Large
1.1
Fail
1.1
Fail
1.0
Fail
—
White BG
4.4AA Large
1.5Fail
1.5Fail
1.5Fail
1.4Fail
Black BG
4.8AA
13.9AAA
14.2AAA
14.4AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

787878
CFCFBA
D6D69C
DDDD7F
E4E461

Deuteranopia

787878
CECDBC
D6D5A1
DDDD86
E5E56A

Tritanopia

787878
C9C1C3
D3ACAF
DE969B
E88087

Achromatopsia

787878
CFCFCF
CFCFCF
CECECE
CECECE

Shades & Tints Shades & Tints

#787878

Dark
Light

#C8D8B0

Dark
Light

#D3DA88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #787878;
  --color-2: #c8d8b0;
  --color-3: #d3da88;
  --color-4: #dedb61;
  --color-5: #e9dd39;
}

SCSS

$color-1: #787878;
$color-2: #c8d8b0;
$color-3: #d3da88;
$color-4: #dedb61;
$color-5: #e9dd39;

TAILWIND

colors: {
  'brand-1': '#787878',
  'brand-2': '#c8d8b0',
  'brand-3': '#d3da88',
  'brand-4': '#dedb61',
  'brand-5': '#e9dd39',
}

RGB Array

[120, 120, 120], [200, 216, 176], [211, 218, 136], [222, 219, 97], [233, 221, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #787878, #C8D8B0, #D3DA88, #DEDB61, #E9DD39 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: #787878; --color-2: #c8d8b0; --color-3: #d3da88; --color-4: #dedb61; --color-5: #e9dd39. 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