← Back to Editor

#098786 · #FFE479 · #B3C71F · #FFF9DD · #B30814

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

#098786

Lake Blue · Teal · Mint Ice

HEX
#098786
RGB
rgb(9, 135, 134)
HSL
hsl(180, 88%, 28%)
HSB
hsb(180, 93%, 53%)
CMYK
cmyk(93%, 0%, 1%, 47%)
Oklch
oklch(56.5% 0.095 193.9)

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

#FFE479

Goose Yellow · Khaki · Sunflower

HEX
#FFE479
RGB
rgb(255, 228, 121)
HSL
hsl(48, 100%, 74%)
HSB
hsb(48, 53%, 100%)
CMYK
cmyk(0%, 11%, 53%, 0%)
Oklch
oklch(92.0% 0.130 95.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#B3C71F

Autumn Sage · GoldenRod · Honey Gold

HEX
#B3C71F
RGB
rgb(179, 199, 31)
HSL
hsl(67, 73%, 45%)
HSB
hsb(67, 84%, 78%)
CMYK
cmyk(10%, 0%, 84%, 22%)
Oklch
oklch(78.8% 0.175 117.0)

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

#FFF9DD

Goose Yellow · LightYellow · Lemon Cream

HEX
#FFF9DD
RGB
rgb(255, 249, 221)
HSL
hsl(49, 100%, 93%)
HSB
hsb(49, 13%, 100%)
CMYK
cmyk(0%, 2%, 13%, 0%)
Oklch
oklch(97.9% 0.037 97.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B30814

Vermilion · FireBrick · Wine Red

HEX
#B30814
RGB
rgb(179, 8, 20)
HSL
hsl(356, 91%, 37%)
HSB
hsb(356, 96%, 70%)
CMYK
cmyk(0%, 96%, 89%, 30%)
Oklch
oklch(48.5% 0.194 27.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

098786
860909

Analogous

098647
098786
094786

Triadic

098786
860986
868609

Split-Comp.

098786
860947
864709

Tetradic

098786
470986
860909
478609

Contrast Matrix WCAG 2.1 Contrast

098786
FFE479
B3C71F
FFF9DD
B30814
—
3.4
AA Large
2.3
Fail
4.1
AA Large
1.6
Fail
3.4
AA Large
—
1.5
Fail
1.2
Fail
5.6
AA
2.3
Fail
1.5
Fail
—
1.8
Fail
3.7
AA Large
4.1
AA Large
1.2
Fail
1.8
Fail
—
6.7
AA
1.6
Fail
5.6
AA
3.7
AA Large
6.7
AA
—
White BG
4.4AA Large
1.3Fail
1.9Fail
1.1Fail
7.1AAA
Black BG
4.8AA
16.6AAA
11.1AAA
19.8AAA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

404186
F3F393
BCBC48
FCFCE4
696711

Deuteranopia

382F86
F5F799
BBB951
FDFDE5
738010

Tritanopia

0F8686
FEA7AC
B4686F
FFE9EA
AA0F0E

Achromatopsia

616161
E0E0E0
AEAEAE
F8F8F8
3C3C3C

Shades & Tints Shades & Tints

#098786

Dark
Light

#FFE479

Dark
Light

#B3C71F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #098786;
  --color-2: #ffe479;
  --color-3: #b3c71f;
  --color-4: #fff9dd;
  --color-5: #b30814;
}

SCSS

$color-1: #098786;
$color-2: #ffe479;
$color-3: #b3c71f;
$color-4: #fff9dd;
$color-5: #b30814;

TAILWIND

colors: {
  'brand-1': '#098786',
  'brand-2': '#ffe479',
  'brand-3': '#b3c71f',
  'brand-4': '#fff9dd',
  'brand-5': '#b30814',
}

RGB Array

[9, 135, 134], [255, 228, 121], [179, 199, 31], [255, 249, 221], [179, 8, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #098786, #FFE479, #B3C71F, #FFF9DD, #B30814 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: #098786; --color-2: #ffe479; --color-3: #b3c71f; --color-4: #fff9dd; --color-5: #b30814. 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