← Back to Editor

#4CD4B0 · #FFFFDE · #FF7154 · #D6133E · #AB0053

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

#4CD4B0

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#4CD4B0
RGB
rgb(76, 212, 176)
HSL
hsl(164, 61%, 56%)
HSB
hsb(164, 64%, 83%)
CMYK
cmyk(64%, 0%, 17%, 17%)
Oklch
oklch(78.7% 0.129 172.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FFFFDE

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFDE
RGB
rgb(255, 255, 222)
HSL
hsl(60, 100%, 94%)
HSB
hsb(60, 13%, 100%)
CMYK
cmyk(0%, 0%, 13%, 0%)
Oklch
oklch(99.2% 0.043 107.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FF7154

Peach Pink · Coral · Coral Red

HEX
#FF7154
RGB
rgb(255, 113, 84)
HSL
hsl(10, 100%, 66%)
HSB
hsb(10, 67%, 100%)
CMYK
cmyk(0%, 56%, 67%, 0%)
Oklch
oklch(71.6% 0.179 33.2)

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

#D6133E

Vermilion · Crimson · Passion Red

HEX
#D6133E
RGB
rgb(214, 19, 62)
HSL
hsl(347, 84%, 46%)
HSB
hsb(347, 91%, 84%)
CMYK
cmyk(0%, 91%, 71%, 16%)
Oklch
oklch(56.0% 0.217 18.9)

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

#AB0053

Dark Violet · Crimson · Camellia

HEX
#AB0053
RGB
rgb(171, 0, 83)
HSL
hsl(331, 100%, 34%)
HSB
hsb(331, 100%, 67%)
CMYK
cmyk(0%, 100%, 51%, 33%)
Oklch
oklch(47.8% 0.193 2.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4CD4B0
D34A6F

Analogous

4AD36A
4CD4B0
4AB3D3

Triadic

4CD4B0
AF4AD3
D3AF4A

Split-Comp.

4CD4B0
D34AB3
D36A4A

Tetradic

4CD4B0
6A4AD3
D34A6F
B3D34A

Contrast Matrix WCAG 2.1 Contrast

4CD4B0
FFFFDE
FF7154
D6133E
AB0053
—
1.8
Fail
1.5
Fail
2.8
Fail
4.0
AA Large
1.8
Fail
—
2.7
Fail
5.1
AA
7.2
AAA
1.5
Fail
2.7
Fail
—
1.9
Fail
2.7
Fail
2.8
Fail
5.1
AA
1.9
Fail
—
1.4
Fail
4.0
AA Large
7.2
AAA
2.7
Fail
1.4
Fail
—
White BG
1.8Fail
1.0Fail
2.7Fail
5.2AA
7.4AAA
Black BG
11.4AAA
20.6AAA
7.7AAA
4.0AA Large
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8788B9
FFFFE6
C2C05B
828034
615F3F

Deuteranopia

7F75BB
FFFFE8
CAD45D
8D9B31
6B783A

Tritanopia

53C0C1
FFECEE
F86162
CC2B2A
A22F2C

Achromatopsia

A7A7A7
FBFBFB
989898
525252
3D3D3D

Shades & Tints Shades & Tints

#4CD4B0

Dark
Light

#FFFFDE

Dark
Light

#FF7154

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4cd4b0;
  --color-2: #ffffde;
  --color-3: #ff7154;
  --color-4: #d6133e;
  --color-5: #ab0053;
}

SCSS

$color-1: #4cd4b0;
$color-2: #ffffde;
$color-3: #ff7154;
$color-4: #d6133e;
$color-5: #ab0053;

TAILWIND

colors: {
  'brand-1': '#4cd4b0',
  'brand-2': '#ffffde',
  'brand-3': '#ff7154',
  'brand-4': '#d6133e',
  'brand-5': '#ab0053',
}

RGB Array

[76, 212, 176], [255, 255, 222], [255, 113, 84], [214, 19, 62], [171, 0, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #4CD4B0, #FFFFDE, #FF7154, #D6133E, #AB0053 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: #4cd4b0; --color-2: #ffffde; --color-3: #ff7154; --color-4: #d6133e; --color-5: #ab0053. 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