← Back to Editor

#323A37 · #FFE7C2 · #F4E196 · #A8BC9D · #CC6C38

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

#323A37

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#323A37
RGB
rgb(50, 58, 55)
HSL
hsl(158, 7%, 21%)
HSB
hsb(158, 14%, 23%)
CMYK
cmyk(14%, 0%, 5%, 77%)
Oklch
oklch(34.0% 0.012 171.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#FFE7C2

Goose Yellow · Bisque · Peach Orange

HEX
#FFE7C2
RGB
rgb(255, 231, 194)
HSL
hsl(36, 100%, 88%)
HSB
hsb(36, 24%, 100%)
CMYK
cmyk(0%, 9%, 24%, 0%)
Oklch
oklch(93.8% 0.055 78.6)

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

#F4E196

Goose Yellow · Khaki · Lemon Cream

HEX
#F4E196
RGB
rgb(244, 225, 150)
HSL
hsl(48, 81%, 77%)
HSB
hsb(48, 39%, 96%)
CMYK
cmyk(0%, 8%, 39%, 4%)
Oklch
oklch(90.8% 0.097 95.6)

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

#A8BC9D

Celadon · DarkGray · Apple Green

HEX
#A8BC9D
RGB
rgb(168, 188, 157)
HSL
hsl(99, 19%, 68%)
HSB
hsb(99, 16%, 74%)
CMYK
cmyk(11%, 0%, 16%, 26%)
Oklch
oklch(77.1% 0.048 134.4)

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

#CC6C38

Tangerine · Chocolate · Warm Sun

HEX
#CC6C38
RGB
rgb(204, 108, 56)
HSL
hsl(21, 59%, 51%)
HSB
hsb(21, 73%, 80%)
CMYK
cmyk(0%, 47%, 73%, 20%)
Oklch
oklch(63.3% 0.138 47.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

323A37
393235

Analogous

323933
323A37
323839

Triadic

323A37
373239
393732

Split-Comp.

323A37
393238
393332

Tetradic

323A37
333239
393235
383932

Contrast Matrix WCAG 2.1 Contrast

323A37
FFE7C2
F4E196
A8BC9D
CC6C38
—
9.7
AAA
8.9
AAA
5.8
AA
3.2
AA Large
9.7
AAA
—
1.1
Fail
1.7
Fail
3.0
AA Large
8.9
AAA
1.1
Fail
—
1.6
Fail
2.8
Fail
5.8
AA
1.7
Fail
1.6
Fail
—
1.8
Fail
3.2
AA Large
3.0
AA Large
2.8
Fail
1.8
Fail
—
White BG
11.7AAA
1.2Fail
1.3Fail
2.0Fail
3.6AA Large
Black BG
1.8Fail
17.5AAA
16.1AAA
10.3AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353638
F5F4CB
ECECA8
B1B1A5
A2A245

Deuteranopia

353438
F6F8CD
EDEEAD
B0AEA6
A8AF48

Tritanopia

323838
FED2D4
F3B6BA
A9AAAC
C74F51

Achromatopsia

373737
EAEAEA
DEDEDE
B2B2B2
838383

Shades & Tints Shades & Tints

#323A37

Dark
Light

#FFE7C2

Dark
Light

#F4E196

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #323a37;
  --color-2: #ffe7c2;
  --color-3: #f4e196;
  --color-4: #a8bc9d;
  --color-5: #cc6c38;
}

SCSS

$color-1: #323a37;
$color-2: #ffe7c2;
$color-3: #f4e196;
$color-4: #a8bc9d;
$color-5: #cc6c38;

TAILWIND

colors: {
  'brand-1': '#323a37',
  'brand-2': '#ffe7c2',
  'brand-3': '#f4e196',
  'brand-4': '#a8bc9d',
  'brand-5': '#cc6c38',
}

RGB Array

[50, 58, 55], [255, 231, 194], [244, 225, 150], [168, 188, 157], [204, 108, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #323A37, #FFE7C2, #F4E196, #A8BC9D, #CC6C38 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #323a37; --color-2: #ffe7c2; --color-3: #f4e196; --color-4: #a8bc9d; --color-5: #cc6c38. 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 tech, SaaS, healthcare, eco industries. 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