← Back to Editor

#546270 · #4ECDC4 · #FDF6C3 · #FF6B6B · #D45050

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

#546270

Indigo · DimGray · Prussian Blue

HEX
#546270
RGB
rgb(84, 98, 112)
HSL
hsl(210, 14%, 38%)
HSB
hsb(210, 25%, 44%)
CMYK
cmyk(25%, 13%, 0%, 56%)
Oklch
oklch(49.0% 0.028 248.4)

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

#4ECDC4

Mineral Blue · MediumTurquoise · Lake Green

HEX
#4ECDC4
RGB
rgb(78, 205, 196)
HSL
hsl(176, 56%, 55%)
HSB
hsb(176, 62%, 80%)
CMYK
cmyk(62%, 0%, 4%, 20%)
Oklch
oklch(77.6% 0.112 188.5)

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

#FDF6C3

Fresh Green · Bisque · Lemon Cream

HEX
#FDF6C3
RGB
rgb(253, 246, 195)
HSL
hsl(53, 94%, 88%)
HSB
hsb(53, 23%, 99%)
CMYK
cmyk(0%, 3%, 23%, 1%)
Oklch
oklch(96.6% 0.066 101.0)

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

#FF6B6B

Peach Pink · Salmon · Coral Red

HEX
#FF6B6B
RGB
rgb(255, 107, 107)
HSL
hsl(0, 100%, 71%)
HSB
hsb(0, 58%, 100%)
CMYK
cmyk(0%, 58%, 58%, 0%)
Oklch
oklch(71.2% 0.181 22.8)

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

#D45050

Vermilion · Tomato · Passion Red

HEX
#D45050
RGB
rgb(212, 80, 80)
HSL
hsl(0, 61%, 57%)
HSB
hsb(0, 62%, 83%)
CMYK
cmyk(0%, 62%, 62%, 17%)
Oklch
oklch(60.8% 0.167 23.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

546270
6E6153

Analogous

536E6E
546270
53536E

Triadic

546270
6E5361
616E53

Split-Comp.

546270
6E5353
6E6E53

Tetradic

546270
6E536E
6E6153
536E53

Contrast Matrix WCAG 2.1 Contrast

546270
4ECDC4
FDF6C3
FF6B6B
D45050
—
3.2
AA Large
5.7
AA
2.3
Fail
1.5
Fail
3.2
AA Large
—
1.8
Fail
1.4
Fail
2.1
Fail
5.7
AA
1.8
Fail
—
2.5
Fail
3.8
AA Large
2.3
Fail
1.4
Fail
2.5
Fail
—
1.5
Fail
1.5
Fail
2.1
Fail
3.8
AA Large
1.5
Fail
—
White BG
6.3AA
1.9Fail
1.1Fail
2.8Fail
4.1AA Large
Black BG
3.4AA Large
10.9AAA
19.1AAA
7.6AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A6D
8586C6
FAFACF
BFBE6B
9B9A50

Deuteranopia

59586C
7E74C7
FAFBD2
C8D36B
A3AC50

Tritanopia

556A69
54C8C8
FDD9DB
F86B6B
CD5050

Achromatopsia

5F5F5F
A6A6A6
F2F2F2
979797
777777

Shades & Tints Shades & Tints

#546270

Dark
Light

#4ECDC4

Dark
Light

#FDF6C3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #546270;
  --color-2: #4ecdc4;
  --color-3: #fdf6c3;
  --color-4: #ff6b6b;
  --color-5: #d45050;
}

SCSS

$color-1: #546270;
$color-2: #4ecdc4;
$color-3: #fdf6c3;
$color-4: #ff6b6b;
$color-5: #d45050;

TAILWIND

colors: {
  'brand-1': '#546270',
  'brand-2': '#4ecdc4',
  'brand-3': '#fdf6c3',
  'brand-4': '#ff6b6b',
  'brand-5': '#d45050',
}

RGB Array

[84, 98, 112], [78, 205, 196], [253, 246, 195], [255, 107, 107], [212, 80, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #546270, #4ECDC4, #FDF6C3, #FF6B6B, #D45050 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: #546270; --color-2: #4ecdc4; --color-3: #fdf6c3; --color-4: #ff6b6b; --color-5: #d45050. 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