← Back to Editor

#FE2A07 · #D36E70 · #00CBCD · #F7DEFE · #A3A4A7

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

#FE2A07

Vermilion · OrangeRed · Passion Red

HEX
#FE2A07
RGB
rgb(254, 42, 7)
HSL
hsl(9, 99%, 51%)
HSB
hsb(9, 97%, 100%)
CMYK
cmyk(0%, 83%, 97%, 0%)
Oklch
oklch(63.9% 0.245 31.2)

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

#D36E70

Peach Pink · LightCoral · Coral Red

HEX
#D36E70
RGB
rgb(211, 110, 112)
HSL
hsl(359, 53%, 63%)
HSB
hsb(359, 48%, 83%)
CMYK
cmyk(0%, 48%, 47%, 17%)
Oklch
oklch(65.5% 0.127 19.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#00CBCD

Lake Blue · DarkTurquoise · Mint Ice

HEX
#00CBCD
RGB
rgb(0, 203, 205)
HSL
hsl(181, 100%, 40%)
HSB
hsb(181, 100%, 80%)
CMYK
cmyk(100%, 1%, 0%, 20%)
Oklch
oklch(76.3% 0.130 196.0)

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

#F7DEFE

Lilac · Lavender · Lavender

HEX
#F7DEFE
RGB
rgb(247, 222, 254)
HSL
hsl(287, 94%, 93%)
HSB
hsb(287, 13%, 100%)
CMYK
cmyk(3%, 13%, 0%, 0%)
Oklch
oklch(93.0% 0.050 318.8)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#A3A4A7

Ash · DarkGray · Silver Sand

HEX
#A3A4A7
RGB
rgb(163, 164, 167)
HSL
hsl(225, 2%, 65%)
HSB
hsb(225, 2%, 65%)
CMYK
cmyk(2%, 2%, 0%, 35%)
Oklch
oklch(71.9% 0.004 271.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FE2A07
06D9FE

Analogous

FE065D
FE2A07
FEA706

Triadic

FE2A07
06FE2B
2B06FE

Split-Comp.

FE2A07
06FEA7
065DFE

Tetradic

FE2A07
5DFE06
06D9FE
A706FE

Contrast Matrix WCAG 2.1 Contrast

FE2A07
D36E70
00CBCD
F7DEFE
A3A4A7
—
1.1
Fail
1.9
Fail
3.0
AA Large
1.5
Fail
1.1
Fail
—
1.7
Fail
2.7
Fail
1.4
Fail
1.9
Fail
1.7
Fail
—
1.6
Fail
1.2
Fail
3.0
AA Large
2.7
Fail
1.6
Fail
—
2.0
Fail
1.5
Fail
1.4
Fail
1.2
Fail
2.0
Fail
—
White BG
3.8AA Large
3.4AA Large
2.0Fail
1.2Fail
2.5Fail
Black BG
5.5AA
6.2AA
10.4AAA
16.8AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A00F
A7A670
585ACD
ECECF6
A3A3A6

Deuteranopia

AFBE12
ADB56F
4C3DCC
EEEFF4
A3A3A6

Tritanopia

F31618
CE6F6F
0ACCCC
F6F0EF
A3A6A6

Achromatopsia

656565
8C8C8C
8F8F8F
E9E9E9
A4A4A4

Shades & Tints Shades & Tints

#FE2A07

Dark
Light

#D36E70

Dark
Light

#00CBCD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fe2a07;
  --color-2: #d36e70;
  --color-3: #00cbcd;
  --color-4: #f7defe;
  --color-5: #a3a4a7;
}

SCSS

$color-1: #fe2a07;
$color-2: #d36e70;
$color-3: #00cbcd;
$color-4: #f7defe;
$color-5: #a3a4a7;

TAILWIND

colors: {
  'brand-1': '#fe2a07',
  'brand-2': '#d36e70',
  'brand-3': '#00cbcd',
  'brand-4': '#f7defe',
  'brand-5': '#a3a4a7',
}

RGB Array

[254, 42, 7], [211, 110, 112], [0, 203, 205], [247, 222, 254], [163, 164, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #FE2A07, #D36E70, #00CBCD, #F7DEFE, #A3A4A7 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: #fe2a07; --color-2: #d36e70; --color-3: #00cbcd; --color-4: #f7defe; --color-5: #a3a4a7. 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