← Back to Editor

#568C82 · #F0F2A7 · #F2B279 · #F2785C · #F25244

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 MenuPoster

Color Details Color Details

#568C82

Mineral Blue · SlateGray · Mint Ice

HEX
#568C82
RGB
rgb(86, 140, 130)
HSL
hsl(169, 24%, 44%)
HSB
hsb(169, 39%, 55%)
CMYK
cmyk(39%, 0%, 7%, 45%)
Oklch
oklch(59.9% 0.060 181.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F0F2A7

Fresh Green · Wheat · Lemon Cream

HEX
#F0F2A7
RGB
rgb(240, 242, 167)
HSL
hsl(62, 74%, 80%)
HSB
hsb(62, 31%, 95%)
CMYK
cmyk(1%, 0%, 31%, 5%)
Oklch
oklch(94.2% 0.095 109.4)

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

#F2B279

Apricot · LightSalmon · Warm Sun

HEX
#F2B279
RGB
rgb(242, 178, 121)
HSL
hsl(28, 82%, 71%)
HSB
hsb(28, 50%, 95%)
CMYK
cmyk(0%, 26%, 50%, 5%)
Oklch
oklch(81.1% 0.105 62.2)

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

#F2785C

Peach Pink · Coral · Coral Red

HEX
#F2785C
RGB
rgb(242, 120, 92)
HSL
hsl(11, 85%, 65%)
HSB
hsb(11, 62%, 95%)
CMYK
cmyk(0%, 50%, 62%, 5%)
Oklch
oklch(70.9% 0.156 34.2)

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

#F25244

Peach Pink · Tomato · Coral Red

HEX
#F25244
RGB
rgb(242, 82, 68)
HSL
hsl(5, 87%, 61%)
HSB
hsb(5, 72%, 95%)
CMYK
cmyk(0%, 66%, 72%, 5%)
Oklch
oklch(65.6% 0.198 28.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

568C82
8B555F

Analogous

558B66
568C82
557A8B

Triadic

568C82
81558B
8B8155

Split-Comp.

568C82
8B557A
8B6655

Tetradic

568C82
66558B
8B555F
7A8B55

Contrast Matrix WCAG 2.1 Contrast

568C82
F0F2A7
F2B279
F2785C
F25244
—
3.3
AA Large
2.1
Fail
1.4
Fail
1.1
Fail
3.3
AA Large
—
1.6
Fail
2.4
Fail
3.0
Fail
2.1
Fail
1.6
Fail
—
1.5
Fail
1.9
Fail
1.4
Fail
2.4
Fail
1.5
Fail
—
1.3
Fail
1.1
Fail
3.0
Fail
1.9
Fail
1.3
Fail
—
White BG
3.8AA Large
1.2Fail
1.8Fail
2.8Fail
3.5AA Large
Black BG
5.5AA
18.0AAA
11.4AAA
7.6AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6E84
F1F1B9
D6D687
BDBC63
ADAB47

Deuteranopia

6A6685
F1F1BE
DADF8A
C4CD64
B6C248

Tritanopia

598687
F0C7CB
EF9294
EC6869
EA4A4B

Achromatopsia

7B7B7B
E9E9E9
BFBFBF
999999
808080

Shades & Tints Shades & Tints

#568C82

Dark
Light

#F0F2A7

Dark
Light

#F2B279

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #568c82;
  --color-2: #f0f2a7;
  --color-3: #f2b279;
  --color-4: #f2785c;
  --color-5: #f25244;
}

SCSS

$color-1: #568c82;
$color-2: #f0f2a7;
$color-3: #f2b279;
$color-4: #f2785c;
$color-5: #f25244;

TAILWIND

colors: {
  'brand-1': '#568c82',
  'brand-2': '#f0f2a7',
  'brand-3': '#f2b279',
  'brand-4': '#f2785c',
  'brand-5': '#f25244',
}

RGB Array

[86, 140, 130], [240, 242, 167], [242, 178, 121], [242, 120, 92], [242, 82, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #568C82, #F0F2A7, #F2B279, #F2785C, #F25244 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #568c82; --color-2: #f0f2a7; --color-3: #f2b279; --color-4: #f2785c; --color-5: #f25244. 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. 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