← Back to Editor

#8AB9A7 · #F1E4D5 · #F7BF48 · #C62A14 · #4C3A22

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

#8AB9A7

Jade · DarkSeaGreen · Apple Green

HEX
#8AB9A7
RGB
rgb(138, 185, 167)
HSL
hsl(157, 25%, 63%)
HSB
hsb(157, 25%, 73%)
CMYK
cmyk(25%, 0%, 10%, 27%)
Oklch
oklch(74.7% 0.056 169.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#F1E4D5

Goose Yellow · Beige · Peach Orange

HEX
#F1E4D5
RGB
rgb(241, 228, 213)
HSL
hsl(32, 50%, 89%)
HSB
hsb(32, 12%, 95%)
CMYK
cmyk(0%, 5%, 12%, 5%)
Oklch
oklch(92.5% 0.025 71.5)

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

#F7BF48

Ginger · SandyBrown · Sunflower

HEX
#F7BF48
RGB
rgb(247, 191, 72)
HSL
hsl(41, 92%, 63%)
HSB
hsb(41, 71%, 97%)
CMYK
cmyk(0%, 23%, 71%, 3%)
Oklch
oklch(83.5% 0.146 82.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C62A14

Vermilion · FireBrick · Passion Red

HEX
#C62A14
RGB
rgb(198, 42, 20)
HSL
hsl(7, 82%, 43%)
HSB
hsb(7, 90%, 78%)
CMYK
cmyk(0%, 79%, 90%, 22%)
Oklch
oklch(53.8% 0.195 31.3)

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

#4C3A22

Ochre · DarkOliveGreen · Cinnamon

HEX
#4C3A22
RGB
rgb(76, 58, 34)
HSL
hsl(34, 38%, 22%)
HSB
hsb(34, 55%, 30%)
CMYK
cmyk(0%, 24%, 55%, 70%)
Oklch
oklch(36.2% 0.045 73.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8AB9A7
B8899B

Analogous

89B88F
8AB9A7
89B3B8

Triadic

8AB9A7
A689B8
B8A689

Split-Comp.

8AB9A7
B889B3
B88F89

Tetradic

8AB9A7
8F89B8
B8899B
B3B889

Contrast Matrix WCAG 2.1 Contrast

8AB9A7
F1E4D5
F7BF48
C62A14
4C3A22
—
1.8
Fail
1.3
Fail
2.6
Fail
4.9
AA
1.8
Fail
—
1.3
Fail
4.5
AA Large
8.7
AAA
1.3
Fail
1.3
Fail
—
3.3
AA Large
6.5
AA
2.6
Fail
4.5
AA Large
3.3
AA Large
—
1.9
Fail
4.9
AA
8.7
AAA
6.5
AA
1.9
Fail
—
White BG
2.2Fail
1.3Fail
1.7Fail
5.6AA
10.8AAA
Black BG
9.6AAA
16.8AAA
12.5AAA
3.7AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9FAB
EBEBD9
DFDE65
828119
444428

Deuteranopia

9C98AC
ECEDDA
E2E66C
8C971B
454729

Tritanopia

8CAFB0
F0DBDC
F47C81
BE1E1E
4B2C2D

Achromatopsia

A9A9A9
E6E6E6
C2C2C2
565656
3D3D3D

Shades & Tints Shades & Tints

#8AB9A7

Dark
Light

#F1E4D5

Dark
Light

#F7BF48

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ab9a7;
  --color-2: #f1e4d5;
  --color-3: #f7bf48;
  --color-4: #c62a14;
  --color-5: #4c3a22;
}

SCSS

$color-1: #8ab9a7;
$color-2: #f1e4d5;
$color-3: #f7bf48;
$color-4: #c62a14;
$color-5: #4c3a22;

TAILWIND

colors: {
  'brand-1': '#8ab9a7',
  'brand-2': '#f1e4d5',
  'brand-3': '#f7bf48',
  'brand-4': '#c62a14',
  'brand-5': '#4c3a22',
}

RGB Array

[138, 185, 167], [241, 228, 213], [247, 191, 72], [198, 42, 20], [76, 58, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #8AB9A7, #F1E4D5, #F7BF48, #C62A14, #4C3A22 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: #8ab9a7; --color-2: #f1e4d5; --color-3: #f7bf48; --color-4: #c62a14; --color-5: #4c3a22. 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