← Back to Editor

#A35666 · #DE9769 · #F0BC71 · #C5B594 · #495762

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 MenuPoster

Color Details Color Details

#A35666

Crimson · Sienna · Passion Red

HEX
#A35666
RGB
rgb(163, 86, 102)
HSL
hsl(348, 31%, 49%)
HSB
hsb(348, 47%, 64%)
CMYK
cmyk(0%, 47%, 37%, 36%)
Oklch
oklch(54.9% 0.102 7.8)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#DE9769

Apricot · DarkSalmon · Warm Sun

HEX
#DE9769
RGB
rgb(222, 151, 105)
HSL
hsl(24, 64%, 64%)
HSB
hsb(24, 53%, 87%)
CMYK
cmyk(0%, 32%, 53%, 13%)
Oklch
oklch(73.7% 0.105 53.3)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#F0BC71

Ginger · BurlyWood · Warm Sun

HEX
#F0BC71
RGB
rgb(240, 188, 113)
HSL
hsl(35, 81%, 69%)
HSB
hsb(35, 53%, 94%)
CMYK
cmyk(0%, 22%, 53%, 6%)
Oklch
oklch(82.6% 0.111 75.3)

TraditionalGinger」· PaintWarm Sun」· Creative Honey Glow

#C5B594

Ginger · Tan · Sunflower

HEX
#C5B594
RGB
rgb(197, 181, 148)
HSL
hsl(40, 30%, 68%)
HSB
hsb(40, 25%, 77%)
CMYK
cmyk(0%, 8%, 25%, 23%)
Oklch
oklch(77.8% 0.048 85.1)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

#495762

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#495762
RGB
rgb(73, 87, 98)
HSL
hsl(206, 15%, 34%)
HSB
hsb(206, 26%, 38%)
CMYK
cmyk(26%, 11%, 0%, 62%)
Oklch
oklch(44.9% 0.025 241.8)

TraditionalSlate Blue」· PaintPrussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A35666
56A494

Analogous

A4568C
A35666
A46D56

Triadic

A35666
66A456
5666A4

Split-Comp.

A35666
56A46D
568CA4

Tetradic

A35666
8CA456
56A494
6D56A4

Contrast Matrix WCAG 2.1 Contrast

A35666
DE9769
F0BC71
C5B594
495762
2.1
Fail
3.0
Fail
2.6
Fail
1.4
Fail
2.1
Fail
1.4
Fail
1.2
Fail
3.1
AA Large
3.0
Fail
1.4
Fail
1.2
Fail
4.3
AA Large
2.6
Fail
1.2
Fail
1.2
Fail
3.7
AA Large
1.4
Fail
3.1
AA Large
4.3
AA Large
3.7
AA Large
White BG
5.1AA
2.4Fail
1.7Fail
2.0Fail
7.4AAA
Black BG
4.1AA Large
8.7AAA
12.1AAA
10.4AAA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

828162
BFBF74
D9D983
BEBE9C
4F4F5F

Deuteranopia

868C61
C3C977
DDE088
BFC09E
4E4D5F

Tritanopia

9F5F5E
DA7D7F
ED9195
C4A2A4
4A5D5D

Achromatopsia

6F6F6F
A7A7A7
C3C3C3
B6B6B6
545454

Shades & Tints Shades & Tints

#A35666

Dark
Light

#DE9769

Dark
Light

#F0BC71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a35666;
  --color-2: #de9769;
  --color-3: #f0bc71;
  --color-4: #c5b594;
  --color-5: #495762;
}

SCSS

$color-1: #a35666;
$color-2: #de9769;
$color-3: #f0bc71;
$color-4: #c5b594;
$color-5: #495762;

TAILWIND

colors: {
  'brand-1': '#a35666',
  'brand-2': '#de9769',
  'brand-3': '#f0bc71',
  'brand-4': '#c5b594',
  'brand-5': '#495762',
}

RGB Array

[163, 86, 102], [222, 151, 105], [240, 188, 113], [197, 181, 148], [73, 87, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #A35666, #DE9769, #F0BC71, #C5B594, #495762 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: #a35666; --color-2: #de9769; --color-3: #f0bc71; --color-4: #c5b594; --color-5: #495762. 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 vintage-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