← Back to Editor

#643227 · #F97B3E · #FBBA66 · #FCE188 · #A2CCA6

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#643227

Crimson · DarkOliveGreen · Wine Red

HEX
#643227
RGB
rgb(100, 50, 39)
HSL
hsl(11, 44%, 27%)
HSB
hsb(11, 61%, 39%)
CMYK
cmyk(0%, 50%, 61%, 61%)
Oklch
oklch(38.0% 0.075 33.5)

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

#F97B3E

Apricot · Coral · Warm Sun

HEX
#F97B3E
RGB
rgb(249, 123, 62)
HSL
hsl(20, 94%, 61%)
HSB
hsb(20, 75%, 98%)
CMYK
cmyk(0%, 51%, 75%, 2%)
Oklch
oklch(71.9% 0.171 44.3)

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

#FBBA66

Ginger · SandyBrown · Warm Sun

HEX
#FBBA66
RGB
rgb(251, 186, 102)
HSL
hsl(34, 95%, 69%)
HSB
hsb(34, 59%, 98%)
CMYK
cmyk(0%, 26%, 59%, 2%)
Oklch
oklch(83.3% 0.126 71.6)

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

#FCE188

Goose Yellow · Khaki · Lemon Cream

HEX
#FCE188
RGB
rgb(252, 225, 136)
HSL
hsl(46, 95%, 76%)
HSB
hsb(46, 46%, 99%)
CMYK
cmyk(0%, 11%, 46%, 1%)
Oklch
oklch(91.3% 0.113 93.1)

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

#A2CCA6

Celadon · DarkSeaGreen · Apple Green

HEX
#A2CCA6
RGB
rgb(162, 204, 166)
HSL
hsl(126, 29%, 72%)
HSB
hsb(126, 21%, 80%)
CMYK
cmyk(21%, 0%, 19%, 20%)
Oklch
oklch(80.5% 0.069 147.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

643227
275863

Analogous

63273A
643227
635027

Triadic

643227
276332
322763

Split-Comp.

643227
276350
273A63

Tetradic

643227
3A6327
275863
502763

Contrast Matrix WCAG 2.1 Contrast

643227
F97B3E
FBBA66
FCE188
A2CCA6
—
3.9
AA Large
6.1
AA
8.0
AAA
5.8
AA
3.9
AA Large
—
1.6
Fail
2.1
Fail
1.5
Fail
6.1
AA
1.6
Fail
—
1.3
Fail
1.1
Fail
8.0
AAA
2.1
Fail
1.3
Fail
—
1.4
Fail
5.8
AA
1.5
Fail
1.1
Fail
1.4
Fail
—
White BG
10.4AAA
2.6Fail
1.7Fail
1.3Fail
1.8Fail
Black BG
2.0Fail
7.9AAA
12.3AAA
16.3AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E2A
C2C14D
DFDE7A
F0F09E
B4B5AF

Deuteranopia

51552A
CAD350
E3E87F
F2F4A3
B2AFB1

Tritanopia

622C2C
F3585B
F88A8E
FBAFB2
A4B6B8

Achromatopsia

404040
9A9A9A
C4C4C4
DFDFDF
BBBBBB

Shades & Tints Shades & Tints

#643227

Dark
Light

#F97B3E

Dark
Light

#FBBA66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #643227;
  --color-2: #f97b3e;
  --color-3: #fbba66;
  --color-4: #fce188;
  --color-5: #a2cca6;
}

SCSS

$color-1: #643227;
$color-2: #f97b3e;
$color-3: #fbba66;
$color-4: #fce188;
$color-5: #a2cca6;

TAILWIND

colors: {
  'brand-1': '#643227',
  'brand-2': '#f97b3e',
  'brand-3': '#fbba66',
  'brand-4': '#fce188',
  'brand-5': '#a2cca6',
}

RGB Array

[100, 50, 39], [249, 123, 62], [251, 186, 102], [252, 225, 136], [162, 204, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #643227, #F97B3E, #FBBA66, #FCE188, #A2CCA6 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: #643227; --color-2: #f97b3e; --color-3: #fbba66; --color-4: #fce188; --color-5: #a2cca6. 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