← Back to Editor

#40525C · #646776 · #97838C · #B79F9F · #F8DFCB

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

#40525C

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#40525C
RGB
rgb(64, 82, 92)
HSL
hsl(201, 18%, 31%)
HSB
hsb(201, 30%, 36%)
CMYK
cmyk(30%, 11%, 0%, 64%)
Oklch
oklch(42.7% 0.028 232.6)

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

#646776

Indigo · DimGray · Warm Gray

HEX
#646776
RGB
rgb(100, 103, 118)
HSL
hsl(230, 8%, 43%)
HSB
hsb(230, 15%, 46%)
CMYK
cmyk(15%, 13%, 0%, 54%)
Oklch
oklch(51.7% 0.024 276.6)

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

#97838C

Dark Violet · Gray · Warm Gray

HEX
#97838C
RGB
rgb(151, 131, 140)
HSL
hsl(333, 9%, 55%)
HSB
hsb(333, 13%, 59%)
CMYK
cmyk(0%, 13%, 7%, 41%)
Oklch
oklch(63.1% 0.027 349.0)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#B79F9F

Peach Pink · DarkGray · Coral Red

HEX
#B79F9F
RGB
rgb(183, 159, 159)
HSL
hsl(0, 14%, 67%)
HSB
hsb(0, 13%, 72%)
CMYK
cmyk(0%, 13%, 13%, 28%)
Oklch
oklch(72.4% 0.028 17.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F8DFCB

Apricot · Bisque · Peach Orange

HEX
#F8DFCB
RGB
rgb(248, 223, 203)
HSL
hsl(27, 76%, 88%)
HSB
hsb(27, 18%, 97%)
CMYK
cmyk(0%, 10%, 18%, 3%)
Oklch
oklch(91.9% 0.038 61.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

40525C
5D4B41

Analogous

415D59
40525C
41455D

Triadic

40525C
5D4153
535D41

Split-Comp.

40525C
5D4145
5D5941

Tetradic

40525C
59415D
5D4B41
455D41

Contrast Matrix WCAG 2.1 Contrast

40525C
646776
97838C
B79F9F
F8DFCB
—
1.5
Fail
2.3
Fail
3.3
AA Large
6.4
AA
1.5
Fail
—
1.6
Fail
2.3
Fail
4.4
AA Large
2.3
Fail
1.6
Fail
—
1.4
Fail
2.8
Fail
3.3
AA Large
2.3
Fail
1.4
Fail
—
1.9
Fail
6.4
AA
4.4
AA Large
2.8
Fail
1.9
Fail
—
White BG
8.1AAA
5.6AA
3.5AA Large
2.5Fail
1.3Fail
Black BG
2.6Fail
3.7AA Large
5.9AA
8.5AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48485A
656572
8E8E8A
ADAC9F
EDEDD0

Deuteranopia

474559
656572
909189
AEB09F
EFF1D1

Tritanopia

415857
64706F
968888
B69F9F
F7D4D5

Achromatopsia

4E4E4E
686868
8A8A8A
A6A6A6
E4E4E4

Shades & Tints Shades & Tints

#40525C

Dark
Light

#646776

Dark
Light

#97838C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #40525c;
  --color-2: #646776;
  --color-3: #97838c;
  --color-4: #b79f9f;
  --color-5: #f8dfcb;
}

SCSS

$color-1: #40525c;
$color-2: #646776;
$color-3: #97838c;
$color-4: #b79f9f;
$color-5: #f8dfcb;

TAILWIND

colors: {
  'brand-1': '#40525c',
  'brand-2': '#646776',
  'brand-3': '#97838c',
  'brand-4': '#b79f9f',
  'brand-5': '#f8dfcb',
}

RGB Array

[64, 82, 92], [100, 103, 118], [151, 131, 140], [183, 159, 159], [248, 223, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #40525C, #646776, #97838C, #B79F9F, #F8DFCB 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: #40525c; --color-2: #646776; --color-3: #97838c; --color-4: #b79f9f; --color-5: #f8dfcb. 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