← Back to Editor

#324453 · #486176 · #8D8D98 · #C7A7AD · #F0CCDC

vintage

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#324453

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#324453
RGB
rgb(50, 68, 83)
HSL
hsl(207, 25%, 26%)
HSB
hsb(207, 40%, 33%)
CMYK
cmyk(40%, 18%, 0%, 67%)
Oklch
oklch(37.8% 0.035 244.0)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#486176

Slate Blue · DimGray · Prussian Blue

HEX
#486176
RGB
rgb(72, 97, 118)
HSL
hsl(207, 24%, 37%)
HSB
hsb(207, 39%, 46%)
CMYK
cmyk(39%, 18%, 0%, 54%)
Oklch
oklch(48.1% 0.045 244.3)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#8D8D98

Ash · LightSlateGray · Silver Sand

HEX
#8D8D98
RGB
rgb(141, 141, 152)
HSL
hsl(240, 5%, 57%)
HSB
hsb(240, 7%, 60%)
CMYK
cmyk(7%, 7%, 0%, 40%)
Oklch
oklch(64.7% 0.016 285.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C7A7AD

Peach Pink · DarkGray · Coral Red

HEX
#C7A7AD
RGB
rgb(199, 167, 173)
HSL
hsl(349, 22%, 72%)
HSB
hsb(349, 16%, 78%)
CMYK
cmyk(0%, 16%, 13%, 22%)
Oklch
oklch(75.8% 0.038 5.3)

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

#F0CCDC

Rouge · Pink · Cherry Blossom

HEX
#F0CCDC
RGB
rgb(240, 204, 220)
HSL
hsl(333, 55%, 87%)
HSB
hsb(333, 15%, 94%)
CMYK
cmyk(0%, 15%, 8%, 6%)
Oklch
oklch(88.0% 0.045 349.5)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

324453
534132

Analogous

325351
324453
323353

Triadic

324453
533244
445332

Split-Comp.

324453
533233
535132

Tetradic

324453
513253
534132
335332

Contrast Matrix WCAG 2.1 Contrast

324453
486176
8D8D98
C7A7AD
F0CCDC
—
1.6
Fail
3.1
AA Large
4.6
AA
6.9
AA
1.6
Fail
—
2.0
Fail
2.9
Fail
4.4
AA Large
3.1
AA Large
2.0
Fail
—
1.5
Fail
2.2
Fail
4.6
AA
2.9
Fail
1.5
Fail
—
1.5
Fail
6.9
AA
4.4
AA Large
2.2
Fail
1.5
Fail
—
White BG
10.1AAA
6.5AA
3.3AA Large
2.2Fail
1.5Fail
Black BG
2.1Fail
3.2AA Large
6.4AA
9.6AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A4F
535371
8D8D95
B9B9AC
E0E0D8

Deuteranopia

39374F
515070
8D8D95
BBBDAB
E3E5D7

Tritanopia

334D4C
496D6C
8D9393
C5AAAA
EED5D4

Achromatopsia

404040
5C5C5C
8E8E8E
B1B1B1
D9D9D9

Shades & Tints Shades & Tints

#324453

Dark
Light

#486176

Dark
Light

#8D8D98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #324453;
  --color-2: #486176;
  --color-3: #8d8d98;
  --color-4: #c7a7ad;
  --color-5: #f0ccdc;
}

SCSS

$color-1: #324453;
$color-2: #486176;
$color-3: #8d8d98;
$color-4: #c7a7ad;
$color-5: #f0ccdc;

TAILWIND

colors: {
  'brand-1': '#324453',
  'brand-2': '#486176',
  'brand-3': '#8d8d98',
  'brand-4': '#c7a7ad',
  'brand-5': '#f0ccdc',
}

RGB Array

[50, 68, 83], [72, 97, 118], [141, 141, 152], [199, 167, 173], [240, 204, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #324453, #486176, #8D8D98, #C7A7AD, #F0CCDC 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: #324453; --color-2: #486176; --color-3: #8d8d98; --color-4: #c7a7ad; --color-5: #f0ccdc. 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