#69706C + #F475B4 + #D7A0C8 + #C0C1CF + #B0D9C8 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#69706C

Ink Gray · DimGray · Warm Gray

HEX

#69706C

RGB

rgb(105, 112, 108)

HSL

hsl(146, 3%, 43%)

HSB

hsb(146, 6%, 44%)

CMYK

cmyk(6%, 0%, 4%, 56%)

Oklch

oklch(53.8% 0.010 161.1)

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

#F475B4

Rouge · Orchid · Rose Pink

HEX

#F475B4

RGB

rgb(244, 117, 180)

HSL

hsl(330, 85%, 71%)

HSB

hsb(330, 52%, 96%)

CMYK

cmyk(0%, 52%, 26%, 4%)

Oklch

oklch(72.9% 0.170 351.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#D7A0C8

Mauve · Silver · Lilac Purple

HEX

#D7A0C8

RGB

rgb(215, 160, 200)

HSL

hsl(316, 41%, 74%)

HSB

hsb(316, 26%, 84%)

CMYK

cmyk(0%, 26%, 7%, 16%)

Oklch

oklch(77.0% 0.084 336.6)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#C0C1CF

Azure · Silver · Cobalt Blue

HEX

#C0C1CF

RGB

rgb(192, 193, 207)

HSL

hsl(236, 14%, 78%)

HSB

hsb(236, 7%, 81%)

CMYK

cmyk(7%, 7%, 0%, 19%)

Oklch

oklch(81.4% 0.020 282.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#B0D9C8

Jade · LightBlue · Apple Green

HEX

#B0D9C8

RGB

rgb(176, 217, 200)

HSL

hsl(155, 35%, 77%)

HSB

hsb(155, 19%, 85%)

CMYK

cmyk(19%, 0%, 8%, 15%)

Oklch

oklch(85.1% 0.049 168.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69706C

716A6E

Analogous

6B716A

69706C

6A7171

Triadic

69706C

6D6A71

716D6A

Split-Comp.

69706C

716A71

716A6B

Tetradic

69706C

6A6B71

716A6E

71716A

Contrast Matrix WCAG 2.1 Contrast

69706C	F475B4	D7A0C8	C0C1CF	B0D9C8
—	1.9 Fail	2.4 Fail	2.8 Fail	3.3 AA Large
1.9 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
2.4 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
2.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
3.3 AA Large	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

5.1AA

2.6Fail

2.2Fail

1.8Fail

1.5Fail

Black BG

4.1AA Large

8.1AAA

9.8AAA

11.8AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C6D

BDBCA5

BFBFBE

C0C0CC

C2C2CC

Deuteranopia

6C6B6D

C4CEA1

C2C7BC

C0C0CB

BFBCCD

Tritanopia

696E6E

EE9996

D4B7B5

C0C9C8

B2CFD0

Achromatopsia

6D6D6D

A2A2A2

B5B5B5

C2C2C2

CBCBCB

Shades & Tints Shades & Tints

#69706C

Dark

Light

#F475B4

Dark

Light

#D7A0C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69706c;
  --color-2: #f475b4;
  --color-3: #d7a0c8;
  --color-4: #c0c1cf;
  --color-5: #b0d9c8;
}

SCSS

$color-1: #69706c;
$color-2: #f475b4;
$color-3: #d7a0c8;
$color-4: #c0c1cf;
$color-5: #b0d9c8;

TAILWIND

colors: {
  'brand-1': '#69706c',
  'brand-2': '#f475b4',
  'brand-3': '#d7a0c8',
  'brand-4': '#c0c1cf',
  'brand-5': '#b0d9c8',
}

RGB Array

[105, 112, 108], [244, 117, 180], [215, 160, 200], [192, 193, 207], [176, 217, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #69706C, #F475B4, #D7A0C8, #C0C1CF, #B0D9C8 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: #69706c; --color-2: #f475b4; --color-3: #d7a0c8; --color-4: #c0c1cf; --color-5: #b0d9c8. 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