← Back to Editor

#569387 · #342B2B · #6E5F71 · #C9C5C1 · #DCEBDF

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 MenuPosterData Visualization

Color Details Color Details

#569387

Mineral Blue · CadetBlue · Mint Ice

HEX
#569387
RGB
rgb(86, 147, 135)
HSL
hsl(168, 26%, 46%)
HSB
hsb(168, 41%, 58%)
CMYK
cmyk(41%, 0%, 8%, 42%)
Oklch
oklch(61.8% 0.066 180.0)

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

#342B2B

Crimson · DarkSlateGray · Dark Stone

HEX
#342B2B
RGB
rgb(52, 43, 43)
HSL
hsl(0, 9%, 19%)
HSB
hsb(0, 17%, 20%)
CMYK
cmyk(0%, 17%, 17%, 80%)
Oklch
oklch(29.9% 0.013 17.9)

Traditional「Crimson」· Paint「Dark Stone」· Creative Midnight Shadow

#6E5F71

Dark Plum · DimGray · Warm Gray

HEX
#6E5F71
RGB
rgb(110, 95, 113)
HSL
hsl(290, 9%, 41%)
HSB
hsb(290, 16%, 44%)
CMYK
cmyk(3%, 16%, 0%, 56%)
Oklch
oklch(50.6% 0.034 320.6)

Traditional「Dark Plum」· Paint「Warm Gray」· Creative Urban Concrete

#C9C5C1

Silver Gray · Silver · Pearl Gray

HEX
#C9C5C1
RGB
rgb(201, 197, 193)
HSL
hsl(30, 7%, 77%)
HSB
hsb(30, 4%, 79%)
CMYK
cmyk(0%, 2%, 4%, 21%)
Oklch
oklch(82.6% 0.007 67.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#DCEBDF

Celadon · Beige · Mint Green

HEX
#DCEBDF
RGB
rgb(220, 235, 223)
HSL
hsl(132, 27%, 89%)
HSB
hsb(132, 6%, 92%)
CMYK
cmyk(6%, 0%, 5%, 8%)
Oklch
oklch(92.6% 0.023 151.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

569387
945763

Analogous

579469
569387
578194

Triadic

569387
885794
948857

Split-Comp.

569387
945781
946957

Tetradic

569387
695794
945763
819457

Contrast Matrix WCAG 2.1 Contrast

569387
342B2B
6E5F71
C9C5C1
DCEBDF
—
3.9
AA Large
1.7
Fail
2.1
Fail
2.9
Fail
3.9
AA Large
—
2.3
Fail
8.0
AAA
11.1
AAA
1.7
Fail
2.3
Fail
—
3.5
AA Large
4.8
AA
2.1
Fail
8.0
AAA
3.5
AA Large
—
1.4
Fail
2.9
Fail
11.1
AAA
4.8
AA
1.4
Fail
—
White BG
3.5AA Large
13.8AAA
5.9AA
1.7Fail
1.2Fail
Black BG
5.9AA
1.5Fail
3.5AA Large
12.2AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

70718A
30302B
68676D
C7C7C2
E2E3E2

Deuteranopia

6D688B
31312B
686A6C
C8C8C2
E2E1E3

Tritanopia

598C8D
342B2B
6D6968
C9C3C3
DDE4E5

Achromatopsia

7F7F7F
2E2E2E
666666
C6C6C6
E5E5E5

Shades & Tints Shades & Tints

#569387

Dark
Light

#342B2B

Dark
Light

#6E5F71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #569387;
  --color-2: #342b2b;
  --color-3: #6e5f71;
  --color-4: #c9c5c1;
  --color-5: #dcebdf;
}

SCSS

$color-1: #569387;
$color-2: #342b2b;
$color-3: #6e5f71;
$color-4: #c9c5c1;
$color-5: #dcebdf;

TAILWIND

colors: {
  'brand-1': '#569387',
  'brand-2': '#342b2b',
  'brand-3': '#6e5f71',
  'brand-4': '#c9c5c1',
  'brand-5': '#dcebdf',
}

RGB Array

[86, 147, 135], [52, 43, 43], [110, 95, 113], [201, 197, 193], [220, 235, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #569387, #342B2B, #6E5F71, #C9C5C1, #DCEBDF is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #569387; --color-2: #342b2b; --color-3: #6e5f71; --color-4: #c9c5c1; --color-5: #dcebdf. 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. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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