← Back to Editor

#4F5270 · #608187 · #EADDD0 · #9D8E84 · #705746

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

#4F5270

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4F5270
RGB
rgb(79, 82, 112)
HSL
hsl(235, 17%, 37%)
HSB
hsb(235, 29%, 44%)
CMYK
cmyk(29%, 27%, 0%, 56%)
Oklch
oklch(44.8% 0.049 279.8)

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

#608187

Slate Blue · SlateGray · Mint Ice

HEX
#608187
RGB
rgb(96, 129, 135)
HSL
hsl(189, 17%, 45%)
HSB
hsb(189, 29%, 53%)
CMYK
cmyk(29%, 4%, 0%, 47%)
Oklch
oklch(58.0% 0.038 209.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#EADDD0

Goose Yellow · Bisque · Peach Orange

HEX
#EADDD0
RGB
rgb(234, 221, 208)
HSL
hsl(30, 38%, 87%)
HSB
hsb(30, 11%, 92%)
CMYK
cmyk(0%, 6%, 11%, 8%)
Oklch
oklch(90.4% 0.023 67.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#9D8E84

Tangerine · Gray · Warm Sun

HEX
#9D8E84
RGB
rgb(157, 142, 132)
HSL
hsl(24, 11%, 57%)
HSB
hsb(24, 16%, 62%)
CMYK
cmyk(0%, 10%, 16%, 38%)
Oklch
oklch(65.7% 0.023 55.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#705746

Tangerine · DimGray · Amber Brown

HEX
#705746
RGB
rgb(112, 87, 70)
HSL
hsl(24, 23%, 36%)
HSB
hsb(24, 37%, 44%)
CMYK
cmyk(0%, 22%, 37%, 56%)
Oklch
oklch(47.8% 0.042 55.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F5270
6E6C4E

Analogous

4E616E
4F5270
5C4E6E

Triadic

4F5270
6E4E51
516E4E

Split-Comp.

4F5270
6E5C4E
616E4E

Tetradic

4F5270
6E4E61
6E6C4E
4E6E5C

Contrast Matrix WCAG 2.1 Contrast

4F5270
608187
EADDD0
9D8E84
705746
—
1.8
Fail
5.7
AA
2.4
Fail
1.1
Fail
1.8
Fail
—
3.2
AA Large
1.3
Fail
1.6
Fail
5.7
AA
3.2
AA Large
—
2.4
Fail
5.0
AA
2.4
Fail
1.3
Fail
2.4
Fail
—
2.1
Fail
1.1
Fail
1.6
Fail
5.0
AA
2.1
Fail
—
White BG
7.6AAA
4.2AA Large
1.3Fail
3.2AA Large
6.7AA
Black BG
2.8Fail
5.0AA
15.8AAA
6.6AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

505069
6E6F86
E4E4D3
979686
65654A

Deuteranopia

505067
6C6A85
E5E6D4
979987
67684B

Tritanopia

4F6362
628484
E9D6D6
9C8889
6F4D4E

Achromatopsia

555555
787878
DFDFDF
919191
5D5D5D

Shades & Tints Shades & Tints

#4F5270

Dark
Light

#608187

Dark
Light

#EADDD0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f5270;
  --color-2: #608187;
  --color-3: #eaddd0;
  --color-4: #9d8e84;
  --color-5: #705746;
}

SCSS

$color-1: #4f5270;
$color-2: #608187;
$color-3: #eaddd0;
$color-4: #9d8e84;
$color-5: #705746;

TAILWIND

colors: {
  'brand-1': '#4f5270',
  'brand-2': '#608187',
  'brand-3': '#eaddd0',
  'brand-4': '#9d8e84',
  'brand-5': '#705746',
}

RGB Array

[79, 82, 112], [96, 129, 135], [234, 221, 208], [157, 142, 132], [112, 87, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #4F5270, #608187, #EADDD0, #9D8E84, #705746 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: #4f5270; --color-2: #608187; --color-3: #eaddd0; --color-4: #9d8e84; --color-5: #705746. 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