← Back to Editor

#F5281D · #E9FFE8 · #4BA0A6 · #3D6A82 · #242C42

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

#F5281D

Vermilion · OrangeRed · Passion Red

HEX
#F5281D
RGB
rgb(245, 40, 29)
HSL
hsl(3, 92%, 54%)
HSB
hsb(3, 88%, 96%)
CMYK
cmyk(0%, 84%, 88%, 4%)
Oklch
oklch(62.3% 0.237 29.2)

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

#E9FFE8

Emerald · Beige · Mint Green

HEX
#E9FFE8
RGB
rgb(233, 255, 232)
HSL
hsl(117, 100%, 95%)
HSB
hsb(117, 9%, 100%)
CMYK
cmyk(9%, 0%, 9%, 0%)
Oklch
oklch(97.8% 0.038 144.1)

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

#4BA0A6

Slate Blue · CadetBlue · Mint Ice

HEX
#4BA0A6
RGB
rgb(75, 160, 166)
HSL
hsl(184, 38%, 47%)
HSB
hsb(184, 55%, 65%)
CMYK
cmyk(55%, 4%, 0%, 35%)
Oklch
oklch(65.6% 0.082 201.6)

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

#3D6A82

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#3D6A82
RGB
rgb(61, 106, 130)
HSL
hsl(201, 36%, 37%)
HSB
hsb(201, 53%, 51%)
CMYK
cmyk(53%, 18%, 0%, 49%)
Oklch
oklch(50.2% 0.063 233.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#242C42

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#242C42
RGB
rgb(36, 44, 66)
HSL
hsl(224, 29%, 20%)
HSB
hsb(224, 45%, 26%)
CMYK
cmyk(45%, 33%, 0%, 74%)
Oklch
oklch(29.6% 0.042 268.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5281D
1EEBF6

Analogous

F61E7F
F5281D
F6941E

Triadic

F5281D
1EF629
291EF6

Split-Comp.

F5281D
1EF694
1E7FF6

Tetradic

F5281D
7FF61E
1EEBF6
941EF6

Contrast Matrix WCAG 2.1 Contrast

F5281D
E9FFE8
4BA0A6
3D6A82
242C42
—
3.8
AA Large
1.3
Fail
1.5
Fail
3.4
AA Large
3.8
AA Large
—
2.9
Fail
5.6
AA
13.2
AAA
1.3
Fail
2.9
Fail
—
1.9
Fail
4.5
AA
1.5
Fail
5.6
AA
1.9
Fail
—
2.4
Fail
3.4
AA Large
13.2
AAA
4.5
AA
2.4
Fail
—
White BG
4.0AA Large
1.1Fail
3.1AA Large
5.9AA
13.9AAA
Black BG
5.2AA
19.9AAA
6.9AA
3.6AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9A20
F3F3EE
7071A5
50517C
27283D

Deuteranopia

A8B820
F1F0EF
6B65A4
4E4B7B
27263B

Tritanopia

EB2222
EAF2F3
4FA3A3
3F7877
243838

Achromatopsia

646464
F6F6F6
878787
5F5F5F
2C2C2C

Shades & Tints Shades & Tints

#F5281D

Dark
Light

#E9FFE8

Dark
Light

#4BA0A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5281d;
  --color-2: #e9ffe8;
  --color-3: #4ba0a6;
  --color-4: #3d6a82;
  --color-5: #242c42;
}

SCSS

$color-1: #f5281d;
$color-2: #e9ffe8;
$color-3: #4ba0a6;
$color-4: #3d6a82;
$color-5: #242c42;

TAILWIND

colors: {
  'brand-1': '#f5281d',
  'brand-2': '#e9ffe8',
  'brand-3': '#4ba0a6',
  'brand-4': '#3d6a82',
  'brand-5': '#242c42',
}

RGB Array

[245, 40, 29], [233, 255, 232], [75, 160, 166], [61, 106, 130], [36, 44, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F5281D, #E9FFE8, #4BA0A6, #3D6A82, #242C42 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: #f5281d; --color-2: #e9ffe8; --color-3: #4ba0a6; --color-4: #3d6a82; --color-5: #242c42. 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