← Back to Editor

#566B56 · #708B80 · #8FA9B0 · #A9B3CC · #E0D4FF

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#566B56

Celadon · DimGray · Forest Green

HEX
#566B56
RGB
rgb(86, 107, 86)
HSL
hsl(120, 11%, 38%)
HSB
hsb(120, 20%, 42%)
CMYK
cmyk(20%, 0%, 20%, 58%)
Oklch
oklch(50.4% 0.041 144.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#708B80

Mineral Blue · Gray · Olive Green

HEX
#708B80
RGB
rgb(112, 139, 128)
HSL
hsl(156, 11%, 49%)
HSB
hsb(156, 19%, 55%)
CMYK
cmyk(19%, 0%, 8%, 45%)
Oklch
oklch(61.2% 0.035 168.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#8FA9B0

Sky Blue · DarkGray · Lake Green

HEX
#8FA9B0
RGB
rgb(143, 169, 176)
HSL
hsl(193, 17%, 63%)
HSB
hsb(193, 19%, 69%)
CMYK
cmyk(19%, 4%, 0%, 31%)
Oklch
oklch(71.7% 0.031 215.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#A9B3CC

Azure · LightSteelBlue · Cobalt Blue

HEX
#A9B3CC
RGB
rgb(169, 179, 204)
HSL
hsl(223, 26%, 73%)
HSB
hsb(223, 17%, 80%)
CMYK
cmyk(17%, 12%, 0%, 20%)
Oklch
oklch(76.7% 0.037 268.2)

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

#E0D4FF

Wisteria · Lavender · Sky Blue

HEX
#E0D4FF
RGB
rgb(224, 212, 255)
HSL
hsl(257, 100%, 92%)
HSB
hsb(257, 17%, 100%)
CMYK
cmyk(12%, 17%, 0%, 0%)
Oklch
oklch(89.3% 0.060 298.0)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

566B56
6C566C

Analogous

616C56
566B56
566C61

Triadic

566B56
56566C
6C5656

Split-Comp.

566B56
61566C
6C5661

Tetradic

566B56
56616C
6C566C
6C6156

Contrast Matrix WCAG 2.1 Contrast

566B56
708B80
8FA9B0
A9B3CC
E0D4FF
—
1.6
Fail
2.3
Fail
2.8
Fail
4.1
AA Large
1.6
Fail
—
1.5
Fail
1.8
Fail
2.6
Fail
2.3
Fail
1.5
Fail
—
1.2
Fail
1.8
Fail
2.8
Fail
1.8
Fail
1.2
Fail
—
1.5
Fail
4.1
AA Large
2.6
Fail
1.8
Fail
1.5
Fail
—
White BG
5.8AA
3.7AA Large
2.5Fail
2.1Fail
1.4Fail
Black BG
3.6AA Large
5.7AA
8.5AAA
10.0AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F5B
7C7C83
9A9AAE
ADADC6
DBDBF5

Deuteranopia

5E5C5C
7A7883
9997AE
ADACC4
DCDCF2

Tritanopia

575F60
718585
90ADAD
A9C1C0
DFECEB

Achromatopsia

626262
828282
A2A2A2
B3B3B3
DCDCDC

Shades & Tints Shades & Tints

#566B56

Dark
Light

#708B80

Dark
Light

#8FA9B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #566b56;
  --color-2: #708b80;
  --color-3: #8fa9b0;
  --color-4: #a9b3cc;
  --color-5: #e0d4ff;
}

SCSS

$color-1: #566b56;
$color-2: #708b80;
$color-3: #8fa9b0;
$color-4: #a9b3cc;
$color-5: #e0d4ff;

TAILWIND

colors: {
  'brand-1': '#566b56',
  'brand-2': '#708b80',
  'brand-3': '#8fa9b0',
  'brand-4': '#a9b3cc',
  'brand-5': '#e0d4ff',
}

RGB Array

[86, 107, 86], [112, 139, 128], [143, 169, 176], [169, 179, 204], [224, 212, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #566B56, #708B80, #8FA9B0, #A9B3CC, #E0D4FF is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #566b56; --color-2: #708b80; --color-3: #8fa9b0; --color-4: #a9b3cc; --color-5: #e0d4ff. 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. 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