← Back to Editor

#F1E8C9 · #E6930C · #EC5021 · #402B12 · #4D9E8A

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

#F1E8C9

Goose Yellow · Bisque · Lemon Cream

HEX
#F1E8C9
RGB
rgb(241, 232, 201)
HSL
hsl(47, 59%, 87%)
HSB
hsb(47, 17%, 95%)
CMYK
cmyk(0%, 4%, 17%, 5%)
Oklch
oklch(93.0% 0.042 93.7)

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

#E6930C

Ochre · GoldenRod · Amber Brown

HEX
#E6930C
RGB
rgb(230, 147, 12)
HSL
hsl(37, 90%, 47%)
HSB
hsb(37, 95%, 90%)
CMYK
cmyk(0%, 36%, 95%, 10%)
Oklch
oklch(73.1% 0.157 69.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#EC5021

Vermilion · Chocolate · Passion Red

HEX
#EC5021
RGB
rgb(236, 80, 33)
HSL
hsl(14, 84%, 53%)
HSB
hsb(14, 86%, 93%)
CMYK
cmyk(0%, 66%, 86%, 7%)
Oklch
oklch(64.1% 0.200 36.2)

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

#402B12

Ochre · DarkSlateGray · Cinnamon

HEX
#402B12
RGB
rgb(64, 43, 18)
HSL
hsl(33, 56%, 16%)
HSB
hsb(33, 72%, 25%)
CMYK
cmyk(0%, 33%, 72%, 75%)
Oklch
oklch(30.8% 0.049 68.9)

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

#4D9E8A

Mineral Blue · CadetBlue · Mint Ice

HEX
#4D9E8A
RGB
rgb(77, 158, 138)
HSL
hsl(165, 34%, 46%)
HSB
hsb(165, 51%, 62%)
CMYK
cmyk(51%, 0%, 13%, 38%)
Oklch
oklch(64.2% 0.086 175.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1E8C9
CAD3F1

Analogous

F1D5CA
F1E8C9
E6F1CA

Triadic

F1E8C9
CAF1E9
E9CAF1

Split-Comp.

F1E8C9
CAE6F1
D5CAF1

Tetradic

F1E8C9
CAF1D5
CAD3F1
F1CAE6

Contrast Matrix WCAG 2.1 Contrast

F1E8C9
E6930C
EC5021
402B12
4D9E8A
—
2.0
Fail
3.0
Fail
10.9
AAA
2.6
Fail
2.0
Fail
—
1.5
Fail
5.4
AA
1.3
Fail
3.0
Fail
1.5
Fail
—
3.6
AA Large
1.1
Fail
10.9
AAA
5.4
AA
3.6
AA Large
—
4.2
AA Large
2.6
Fail
1.3
Fail
1.1
Fail
4.2
AA Large
—
White BG
1.2Fail
2.5Fail
3.7AA Large
13.4AAA
3.2AA Large
Black BG
17.1AAA
8.5AAA
5.7AA
1.6Fail
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDD1
C2C12D
A8A72C
373718
70718F

Deuteranopia

EEEED2
C7CD35
B2BD2F
383A1A
6B6590

Tritanopia

F1D6D8
E2464C
E43537
3F1D1E
519394

Achromatopsia

E7E7E7
9C9C9C
797979
2E2E2E
848484

Shades & Tints Shades & Tints

#F1E8C9

Dark
Light

#E6930C

Dark
Light

#EC5021

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1e8c9;
  --color-2: #e6930c;
  --color-3: #ec5021;
  --color-4: #402b12;
  --color-5: #4d9e8a;
}

SCSS

$color-1: #f1e8c9;
$color-2: #e6930c;
$color-3: #ec5021;
$color-4: #402b12;
$color-5: #4d9e8a;

TAILWIND

colors: {
  'brand-1': '#f1e8c9',
  'brand-2': '#e6930c',
  'brand-3': '#ec5021',
  'brand-4': '#402b12',
  'brand-5': '#4d9e8a',
}

RGB Array

[241, 232, 201], [230, 147, 12], [236, 80, 33], [64, 43, 18], [77, 158, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F1E8C9, #E6930C, #EC5021, #402B12, #4D9E8A 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: #f1e8c9; --color-2: #e6930c; --color-3: #ec5021; --color-4: #402b12; --color-5: #4d9e8a. 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