#F7F7F5 + #D59B97 + #ECC3BD + #FFD8CC + #B7A18A · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#F7F7F5

Fresh Green · Snow · Lemon Cream

HEX

#F7F7F5

RGB

rgb(247, 247, 245)

HSL

hsl(60, 11%, 96%)

HSB

hsb(60, 1%, 97%)

CMYK

cmyk(0%, 0%, 1%, 3%)

Oklch

oklch(97.6% 0.003 106.4)

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

#D59B97

Peach Pink · Tan · Coral Red

HEX

#D59B97

RGB

rgb(213, 155, 151)

HSL

hsl(4, 42%, 71%)

HSB

hsb(4, 29%, 84%)

CMYK

cmyk(0%, 27%, 29%, 16%)

Oklch

oklch(74.4% 0.070 23.3)

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

#ECC3BD

Peach Pink · LightPink · Cherry Blossom

HEX

#ECC3BD

RGB

rgb(236, 195, 189)

HSL

hsl(8, 55%, 83%)

HSB

hsb(8, 20%, 93%)

CMYK

cmyk(0%, 17%, 20%, 7%)

Oklch

oklch(85.1% 0.048 27.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFD8CC

Peach Pink · Bisque · Cherry Blossom

HEX

#FFD8CC

RGB

rgb(255, 216, 204)

HSL

hsl(14, 100%, 90%)

HSB

hsb(14, 20%, 100%)

CMYK

cmyk(0%, 15%, 20%, 0%)

Oklch

oklch(91.2% 0.047 37.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#B7A18A

Ginger · Tan · Warm Sun

HEX

#B7A18A

RGB

rgb(183, 161, 138)

HSL

hsl(31, 24%, 63%)

HSB

hsb(31, 25%, 72%)

CMYK

cmyk(0%, 12%, 25%, 28%)

Oklch

oklch(72.2% 0.041 68.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F7F5

F4F4F6

Analogous

F6F5F4

F7F7F5

F5F6F4

Triadic

F7F7F5

F4F6F6

F6F4F6

Split-Comp.

F7F7F5

F4F5F6

F5F4F6

Tetradic

F7F7F5

F4F6F5

F4F4F6

F6F4F5

Contrast Matrix WCAG 2.1 Contrast

F7F7F5	D59B97	ECC3BD	FFD8CC	B7A18A
—	2.2 Fail	1.5 Fail	1.2 Fail	2.3 Fail
2.2 Fail	—	1.5 Fail	1.8 Fail	1.1 Fail
1.5 Fail	1.5 Fail	—	1.2 Fail	1.5 Fail
1.2 Fail	1.8 Fail	1.2 Fail	—	1.9 Fail
2.3 Fail	1.1 Fail	1.5 Fail	1.9 Fail	—

White BG

1.1Fail

2.3Fail

1.6Fail

1.3Fail

2.5Fail

Black BG

19.6AAA

9.0AAA

13.1AAA

15.9AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7F5

BCBB98

DADABE

EEEECF

ADAD90

Deuteranopia

F7F7F6

BFC498

DDE0BF

F0F3D0

AFB091

Tritanopia

F7F6F6

D29999

EAC0C0

FDD1D2

B69495

Achromatopsia

F7F7F7

ACACAC

CFCFCF

E2E2E2

A5A5A5

Shades & Tints Shades & Tints

#F7F7F5

Dark

Light

#D59B97

Dark

Light

#ECC3BD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f7f5;
  --color-2: #d59b97;
  --color-3: #ecc3bd;
  --color-4: #ffd8cc;
  --color-5: #b7a18a;
}

SCSS

$color-1: #f7f7f5;
$color-2: #d59b97;
$color-3: #ecc3bd;
$color-4: #ffd8cc;
$color-5: #b7a18a;

TAILWIND

colors: {
  'brand-1': '#f7f7f5',
  'brand-2': '#d59b97',
  'brand-3': '#ecc3bd',
  'brand-4': '#ffd8cc',
  'brand-5': '#b7a18a',
}

RGB Array

[247, 247, 245], [213, 155, 151], [236, 195, 189], [255, 216, 204], [183, 161, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #F7F7F5, #D59B97, #ECC3BD, #FFD8CC, #B7A18A is ideal for: health products, baby brands, fresh-style blogs. 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: #f7f7f5; --color-2: #d59b97; --color-3: #ecc3bd; --color-4: #ffd8cc; --color-5: #b7a18a. 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. 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