← Back to Editor

#537777 · #552437 · #BE2B3E · #D55D42 · #E9D073

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

#537777

Slate Blue · DimGray · Mint Ice

HEX
#537777
RGB
rgb(83, 119, 119)
HSL
hsl(180, 18%, 40%)
HSB
hsb(180, 30%, 47%)
CMYK
cmyk(30%, 0%, 0%, 53%)
Oklch
oklch(54.2% 0.041 196.0)

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

#552437

Dark Violet · DarkSlateGray · Raspberry

HEX
#552437
RGB
rgb(85, 36, 55)
HSL
hsl(337, 40%, 24%)
HSB
hsb(337, 58%, 33%)
CMYK
cmyk(0%, 58%, 35%, 67%)
Oklch
oklch(33.6% 0.076 357.6)

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

#BE2B3E

Vermilion · FireBrick · Passion Red

HEX
#BE2B3E
RGB
rgb(190, 43, 62)
HSL
hsl(352, 63%, 46%)
HSB
hsb(352, 77%, 75%)
CMYK
cmyk(0%, 77%, 67%, 25%)
Oklch
oklch(53.0% 0.182 19.5)

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

#D55D42

Vermilion · Chocolate · Passion Red

HEX
#D55D42
RGB
rgb(213, 93, 66)
HSL
hsl(11, 64%, 55%)
HSB
hsb(11, 69%, 84%)
CMYK
cmyk(0%, 56%, 69%, 16%)
Oklch
oklch(62.4% 0.157 34.1)

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

#E9D073

Ginger · BurlyWood · Sunflower

HEX
#E9D073
RGB
rgb(233, 208, 115)
HSL
hsl(47, 73%, 68%)
HSB
hsb(47, 51%, 91%)
CMYK
cmyk(0%, 11%, 51%, 9%)
Oklch
oklch(85.9% 0.117 94.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

537777
785454

Analogous

547866
537777
546678

Triadic

537777
785478
787854

Split-Comp.

537777
785466
786654

Tetradic

537777
665478
785454
667854

Contrast Matrix WCAG 2.1 Contrast

537777
552437
BE2B3E
D55D42
E9D073
—
2.5
Fail
1.2
Fail
1.3
Fail
3.2
AA Large
2.5
Fail
—
2.1
Fail
3.2
AA Large
8.1
AAA
1.2
Fail
2.1
Fail
—
1.5
Fail
3.8
AA Large
1.3
Fail
3.2
AA Large
1.5
Fail
—
2.5
Fail
3.2
AA Large
8.1
AAA
3.8
AA Large
2.5
Fail
—
White BG
4.9AA
12.4AAA
5.8AA
3.8AA Large
1.5Fail
Black BG
4.3AA Large
1.7Fail
3.6AA Large
5.5AA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636377
403F32
7E7D39
A1A049
DEDE8A

Deuteranopia

615E77
434631
879238
A8B14A
E0E28F

Tritanopia

557777
532F2E
B73635
CF4E4F
E89B9F

Achromatopsia

6C6C6C
353535
595959
7E7E7E
CDCDCD

Shades & Tints Shades & Tints

#537777

Dark
Light

#552437

Dark
Light

#BE2B3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #537777;
  --color-2: #552437;
  --color-3: #be2b3e;
  --color-4: #d55d42;
  --color-5: #e9d073;
}

SCSS

$color-1: #537777;
$color-2: #552437;
$color-3: #be2b3e;
$color-4: #d55d42;
$color-5: #e9d073;

TAILWIND

colors: {
  'brand-1': '#537777',
  'brand-2': '#552437',
  'brand-3': '#be2b3e',
  'brand-4': '#d55d42',
  'brand-5': '#e9d073',
}

RGB Array

[83, 119, 119], [85, 36, 55], [190, 43, 62], [213, 93, 66], [233, 208, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #537777, #552437, #BE2B3E, #D55D42, #E9D073 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: #537777; --color-2: #552437; --color-3: #be2b3e; --color-4: #d55d42; --color-5: #e9d073. 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