← Back to Editor

#5C4722 · #F0F0D8 · #D77D74 · #B1A5A4 · #D8D8D8

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

#5C4722

Ochre · DarkOliveGreen · Cinnamon

HEX
#5C4722
RGB
rgb(92, 71, 34)
HSL
hsl(38, 46%, 25%)
HSB
hsb(38, 63%, 36%)
CMYK
cmyk(0%, 23%, 63%, 64%)
Oklch
oklch(41.2% 0.060 80.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#F0F0D8

Fresh Green · Beige · Lemon Cream

HEX
#F0F0D8
RGB
rgb(240, 240, 216)
HSL
hsl(60, 44%, 89%)
HSB
hsb(60, 10%, 94%)
CMYK
cmyk(0%, 0%, 10%, 6%)
Oklch
oklch(94.9% 0.032 107.0)

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

#D77D74

Peach Pink · LightCoral · Coral Red

HEX
#D77D74
RGB
rgb(215, 125, 116)
HSL
hsl(5, 55%, 65%)
HSB
hsb(5, 46%, 84%)
CMYK
cmyk(0%, 42%, 46%, 16%)
Oklch
oklch(68.5% 0.113 26.5)

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

#B1A5A4

Peach Pink · DarkGray · Silver Sand

HEX
#B1A5A4
RGB
rgb(177, 165, 164)
HSL
hsl(5, 8%, 67%)
HSB
hsb(5, 7%, 69%)
CMYK
cmyk(0%, 7%, 7%, 31%)
Oklch
oklch(73.2% 0.014 23.3)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#D8D8D8

Silver Gray · LightGray · Pearl Gray

HEX
#D8D8D8
RGB
rgb(216, 216, 216)
HSL
hsl(0, 0%, 85%)
HSB
hsb(0, 0%, 85%)
CMYK
cmyk(0%, 0%, 0%, 15%)
Oklch
oklch(88.2% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C4722
22385D

Analogous

5D2A22
5C4722
555D22

Triadic

5C4722
225D48
48225D

Split-Comp.

5C4722
22555D
2A225D

Tetradic

5C4722
225D2A
22385D
5D2255

Contrast Matrix WCAG 2.1 Contrast

5C4722
F0F0D8
D77D74
B1A5A4
D8D8D8
—
7.6
AAA
3.0
Fail
3.7
AA Large
6.2
AA
7.6
AAA
—
2.6
Fail
2.1
Fail
1.2
Fail
3.0
Fail
2.6
Fail
—
1.2
Fail
2.1
Fail
3.7
AA Large
2.1
Fail
1.2
Fail
—
1.7
Fail
6.2
AA
1.2
Fail
2.1
Fail
1.7
Fail
—
White BG
8.8AAA
1.2Fail
3.0Fail
2.4Fail
1.4Fail
Black BG
2.4Fail
18.2AAA
7.1AAA
8.8AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

53532B
F0F0DE
B0AF76
ACACA4
D8D8D8

Deuteranopia

54562D
F0F0DF
B5BC77
ADADA4
D8D8D8

Tritanopia

5B3234
F0E2E3
D37878
B0A4A4
D8D8D8

Achromatopsia

494949
EDEDED
979797
A8A8A8
D8D8D8

Shades & Tints Shades & Tints

#5C4722

Dark
Light

#F0F0D8

Dark
Light

#D77D74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c4722;
  --color-2: #f0f0d8;
  --color-3: #d77d74;
  --color-4: #b1a5a4;
  --color-5: #d8d8d8;
}

SCSS

$color-1: #5c4722;
$color-2: #f0f0d8;
$color-3: #d77d74;
$color-4: #b1a5a4;
$color-5: #d8d8d8;

TAILWIND

colors: {
  'brand-1': '#5c4722',
  'brand-2': '#f0f0d8',
  'brand-3': '#d77d74',
  'brand-4': '#b1a5a4',
  'brand-5': '#d8d8d8',
}

RGB Array

[92, 71, 34], [240, 240, 216], [215, 125, 116], [177, 165, 164], [216, 216, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #5C4722, #F0F0D8, #D77D74, #B1A5A4, #D8D8D8 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #5c4722; --color-2: #f0f0d8; --color-3: #d77d74; --color-4: #b1a5a4; --color-5: #d8d8d8. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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