← Back to Editor

#322E2E · #FFC9DA · #F9DFDF · #F5F7DA · #F3F1D8

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

#322E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#322E2E
RGB
rgb(50, 46, 46)
HSL
hsl(0, 4%, 19%)
HSB
hsb(0, 8%, 20%)
CMYK
cmyk(0%, 8%, 8%, 80%)
Oklch
oklch(30.5% 0.006 17.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#FFC9DA

Rouge · Pink · Cherry Blossom

HEX
#FFC9DA
RGB
rgb(255, 201, 218)
HSL
hsl(341, 100%, 89%)
HSB
hsb(341, 21%, 100%)
CMYK
cmyk(0%, 21%, 15%, 0%)
Oklch
oklch(88.8% 0.065 357.8)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F9DFDF

Peach Pink · Linen · Cherry Blossom

HEX
#F9DFDF
RGB
rgb(249, 223, 223)
HSL
hsl(0, 68%, 93%)
HSB
hsb(0, 10%, 98%)
CMYK
cmyk(0%, 10%, 10%, 2%)
Oklch
oklch(92.5% 0.029 17.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F5F7DA

Fresh Green · Beige · Lemon Cream

HEX
#F5F7DA
RGB
rgb(245, 247, 218)
HSL
hsl(64, 64%, 91%)
HSB
hsb(64, 12%, 97%)
CMYK
cmyk(1%, 0%, 12%, 3%)
Oklch
oklch(96.7% 0.038 110.3)

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

#F3F1D8

Fresh Green · Beige · Lemon Cream

HEX
#F3F1D8
RGB
rgb(243, 241, 216)
HSL
hsl(56, 53%, 90%)
HSB
hsb(56, 11%, 95%)
CMYK
cmyk(0%, 1%, 11%, 5%)
Oklch
oklch(95.3% 0.033 103.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322E2E
2F3232

Analogous

322F30
322E2E
32302F

Triadic

322E2E
2F322F
2F2F32

Split-Comp.

322E2E
2F3230
2F3032

Tetradic

322E2E
30322F
2F3232
302F32

Contrast Matrix WCAG 2.1 Contrast

322E2E
FFC9DA
F9DFDF
F5F7DA
F3F1D8
—
9.3
AAA
10.6
AAA
12.3
AAA
11.7
AAA
9.3
AAA
—
1.1
Fail
1.3
Fail
1.3
Fail
10.6
AAA
1.1
Fail
—
1.2
Fail
1.1
Fail
12.3
AAA
1.3
Fail
1.2
Fail
—
1.0
Fail
11.7
AAA
1.3
Fail
1.1
Fail
1.0
Fail
—
White BG
13.4AAA
1.4Fail
1.3Fail
1.1Fail
1.1Fail
Black BG
1.6Fail
14.6AAA
16.6AAA
19.2AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

30302E
E8E7D6
EEEEDF
F6F6E1
F2F2DE

Deuteranopia

31312E
EBEFD5
EFF1DF
F6F6E3
F2F2E0

Tritanopia

322E2E
FCD3D2
F8DFDF
F5E7E8
F3E3E4

Achromatopsia

2F2F2F
DBDBDB
E7E7E7
F3F3F3
EFEFEF

Shades & Tints Shades & Tints

#322E2E

Dark
Light

#FFC9DA

Dark
Light

#F9DFDF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322e2e;
  --color-2: #ffc9da;
  --color-3: #f9dfdf;
  --color-4: #f5f7da;
  --color-5: #f3f1d8;
}

SCSS

$color-1: #322e2e;
$color-2: #ffc9da;
$color-3: #f9dfdf;
$color-4: #f5f7da;
$color-5: #f3f1d8;

TAILWIND

colors: {
  'brand-1': '#322e2e',
  'brand-2': '#ffc9da',
  'brand-3': '#f9dfdf',
  'brand-4': '#f5f7da',
  'brand-5': '#f3f1d8',
}

RGB Array

[50, 46, 46], [255, 201, 218], [249, 223, 223], [245, 247, 218], [243, 241, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #322E2E, #FFC9DA, #F9DFDF, #F5F7DA, #F3F1D8 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: #322e2e; --color-2: #ffc9da; --color-3: #f9dfdf; --color-4: #f5f7da; --color-5: #f3f1d8. 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