← Back to Editor

#F9EFD4 · #D4DFD7 · #FFB84A · #FF4A49 · #0F334D

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

#F9EFD4

Goose Yellow · Beige · Lemon Cream

HEX
#F9EFD4
RGB
rgb(249, 239, 212)
HSL
hsl(44, 76%, 90%)
HSB
hsb(44, 15%, 98%)
CMYK
cmyk(0%, 4%, 15%, 2%)
Oklch
oklch(95.3% 0.037 90.1)

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

#D4DFD7

Celadon · LightGray · Mint Green

HEX
#D4DFD7
RGB
rgb(212, 223, 215)
HSL
hsl(136, 15%, 85%)
HSB
hsb(136, 5%, 87%)
CMYK
cmyk(5%, 0%, 4%, 13%)
Oklch
oklch(89.3% 0.016 154.4)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#FFB84A

Ginger · SandyBrown · Warm Sun

HEX
#FFB84A
RGB
rgb(255, 184, 74)
HSL
hsl(36, 100%, 65%)
HSB
hsb(36, 71%, 100%)
CMYK
cmyk(0%, 28%, 71%, 0%)
Oklch
oklch(83.0% 0.147 74.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FF4A49

Peach Pink · Tomato · Coral Red

HEX
#FF4A49
RGB
rgb(255, 74, 73)
HSL
hsl(0, 100%, 64%)
HSB
hsb(0, 71%, 100%)
CMYK
cmyk(0%, 71%, 71%, 0%)
Oklch
oklch(67.0% 0.218 25.5)

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

#0F334D

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#0F334D
RGB
rgb(15, 51, 77)
HSL
hsl(205, 67%, 18%)
HSB
hsb(205, 81%, 30%)
CMYK
cmyk(81%, 34%, 0%, 70%)
Oklch
oklch(30.9% 0.062 243.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9EFD4
D2DCF9

Analogous

F9DBD2
F9EFD4
F0F9D2

Triadic

F9EFD4
D2F9EF
EFD2F9

Split-Comp.

F9EFD4
D2F0F9
DBD2F9

Tetradic

F9EFD4
D2F9DB
D2DCF9
F9D2F0

Contrast Matrix WCAG 2.1 Contrast

F9EFD4
D4DFD7
FFB84A
FF4A49
0F334D
—
1.2
Fail
1.5
Fail
2.9
Fail
11.4
AAA
1.2
Fail
—
1.3
Fail
2.4
Fail
9.6
AAA
1.5
Fail
1.3
Fail
—
1.9
Fail
7.6
AAA
2.9
Fail
2.4
Fail
1.9
Fail
—
4.0
AA Large
11.4
AAA
9.6
AAA
7.6
AAA
4.0
AA Large
—
White BG
1.1Fail
1.4Fail
1.7Fail
3.3AA Large
13.1AAA
Black BG
18.3AAA
15.3AAA
12.2AAA
6.3AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5DB
D9D9D9
E0E065
B1AF49
1F1F47

Deuteranopia

F5F6DC
D8D7D9
E4EA6B
BBC949
1D1A45

Tritanopia

F8E0E1
D5DADB
FB7A7E
F64949
114241

Achromatopsia

EFEFEF
DBDBDB
C1C1C1
808080
2B2B2B

Shades & Tints Shades & Tints

#F9EFD4

Dark
Light

#D4DFD7

Dark
Light

#FFB84A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9efd4;
  --color-2: #d4dfd7;
  --color-3: #ffb84a;
  --color-4: #ff4a49;
  --color-5: #0f334d;
}

SCSS

$color-1: #f9efd4;
$color-2: #d4dfd7;
$color-3: #ffb84a;
$color-4: #ff4a49;
$color-5: #0f334d;

TAILWIND

colors: {
  'brand-1': '#f9efd4',
  'brand-2': '#d4dfd7',
  'brand-3': '#ffb84a',
  'brand-4': '#ff4a49',
  'brand-5': '#0f334d',
}

RGB Array

[249, 239, 212], [212, 223, 215], [255, 184, 74], [255, 74, 73], [15, 51, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F9EFD4, #D4DFD7, #FFB84A, #FF4A49, #0F334D 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: #f9efd4; --color-2: #d4dfd7; --color-3: #ffb84a; --color-4: #ff4a49; --color-5: #0f334d. 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