← Back to Editor

#F699A1 · #BA3850 · #FFF8C4 · #9DD1A3 · #7BBE9B

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

#F699A1

Peach Pink · LightSalmon · Coral Red

HEX
#F699A1
RGB
rgb(246, 153, 161)
HSL
hsl(355, 84%, 78%)
HSB
hsb(355, 38%, 96%)
CMYK
cmyk(0%, 38%, 35%, 4%)
Oklch
oklch(78.0% 0.112 14.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#BA3850

Crimson · Brown · Passion Red

HEX
#BA3850
RGB
rgb(186, 56, 80)
HSL
hsl(349, 54%, 47%)
HSB
hsb(349, 70%, 73%)
CMYK
cmyk(0%, 70%, 57%, 27%)
Oklch
oklch(53.8% 0.166 14.1)

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

#FFF8C4

Fresh Green · Bisque · Lemon Cream

HEX
#FFF8C4
RGB
rgb(255, 248, 196)
HSL
hsl(53, 100%, 88%)
HSB
hsb(53, 23%, 100%)
CMYK
cmyk(0%, 3%, 23%, 0%)
Oklch
oklch(97.2% 0.067 101.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#9DD1A3

Celadon · DarkSeaGreen · Apple Green

HEX
#9DD1A3
RGB
rgb(157, 209, 163)
HSL
hsl(127, 36%, 72%)
HSB
hsb(127, 25%, 82%)
CMYK
cmyk(25%, 0%, 22%, 18%)
Oklch
oklch(81.2% 0.084 147.8)

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

#7BBE9B

Celadon · DarkSeaGreen · Apple Green

HEX
#7BBE9B
RGB
rgb(123, 190, 155)
HSL
hsl(149, 34%, 61%)
HSB
hsb(149, 35%, 75%)
CMYK
cmyk(35%, 0%, 18%, 25%)
Oklch
oklch(74.7% 0.085 160.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F699A1
98F6EE

Analogous

F698CF
F699A1
F6BF98

Triadic

F699A1
A0F698
98A0F6

Split-Comp.

F699A1
98F6BF
98CFF6

Tetradic

F699A1
CFF698
98F6EE
BF98F6

Contrast Matrix WCAG 2.1 Contrast

F699A1
BA3850
FFF8C4
9DD1A3
7BBE9B
—
2.7
Fail
1.9
Fail
1.2
Fail
1.0
Fail
2.7
Fail
—
5.2
AA
3.2
AA Large
2.6
Fail
1.9
Fail
5.2
AA
—
1.6
Fail
2.0
Fail
1.2
Fail
3.2
AA Large
1.6
Fail
—
1.2
Fail
1.0
Fail
2.6
Fail
2.0
Fail
1.2
Fail
—
White BG
2.1Fail
5.6AA
1.1Fail
1.7Fail
2.2Fail
Black BG
10.0AAA
3.8AA Large
19.5AAA
12.1AAA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECD9F
82814A
FCFCD1
B4B4AE
9899A3

Deuteranopia

D3DA9F
899349
FCFDD4
B1ADB1
948FA6

Tritanopia

F19E9D
B44645
FFDBDD
A0B7B9
7EAAAC

Achromatopsia

B6B6B6
626262
F4F4F4
BCBCBC
A6A6A6

Shades & Tints Shades & Tints

#F699A1

Dark
Light

#BA3850

Dark
Light

#FFF8C4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f699a1;
  --color-2: #ba3850;
  --color-3: #fff8c4;
  --color-4: #9dd1a3;
  --color-5: #7bbe9b;
}

SCSS

$color-1: #f699a1;
$color-2: #ba3850;
$color-3: #fff8c4;
$color-4: #9dd1a3;
$color-5: #7bbe9b;

TAILWIND

colors: {
  'brand-1': '#f699a1',
  'brand-2': '#ba3850',
  'brand-3': '#fff8c4',
  'brand-4': '#9dd1a3',
  'brand-5': '#7bbe9b',
}

RGB Array

[246, 153, 161], [186, 56, 80], [255, 248, 196], [157, 209, 163], [123, 190, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F699A1, #BA3850, #FFF8C4, #9DD1A3, #7BBE9B 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: #f699a1; --color-2: #ba3850; --color-3: #fff8c4; --color-4: #9dd1a3; --color-5: #7bbe9b. 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