← Back to Editor

#30363B · #F8AF41 · #FAE966 · #F5F7C8 · #C4AA84

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

#30363B

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#30363B
RGB
rgb(48, 54, 59)
HSL
hsl(207, 10%, 21%)
HSB
hsb(207, 19%, 23%)
CMYK
cmyk(19%, 8%, 0%, 77%)
Oklch
oklch(32.9% 0.012 243.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#F8AF41

Ginger · SandyBrown · Warm Sun

HEX
#F8AF41
RGB
rgb(248, 175, 65)
HSL
hsl(36, 93%, 61%)
HSB
hsb(36, 74%, 97%)
CMYK
cmyk(0%, 29%, 74%, 3%)
Oklch
oklch(80.5% 0.148 73.4)

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

#FAE966

Fresh Green · Khaki · Sunflower

HEX
#FAE966
RGB
rgb(250, 233, 102)
HSL
hsl(53, 94%, 69%)
HSB
hsb(53, 59%, 98%)
CMYK
cmyk(0%, 7%, 59%, 2%)
Oklch
oklch(92.3% 0.151 102.0)

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

#F5F7C8

Fresh Green · Beige · Lemon Cream

HEX
#F5F7C8
RGB
rgb(245, 247, 200)
HSL
hsl(63, 75%, 88%)
HSB
hsb(63, 19%, 97%)
CMYK
cmyk(1%, 0%, 19%, 3%)
Oklch
oklch(96.3% 0.061 109.5)

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

#C4AA84

Ginger · Tan · Warm Sun

HEX
#C4AA84
RGB
rgb(196, 170, 132)
HSL
hsl(36, 35%, 64%)
HSB
hsb(36, 33%, 77%)
CMYK
cmyk(0%, 13%, 33%, 23%)
Oklch
oklch(75.1% 0.060 77.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30363B
3B3530

Analogous

303B3A
30363B
30313B

Triadic

30363B
3B3036
363B30

Split-Comp.

30363B
3B3031
3B3A30

Tetradic

30363B
3A303B
3B3530
313B30

Contrast Matrix WCAG 2.1 Contrast

30363B
F8AF41
FAE966
F5F7C8
C4AA84
—
6.5
AA
9.9
AAA
11.1
AAA
5.5
AA
6.5
AA
—
1.5
Fail
1.7
Fail
1.2
Fail
9.9
AAA
1.5
Fail
—
1.1
Fail
1.8
Fail
11.1
AAA
1.7
Fail
1.1
Fail
—
2.0
Fail
5.5
AA
1.2
Fail
1.8
Fail
2.0
Fail
—
White BG
12.2AAA
1.9Fail
1.2Fail
1.1Fail
2.2Fail
Black BG
1.7Fail
11.2AAA
16.9AAA
19.0AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

33333A
D8D85C
F3F286
F6F6D3
B9B98D

Deuteranopia

32323A
DDE262
F4F58D
F6F6D6
BABC8F

Tritanopia

303939
F47175
F99FA4
F5DCDE
C39496

Achromatopsia

353535
B8B8B8
DFDFDF
F1F1F1
ADADAD

Shades & Tints Shades & Tints

#30363B

Dark
Light

#F8AF41

Dark
Light

#FAE966

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30363b;
  --color-2: #f8af41;
  --color-3: #fae966;
  --color-4: #f5f7c8;
  --color-5: #c4aa84;
}

SCSS

$color-1: #30363b;
$color-2: #f8af41;
$color-3: #fae966;
$color-4: #f5f7c8;
$color-5: #c4aa84;

TAILWIND

colors: {
  'brand-1': '#30363b',
  'brand-2': '#f8af41',
  'brand-3': '#fae966',
  'brand-4': '#f5f7c8',
  'brand-5': '#c4aa84',
}

RGB Array

[48, 54, 59], [248, 175, 65], [250, 233, 102], [245, 247, 200], [196, 170, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #30363B, #F8AF41, #FAE966, #F5F7C8, #C4AA84 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: #30363b; --color-2: #f8af41; --color-3: #fae966; --color-4: #f5f7c8; --color-5: #c4aa84. 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