← Back to Editor

#7FA17B · #BCBB51 · #ECC501 · #E89301 · #BC1A29

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

#7FA17B

Celadon · Gray · Olive Green

HEX
#7FA17B
RGB
rgb(127, 161, 123)
HSL
hsl(114, 17%, 56%)
HSB
hsb(114, 24%, 63%)
CMYK
cmyk(21%, 0%, 24%, 37%)
Oklch
oklch(67.3% 0.067 142.1)

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

#BCBB51

Autumn Sage · GoldenRod · Sunflower

HEX
#BCBB51
RGB
rgb(188, 187, 81)
HSL
hsl(59, 44%, 53%)
HSB
hsb(59, 57%, 74%)
CMYK
cmyk(0%, 1%, 57%, 26%)
Oklch
oklch(77.2% 0.129 108.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#ECC501

Autumn Sage · Gold · Honey Gold

HEX
#ECC501
RGB
rgb(236, 197, 1)
HSL
hsl(50, 99%, 46%)
HSB
hsb(50, 100%, 93%)
CMYK
cmyk(0%, 17%, 100%, 7%)
Oklch
oklch(83.3% 0.171 94.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#E89301

Ochre · Orange · Amber Brown

HEX
#E89301
RGB
rgb(232, 147, 1)
HSL
hsl(38, 99%, 46%)
HSB
hsb(38, 100%, 91%)
CMYK
cmyk(0%, 37%, 100%, 9%)
Oklch
oklch(73.3% 0.160 69.1)

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

#BC1A29

Vermilion · FireBrick · Passion Red

HEX
#BC1A29
RGB
rgb(188, 26, 41)
HSL
hsl(354, 76%, 42%)
HSB
hsb(354, 86%, 74%)
CMYK
cmyk(0%, 86%, 78%, 26%)
Oklch
oklch(51.1% 0.193 24.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FA17B
9E7CA2

Analogous

93A27C
7FA17B
7CA28B

Triadic

7FA17B
7C80A2
A27C80

Split-Comp.

7FA17B
8B7CA2
A27C93

Tetradic

7FA17B
7C93A2
9E7CA2
A28B7C

Contrast Matrix WCAG 2.1 Contrast

7FA17B
BCBB51
ECC501
E89301
BC1A29
—
1.4
Fail
1.7
Fail
1.2
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
1.2
Fail
3.1
AA Large
1.7
Fail
1.2
Fail
—
1.5
Fail
3.8
AA Large
1.2
Fail
1.2
Fail
1.5
Fail
—
2.6
Fail
2.2
Fail
3.1
AA Large
3.8
AA Large
2.6
Fail
—
White BG
2.9Fail
2.0Fail
1.7Fail
2.4Fail
6.3AA
Black BG
7.3AAA
10.4AAA
12.6AAA
8.6AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E84
BCBC6B
DBDB30
C3C224
767425

Deuteranopia

8C8986
BCBC71
DDE03C
C8CE2D
7F8B25

Tritanopia

818B8D
BC7F83
EA565E
E44046
B42322

Achromatopsia

939393
AFAFAF
BABABA
9C9C9C
4C4C4C

Shades & Tints Shades & Tints

#7FA17B

Dark
Light

#BCBB51

Dark
Light

#ECC501

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fa17b;
  --color-2: #bcbb51;
  --color-3: #ecc501;
  --color-4: #e89301;
  --color-5: #bc1a29;
}

SCSS

$color-1: #7fa17b;
$color-2: #bcbb51;
$color-3: #ecc501;
$color-4: #e89301;
$color-5: #bc1a29;

TAILWIND

colors: {
  'brand-1': '#7fa17b',
  'brand-2': '#bcbb51',
  'brand-3': '#ecc501',
  'brand-4': '#e89301',
  'brand-5': '#bc1a29',
}

RGB Array

[127, 161, 123], [188, 187, 81], [236, 197, 1], [232, 147, 1], [188, 26, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #7FA17B, #BCBB51, #ECC501, #E89301, #BC1A29 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: #7fa17b; --color-2: #bcbb51; --color-3: #ecc501; --color-4: #e89301; --color-5: #bc1a29. 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