← Back to Editor

#04030D · #EBCB98 · #BF7917 · #F75C31 · #77A68C

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

#04030D

Deep Indigo · Black · Deep Sea Blue

HEX
#04030D
RGB
rgb(4, 3, 13)
HSL
hsl(246, 63%, 3%)
HSB
hsb(246, 77%, 5%)
CMYK
cmyk(69%, 77%, 0%, 95%)
Oklch
oklch(10.9% 0.028 287.6)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#EBCB98

Goose Yellow · BurlyWood · Peach Orange

HEX
#EBCB98
RGB
rgb(235, 203, 152)
HSL
hsl(37, 67%, 76%)
HSB
hsb(37, 35%, 92%)
CMYK
cmyk(0%, 14%, 35%, 8%)
Oklch
oklch(85.7% 0.075 79.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BF7917

Ochre · DarkGoldenRod · Amber Brown

HEX
#BF7917
RGB
rgb(191, 121, 23)
HSL
hsl(35, 79%, 42%)
HSB
hsb(35, 88%, 75%)
CMYK
cmyk(0%, 37%, 88%, 25%)
Oklch
oklch(63.6% 0.133 67.8)

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

#F75C31

Vermilion · Tomato · Passion Red

HEX
#F75C31
RGB
rgb(247, 92, 49)
HSL
hsl(13, 93%, 58%)
HSB
hsb(13, 80%, 97%)
CMYK
cmyk(0%, 63%, 80%, 3%)
Oklch
oklch(67.3% 0.198 35.9)

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

#77A68C

Celadon · CadetBlue · Olive Green

HEX
#77A68C
RGB
rgb(119, 166, 140)
HSL
hsl(147, 21%, 56%)
HSB
hsb(147, 28%, 65%)
CMYK
cmyk(28%, 0%, 16%, 35%)
Oklch
oklch(68.4% 0.064 159.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04030D
0C0C03

Analogous

03070C
04030D
09030C

Triadic

04030D
0C0403
030C04

Split-Comp.

04030D
0C0903
070C03

Tetradic

04030D
0C0307
0C0C03
030C09

Contrast Matrix WCAG 2.1 Contrast

04030D
EBCB98
BF7917
F75C31
77A68C
—
13.2
AAA
5.8
AA
6.4
AA
7.4
AAA
13.2
AAA
—
2.3
Fail
2.1
Fail
1.8
Fail
5.8
AA
2.3
Fail
—
1.1
Fail
1.3
Fail
6.4
AA
2.1
Fail
1.1
Fail
—
1.2
Fail
7.4
AAA
1.8
Fail
1.3
Fail
1.2
Fail
—
White BG
20.5AAA
1.6Fail
3.5AA Large
3.2AA Large
2.8Fail
Black BG
1.0Fail
13.5AAA
6.0AA
6.5AA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

04040B
DDDDA4
A1A02F
B4B23B
8B8C92

Deuteranopia

04040A
DFE1A7
A5AA34
BDC83E
898594

Tritanopia

040908
E9AEB0
BC4146
EF4445
799798

Achromatopsia

040404
CFCFCF
838383
858585
959595

Shades & Tints Shades & Tints

#04030D

Dark
Light

#EBCB98

Dark
Light

#BF7917

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04030d;
  --color-2: #ebcb98;
  --color-3: #bf7917;
  --color-4: #f75c31;
  --color-5: #77a68c;
}

SCSS

$color-1: #04030d;
$color-2: #ebcb98;
$color-3: #bf7917;
$color-4: #f75c31;
$color-5: #77a68c;

TAILWIND

colors: {
  'brand-1': '#04030d',
  'brand-2': '#ebcb98',
  'brand-3': '#bf7917',
  'brand-4': '#f75c31',
  'brand-5': '#77a68c',
}

RGB Array

[4, 3, 13], [235, 203, 152], [191, 121, 23], [247, 92, 49], [119, 166, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #04030D, #EBCB98, #BF7917, #F75C31, #77A68C 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: #04030d; --color-2: #ebcb98; --color-3: #bf7917; --color-4: #f75c31; --color-5: #77a68c. 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