← Back to Editor

#F8F8F0 · #F3EDDF · #DCCBB7 · #3E1803 · #080000

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

#F8F8F0

Fresh Green · SeaShell · Lemon Cream

HEX
#F8F8F0
RGB
rgb(248, 248, 240)
HSL
hsl(60, 36%, 96%)
HSB
hsb(60, 3%, 97%)
CMYK
cmyk(0%, 0%, 3%, 3%)
Oklch
oklch(97.7% 0.011 106.6)

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

#F3EDDF

Goose Yellow · Beige · Lemon Cream

HEX
#F3EDDF
RGB
rgb(243, 237, 223)
HSL
hsl(42, 45%, 91%)
HSB
hsb(42, 8%, 95%)
CMYK
cmyk(0%, 2%, 8%, 5%)
Oklch
oklch(94.7% 0.020 87.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DCCBB7

Goose Yellow · LightGray · Peach Orange

HEX
#DCCBB7
RGB
rgb(220, 203, 183)
HSL
hsl(32, 35%, 79%)
HSB
hsb(32, 17%, 86%)
CMYK
cmyk(0%, 8%, 17%, 14%)
Oklch
oklch(85.1% 0.033 71.9)

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

#3E1803

Tangerine · Black · Cinnamon

HEX
#3E1803
RGB
rgb(62, 24, 3)
HSL
hsl(21, 91%, 13%)
HSB
hsb(21, 95%, 24%)
CMYK
cmyk(0%, 61%, 95%, 76%)
Oklch
oklch(26.3% 0.068 46.9)

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

#080000

Vermilion · Black · Deep Berry

HEX
#080000
RGB
rgb(8, 0, 0)
HSL
hsl(0, 100%, 2%)
HSB
hsb(0, 100%, 3%)
CMYK
cmyk(0%, 100%, 100%, 97%)
Oklch
oklch(8.4% 0.035 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8F8F0
F1F1F8

Analogous

F8F5F1
F8F8F0
F5F8F1

Triadic

F8F8F0
F1F8F8
F8F1F8

Split-Comp.

F8F8F0
F1F5F8
F5F1F8

Tetradic

F8F8F0
F1F8F5
F1F1F8
F8F1F5

Contrast Matrix WCAG 2.1 Contrast

F8F8F0
F3EDDF
DCCBB7
3E1803
080000
—
1.1
Fail
1.5
Fail
14.7
AAA
19.5
AAA
1.1
Fail
—
1.4
Fail
13.5
AAA
17.8
AAA
1.5
Fail
1.4
Fail
—
9.9
AAA
13.1
AAA
14.7
AAA
13.5
AAA
9.9
AAA
—
1.3
Fail
19.5
AAA
17.8
AAA
13.1
AAA
1.3
Fail
—
White BG
1.1Fail
1.2Fail
1.6Fail
15.7AAA
20.8AAA
Black BG
19.7AAA
18.0AAA
13.3AAA
1.3Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8F2
F0F0E2
D5D4BC
2E2D08
050400

Deuteranopia

F8F8F2
F1F1E3
D6D7BD
303309
050600

Tritanopia

F8F3F4
F3E5E6
DBC0C1
3C0C0D
080000

Achromatopsia

F7F7F7
EDEDED
CECECE
212121
020202

Shades & Tints Shades & Tints

#F8F8F0

Dark
Light

#F3EDDF

Dark
Light

#DCCBB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8f8f0;
  --color-2: #f3eddf;
  --color-3: #dccbb7;
  --color-4: #3e1803;
  --color-5: #080000;
}

SCSS

$color-1: #f8f8f0;
$color-2: #f3eddf;
$color-3: #dccbb7;
$color-4: #3e1803;
$color-5: #080000;

TAILWIND

colors: {
  'brand-1': '#f8f8f0',
  'brand-2': '#f3eddf',
  'brand-3': '#dccbb7',
  'brand-4': '#3e1803',
  'brand-5': '#080000',
}

RGB Array

[248, 248, 240], [243, 237, 223], [220, 203, 183], [62, 24, 3], [8, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F8F8F0, #F3EDDF, #DCCBB7, #3E1803, #080000 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f8f8f0; --color-2: #f3eddf; --color-3: #dccbb7; --color-4: #3e1803; --color-5: #080000. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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