← Back to Editor

#30C788 · #FFF875 · #FFAF2E · #FF5A09 · #FF0022

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 MenuPoster

Color Details Color Details

#30C788

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#30C788
RGB
rgb(48, 199, 136)
HSL
hsl(155, 61%, 48%)
HSB
hsb(155, 76%, 78%)
CMYK
cmyk(76%, 0%, 32%, 22%)
Oklch
oklch(73.8% 0.154 160.1)

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

#FFF875

Fresh Green · Khaki · Sunflower

HEX
#FFF875
RGB
rgb(255, 248, 117)
HSL
hsl(57, 100%, 73%)
HSB
hsb(57, 54%, 100%)
CMYK
cmyk(0%, 3%, 54%, 0%)
Oklch
oklch(95.9% 0.152 106.1)

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

#FFAF2E

Ginger · GoldenRod · Warm Sun

HEX
#FFAF2E
RGB
rgb(255, 175, 46)
HSL
hsl(37, 100%, 59%)
HSB
hsb(37, 82%, 100%)
CMYK
cmyk(0%, 31%, 82%, 0%)
Oklch
oklch(81.2% 0.160 73.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FF5A09

Tangerine · OrangeRed · Warm Sun

HEX
#FF5A09
RGB
rgb(255, 90, 9)
HSL
hsl(20, 100%, 52%)
HSB
hsb(20, 96%, 100%)
CMYK
cmyk(0%, 65%, 96%, 0%)
Oklch
oklch(68.2% 0.213 39.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FF0022

Vermilion · Red · Passion Red

HEX
#FF0022
RGB
rgb(255, 0, 34)
HSL
hsl(352, 100%, 50%)
HSB
hsb(352, 100%, 100%)
CMYK
cmyk(0%, 100%, 87%, 0%)
Oklch
oklch(62.9% 0.256 26.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30C788
C5306E

Analogous

30C53C
30C788
30B9C5

Triadic

30C788
8730C5
C58730

Split-Comp.

30C788
C530B9
C53C30

Tetradic

30C788
3C30C5
C5306E
B9C530

Contrast Matrix WCAG 2.1 Contrast

30C788
FFF875
FFAF2E
FF5A09
FF0022
—
2.0
Fail
1.2
Fail
1.4
Fail
1.8
Fail
2.0
Fail
—
1.7
Fail
2.8
Fail
3.6
AA Large
1.2
Fail
1.7
Fail
—
1.7
Fail
2.2
Fail
1.4
Fail
2.8
Fail
1.7
Fail
—
1.3
Fail
1.8
Fail
3.6
AA Large
2.2
Fail
1.3
Fail
—
White BG
2.2Fail
1.1Fail
1.8Fail
3.1AA Large
4.0AA Large
Black BG
9.7AAA
18.9AAA
11.4AAA
6.7AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717397
FCFC95
DCDC4D
B8B61D
918E1A

Deuteranopia

695D9B
FCFD9C
E1E755
C1CE21
9FB318

Tritanopia

38A3A6
FFAEB3
FB666B
F72C2F
F21312

Achromatopsia

939393
EBEBEB
B8B8B8
828282
505050

Shades & Tints Shades & Tints

#30C788

Dark
Light

#FFF875

Dark
Light

#FFAF2E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30c788;
  --color-2: #fff875;
  --color-3: #ffaf2e;
  --color-4: #ff5a09;
  --color-5: #ff0022;
}

SCSS

$color-1: #30c788;
$color-2: #fff875;
$color-3: #ffaf2e;
$color-4: #ff5a09;
$color-5: #ff0022;

TAILWIND

colors: {
  'brand-1': '#30c788',
  'brand-2': '#fff875',
  'brand-3': '#ffaf2e',
  'brand-4': '#ff5a09',
  'brand-5': '#ff0022',
}

RGB Array

[48, 199, 136], [255, 248, 117], [255, 175, 46], [255, 90, 9], [255, 0, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #30C788, #FFF875, #FFAF2E, #FF5A09, #FF0022 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: #30c788; --color-2: #fff875; --color-3: #ffaf2e; --color-4: #ff5a09; --color-5: #ff0022. 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