← Back to Editor

#FFCC83 · #FD7A44 · #A21E07 · #2D040A · #3863A8

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

#FFCC83

Goose Yellow · Khaki · Peach Orange

HEX
#FFCC83
RGB
rgb(255, 204, 131)
HSL
hsl(35, 100%, 76%)
HSB
hsb(35, 49%, 100%)
CMYK
cmyk(0%, 20%, 49%, 0%)
Oklch
oklch(87.5% 0.108 75.5)

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

#FD7A44

Apricot · Coral · Warm Sun

HEX
#FD7A44
RGB
rgb(253, 122, 68)
HSL
hsl(18, 98%, 63%)
HSB
hsb(18, 73%, 99%)
CMYK
cmyk(0%, 52%, 73%, 1%)
Oklch
oklch(72.4% 0.174 41.7)

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

#A21E07

Vermilion · FireBrick · Wine Red

HEX
#A21E07
RGB
rgb(162, 30, 7)
HSL
hsl(9, 92%, 33%)
HSB
hsb(9, 96%, 64%)
CMYK
cmyk(0%, 81%, 96%, 36%)
Oklch
oklch(46.2% 0.170 31.9)

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

#2D040A

Vermilion · Black · Deep Berry

HEX
#2D040A
RGB
rgb(45, 4, 10)
HSL
hsl(351, 84%, 10%)
HSB
hsb(351, 91%, 18%)
CMYK
cmyk(0%, 91%, 78%, 82%)
Oklch
oklch(19.7% 0.068 16.6)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#3863A8

Indigo · SteelBlue · Navy Blue

HEX
#3863A8
RGB
rgb(56, 99, 168)
HSL
hsl(217, 50%, 44%)
HSB
hsb(217, 67%, 66%)
CMYK
cmyk(67%, 41%, 0%, 34%)
Oklch
oklch(50.4% 0.120 259.4)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCC83
85B8FF

Analogous

FF8F85
FFCC83
F5FF85

Triadic

FFCC83
85FFCC
CC85FF

Split-Comp.

FFCC83
85F5FF
8F85FF

Tetradic

FFCC83
85FF8F
85B8FF
FF85F5

Contrast Matrix WCAG 2.1 Contrast

FFCC83
FD7A44
A21E07
2D040A
3863A8
—
1.8
Fail
5.2
AA
12.5
AAA
4.0
AA Large
1.8
Fail
—
3.0
Fail
7.1
AAA
2.3
Fail
5.2
AA
3.0
Fail
—
2.4
Fail
1.3
Fail
12.5
AAA
7.1
AAA
2.4
Fail
—
3.1
AA Large
4.0
AA Large
2.3
Fail
1.3
Fail
3.1
AA Large
—
White BG
1.5Fail
2.6Fail
7.7AAA
18.5AAA
6.0AA
Black BG
14.2AAA
8.0AAA
2.7Fail
1.1Fail
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E895
C4C351
69680D
1B1B09
4B4B97

Deuteranopia

ECF099
CCD654
717A0E
1E2108
484593

Tritanopia

FCA3A6
F65B5E
9B1112
2B0707
3A8A87

Achromatopsia

D3D3D3
9B9B9B
434343
111111
5E5E5E

Shades & Tints Shades & Tints

#FFCC83

Dark
Light

#FD7A44

Dark
Light

#A21E07

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcc83;
  --color-2: #fd7a44;
  --color-3: #a21e07;
  --color-4: #2d040a;
  --color-5: #3863a8;
}

SCSS

$color-1: #ffcc83;
$color-2: #fd7a44;
$color-3: #a21e07;
$color-4: #2d040a;
$color-5: #3863a8;

TAILWIND

colors: {
  'brand-1': '#ffcc83',
  'brand-2': '#fd7a44',
  'brand-3': '#a21e07',
  'brand-4': '#2d040a',
  'brand-5': '#3863a8',
}

RGB Array

[255, 204, 131], [253, 122, 68], [162, 30, 7], [45, 4, 10], [56, 99, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #FFCC83, #FD7A44, #A21E07, #2D040A, #3863A8 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: #ffcc83; --color-2: #fd7a44; --color-3: #a21e07; --color-4: #2d040a; --color-5: #3863a8. 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