← Back to Editor

#BB1E00 · #FFC25B · #578C54 · #F78400 · #F13E27

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#BB1E00

Vermilion · FireBrick · Wine Red

HEX
#BB1E00
RGB
rgb(187, 30, 0)
HSL
hsl(10, 100%, 37%)
HSB
hsb(10, 100%, 73%)
CMYK
cmyk(0%, 84%, 100%, 27%)
Oklch
oklch(50.9% 0.193 31.9)

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

#FFC25B

Ginger · SandyBrown · Warm Sun

HEX
#FFC25B
RGB
rgb(255, 194, 91)
HSL
hsl(38, 100%, 68%)
HSB
hsb(38, 64%, 100%)
CMYK
cmyk(0%, 24%, 64%, 0%)
Oklch
oklch(85.0% 0.138 78.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#578C54

Celadon · SeaGreen · Olive Green

HEX
#578C54
RGB
rgb(87, 140, 84)
HSL
hsl(117, 25%, 44%)
HSB
hsb(117, 40%, 55%)
CMYK
cmyk(38%, 0%, 40%, 45%)
Oklch
oklch(58.8% 0.101 143.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#F78400

Ochre · Orange · Amber Brown

HEX
#F78400
RGB
rgb(247, 132, 0)
HSL
hsl(32, 100%, 48%)
HSB
hsb(32, 100%, 97%)
CMYK
cmyk(0%, 47%, 100%, 3%)
Oklch
oklch(72.7% 0.177 56.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F13E27

Vermilion · OrangeRed · Passion Red

HEX
#F13E27
RGB
rgb(241, 62, 39)
HSL
hsl(7, 88%, 55%)
HSB
hsb(7, 84%, 95%)
CMYK
cmyk(0%, 74%, 84%, 5%)
Oklch
oklch(63.2% 0.218 30.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB1E00
009DBD

Analogous

BD003F
BB1E00
BD7E00

Triadic

BB1E00
00BD1F
1F00BD

Split-Comp.

BB1E00
00BD7E
003FBD

Tetradic

BB1E00
3FBD00
009DBD
7E00BD

Contrast Matrix WCAG 2.1 Contrast

BB1E00
FFC25B
578C54
F78400
F13E27
—
4.0
AA Large
1.6
Fail
2.5
Fail
1.7
Fail
4.0
AA Large
—
2.5
Fail
1.6
Fail
2.4
Fail
1.6
Fail
2.5
Fail
—
1.6
Fail
1.0
Fail
2.5
Fail
1.6
Fail
1.6
Fail
—
1.5
Fail
1.7
Fail
2.4
Fail
1.0
Fail
1.5
Fail
—
White BG
6.4AA
1.6Fail
4.0AA Large
2.5Fail
3.8AA Large
Black BG
3.3AA Large
13.1AAA
5.3AA
8.3AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777607
E5E474
6E6E62
C5C420
A3A22D

Deuteranopia

808C09
E8ED7A
6B6765
CCD428
AEBB2E

Tritanopia

B30D0E
FC888C
5A6C6F
F1393F
E83132

Achromatopsia

4A4A4A
C8C8C8
767676
979797
717171

Shades & Tints Shades & Tints

#BB1E00

Dark
Light

#FFC25B

Dark
Light

#578C54

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb1e00;
  --color-2: #ffc25b;
  --color-3: #578c54;
  --color-4: #f78400;
  --color-5: #f13e27;
}

SCSS

$color-1: #bb1e00;
$color-2: #ffc25b;
$color-3: #578c54;
$color-4: #f78400;
$color-5: #f13e27;

TAILWIND

colors: {
  'brand-1': '#bb1e00',
  'brand-2': '#ffc25b',
  'brand-3': '#578c54',
  'brand-4': '#f78400',
  'brand-5': '#f13e27',
}

RGB Array

[187, 30, 0], [255, 194, 91], [87, 140, 84], [247, 132, 0], [241, 62, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #BB1E00, #FFC25B, #578C54, #F78400, #F13E27 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #bb1e00; --color-2: #ffc25b; --color-3: #578c54; --color-4: #f78400; --color-5: #f13e27. 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. 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