← Back to Editor

#484848 · #907878 · #C0C0A8 · #D8D8A8 · #F0D8A8

vintage

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#484848

Dark Cyan · DarkSlateGray · Charcoal

HEX
#484848
RGB
rgb(72, 72, 72)
HSL
hsl(0, 0%, 28%)
HSB
hsb(0, 0%, 28%)
CMYK
cmyk(0%, 0%, 0%, 72%)
Oklch
oklch(40.2% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#907878

Crimson · Gray · Passion Red

HEX
#907878
RGB
rgb(144, 120, 120)
HSL
hsl(0, 10%, 52%)
HSB
hsb(0, 17%, 56%)
CMYK
cmyk(0%, 17%, 17%, 44%)
Oklch
oklch(59.5% 0.030 18.0)

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

#C0C0A8

Fresh Green · Silver · Sunflower

HEX
#C0C0A8
RGB
rgb(192, 192, 168)
HSL
hsl(60, 16%, 71%)
HSB
hsb(60, 13%, 75%)
CMYK
cmyk(0%, 0%, 13%, 25%)
Oklch
oklch(80.1% 0.033 107.1)

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

#D8D8A8

Fresh Green · Wheat · Sunflower

HEX
#D8D8A8
RGB
rgb(216, 216, 168)
HSL
hsl(60, 38%, 75%)
HSB
hsb(60, 22%, 85%)
CMYK
cmyk(0%, 0%, 22%, 15%)
Oklch
oklch(87.0% 0.063 107.6)

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

#F0D8A8

Goose Yellow · Wheat · Lemon Cream

HEX
#F0D8A8
RGB
rgb(240, 216, 168)
HSL
hsl(40, 71%, 80%)
HSB
hsb(40, 30%, 94%)
CMYK
cmyk(0%, 10%, 30%, 6%)
Oklch
oklch(89.0% 0.068 84.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

484848
474747

Analogous

474747
484848
474747

Triadic

484848
474747
474747

Split-Comp.

484848
474747
474747

Tetradic

484848
474747
474747
474747

Contrast Matrix WCAG 2.1 Contrast

484848
907878
C0C0A8
D8D8A8
F0D8A8
—
2.2
Fail
4.9
AA
6.2
AA
6.6
AA
2.2
Fail
—
2.2
Fail
2.8
Fail
2.9
Fail
4.9
AA
2.2
Fail
—
1.3
Fail
1.3
Fail
6.2
AA
2.8
Fail
1.3
Fail
—
1.1
Fail
6.6
AA
2.9
Fail
1.3
Fail
1.1
Fail
—
White BG
9.1AAA
4.1AA Large
1.9Fail
1.5Fail
1.4Fail
Black BG
2.3Fail
5.1AA
11.3AAA
14.3AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484848
868578
C0C0AE
D8D8B4
E6E5B4

Deuteranopia

484848
878978
C0C0AF
D8D8B6
E7E9B6

Tritanopia

484848
8F7878
C0B2B3
D8BDBF
EFBDBF

Achromatopsia

484848
7F7F7F
BDBDBD
D3D3D3
DADADA

Shades & Tints Shades & Tints

#484848

Dark
Light

#907878

Dark
Light

#C0C0A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #484848;
  --color-2: #907878;
  --color-3: #c0c0a8;
  --color-4: #d8d8a8;
  --color-5: #f0d8a8;
}

SCSS

$color-1: #484848;
$color-2: #907878;
$color-3: #c0c0a8;
$color-4: #d8d8a8;
$color-5: #f0d8a8;

TAILWIND

colors: {
  'brand-1': '#484848',
  'brand-2': '#907878',
  'brand-3': '#c0c0a8',
  'brand-4': '#d8d8a8',
  'brand-5': '#f0d8a8',
}

RGB Array

[72, 72, 72], [144, 120, 120], [192, 192, 168], [216, 216, 168], [240, 216, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #484848, #907878, #C0C0A8, #D8D8A8, #F0D8A8 is ideal for: brand design, premium product pages, magazine layouts, 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: #484848; --color-2: #907878; --color-3: #c0c0a8; --color-4: #d8d8a8; --color-5: #f0d8a8. 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. 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 vintage-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco 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