← Back to Editor

#657061 · #CF7570 · #F2B480 · #F5CB9C · #FFEECD

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

#657061

Ink Gray · DimGray · Warm Gray

HEX
#657061
RGB
rgb(101, 112, 97)
HSL
hsl(104, 7%, 41%)
HSB
hsb(104, 13%, 44%)
CMYK
cmyk(10%, 0%, 13%, 56%)
Oklch
oklch(53.1% 0.027 137.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#CF7570

Peach Pink · LightCoral · Coral Red

HEX
#CF7570
RGB
rgb(207, 117, 112)
HSL
hsl(3, 50%, 63%)
HSB
hsb(3, 46%, 81%)
CMYK
cmyk(0%, 43%, 46%, 19%)
Oklch
oklch(66.1% 0.114 24.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F2B480

Apricot · BurlyWood · Warm Sun

HEX
#F2B480
RGB
rgb(242, 180, 128)
HSL
hsl(27, 81%, 73%)
HSB
hsb(27, 47%, 95%)
CMYK
cmyk(0%, 26%, 47%, 5%)
Oklch
oklch(81.6% 0.099 60.8)

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

#F5CB9C

Goose Yellow · Wheat · Peach Orange

HEX
#F5CB9C
RGB
rgb(245, 203, 156)
HSL
hsl(32, 82%, 79%)
HSB
hsb(32, 36%, 96%)
CMYK
cmyk(0%, 17%, 36%, 4%)
Oklch
oklch(86.7% 0.078 69.7)

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

#FFEECD

Goose Yellow · Bisque · Lemon Cream

HEX
#FFEECD
RGB
rgb(255, 238, 205)
HSL
hsl(40, 100%, 90%)
HSB
hsb(40, 20%, 100%)
CMYK
cmyk(0%, 7%, 20%, 0%)
Oklch
oklch(95.4% 0.047 83.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

657061
6C6170

Analogous

6C7061
657061
617065

Triadic

657061
616570
706165

Split-Comp.

657061
656170
70616C

Tetradic

657061
616C70
6C6170
706561

Contrast Matrix WCAG 2.1 Contrast

657061
CF7570
F2B480
F5CB9C
FFEECD
—
1.6
Fail
2.9
Fail
3.4
AA Large
4.5
AA
1.6
Fail
—
1.8
Fail
2.2
Fail
2.9
Fail
2.9
Fail
1.8
Fail
—
1.2
Fail
1.6
Fail
3.4
AA Large
2.2
Fail
1.2
Fail
—
1.3
Fail
4.5
AA
2.9
Fail
1.6
Fail
1.3
Fail
—
White BG
5.2AA
3.3AA Large
1.8Fail
1.5Fail
1.1Fail
Black BG
4.0AA Large
6.4AA
11.6AAA
13.9AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A65
A8A771
D7D78D
E3E2A7
F8F7D5

Deuteranopia

696866
ADB472
DBDF90
E5E8AA
F9FAD7

Tritanopia

666768
CA7272
EF9799
F3B0B2
FEDBDD

Achromatopsia

6B6B6B
8F8F8F
C1C1C1
D2D2D2
EFEFEF

Shades & Tints Shades & Tints

#657061

Dark
Light

#CF7570

Dark
Light

#F2B480

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #657061;
  --color-2: #cf7570;
  --color-3: #f2b480;
  --color-4: #f5cb9c;
  --color-5: #ffeecd;
}

SCSS

$color-1: #657061;
$color-2: #cf7570;
$color-3: #f2b480;
$color-4: #f5cb9c;
$color-5: #ffeecd;

TAILWIND

colors: {
  'brand-1': '#657061',
  'brand-2': '#cf7570',
  'brand-3': '#f2b480',
  'brand-4': '#f5cb9c',
  'brand-5': '#ffeecd',
}

RGB Array

[101, 112, 97], [207, 117, 112], [242, 180, 128], [245, 203, 156], [255, 238, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #657061, #CF7570, #F2B480, #F5CB9C, #FFEECD is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #657061; --color-2: #cf7570; --color-3: #f2b480; --color-4: #f5cb9c; --color-5: #ffeecd. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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