← Back to Editor

#F5DFA5 · #236563 · #FF2F22 · #B3B876 · #2A3338

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

#F5DFA5

Goose Yellow · Wheat · Lemon Cream

HEX
#F5DFA5
RGB
rgb(245, 223, 165)
HSL
hsl(43, 80%, 80%)
HSB
hsb(43, 33%, 96%)
CMYK
cmyk(0%, 9%, 33%, 4%)
Oklch
oklch(90.8% 0.078 89.7)

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

#236563

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#236563
RGB
rgb(35, 101, 99)
HSL
hsl(178, 49%, 27%)
HSB
hsb(178, 65%, 40%)
CMYK
cmyk(65%, 0%, 2%, 60%)
Oklch
oklch(46.5% 0.066 192.3)

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

#FF2F22

Vermilion · OrangeRed · Passion Red

HEX
#FF2F22
RGB
rgb(255, 47, 34)
HSL
hsl(4, 100%, 57%)
HSB
hsb(4, 87%, 100%)
CMYK
cmyk(0%, 82%, 87%, 0%)
Oklch
oklch(64.5% 0.241 29.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#B3B876

Autumn Sage · Tan · Sunflower

HEX
#B3B876
RGB
rgb(179, 184, 118)
HSL
hsl(65, 32%, 59%)
HSB
hsb(65, 36%, 72%)
CMYK
cmyk(3%, 0%, 36%, 28%)
Oklch
oklch(76.3% 0.088 112.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#2A3338

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#2A3338
RGB
rgb(42, 51, 56)
HSL
hsl(201, 14%, 19%)
HSB
hsb(201, 25%, 22%)
CMYK
cmyk(25%, 9%, 0%, 78%)
Oklch
oklch(31.5% 0.015 232.2)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5DFA5
A3BAF5

Analogous

F5B5A3
F5DFA5
E3F5A3

Triadic

F5DFA5
A3F5DE
DEA3F5

Split-Comp.

F5DFA5
A3E3F5
B5A3F5

Tetradic

F5DFA5
A3F5B5
A3BAF5
F5A3E3

Contrast Matrix WCAG 2.1 Contrast

F5DFA5
236563
FF2F22
B3B876
2A3338
—
5.1
AA
2.8
Fail
1.6
Fail
9.8
AAA
5.1
AA
—
1.8
Fail
3.2
AA Large
1.9
Fail
2.8
Fail
1.8
Fail
—
1.8
Fail
3.5
AA Large
1.6
Fail
3.2
AA Large
1.8
Fail
—
6.2
AA
9.8
AAA
1.9
Fail
3.5
AA Large
6.2
AA
—
White BG
1.3Fail
6.7AA
3.7AA Large
2.1Fail
12.9AAA
Black BG
16.0AAA
3.1AA Large
5.7AA
10.0AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBB3
404063
A5A325
B5B586
2E2E37

Deuteranopia

EDEEB6
3C3764
B1C126
B5B58A
2D2D36

Tritanopia

F4BEC1
266464
F52828
B39395
2A3636

Achromatopsia

DFDFDF
515151
6C6C6C
AFAFAF
313131

Shades & Tints Shades & Tints

#F5DFA5

Dark
Light

#236563

Dark
Light

#FF2F22

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5dfa5;
  --color-2: #236563;
  --color-3: #ff2f22;
  --color-4: #b3b876;
  --color-5: #2a3338;
}

SCSS

$color-1: #f5dfa5;
$color-2: #236563;
$color-3: #ff2f22;
$color-4: #b3b876;
$color-5: #2a3338;

TAILWIND

colors: {
  'brand-1': '#f5dfa5',
  'brand-2': '#236563',
  'brand-3': '#ff2f22',
  'brand-4': '#b3b876',
  'brand-5': '#2a3338',
}

RGB Array

[245, 223, 165], [35, 101, 99], [255, 47, 34], [179, 184, 118], [42, 51, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F5DFA5, #236563, #FF2F22, #B3B876, #2A3338 is ideal for: 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: #f5dfa5; --color-2: #236563; --color-3: #ff2f22; --color-4: #b3b876; --color-5: #2a3338. 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. 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