← Back to Editor

#AFE2D0 · #97B2B5 · #948DB0 · #70635C · #584C46

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

#AFE2D0

Jade · LightBlue · Apple Green

HEX
#AFE2D0
RGB
rgb(175, 226, 208)
HSL
hsl(159, 47%, 79%)
HSB
hsb(159, 23%, 89%)
CMYK
cmyk(23%, 0%, 8%, 11%)
Oklch
oklch(87.2% 0.058 171.3)

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

#97B2B5

Sky Blue · DarkGray · Lake Green

HEX
#97B2B5
RGB
rgb(151, 178, 181)
HSL
hsl(186, 17%, 65%)
HSB
hsb(186, 17%, 71%)
CMYK
cmyk(17%, 2%, 0%, 29%)
Oklch
oklch(74.4% 0.030 204.7)

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

#948DB0

Wisteria · DarkGray · Cobalt Blue

HEX
#948DB0
RGB
rgb(148, 141, 176)
HSL
hsl(252, 18%, 62%)
HSB
hsb(252, 20%, 69%)
CMYK
cmyk(16%, 20%, 0%, 31%)
Oklch
oklch(66.2% 0.052 294.1)

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

#70635C

Tangerine · DimGray · Amber Brown

HEX
#70635C
RGB
rgb(112, 99, 92)
HSL
hsl(21, 10%, 40%)
HSB
hsb(21, 18%, 44%)
CMYK
cmyk(0%, 12%, 18%, 56%)
Oklch
oklch(51.0% 0.020 50.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#584C46

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584C46
RGB
rgb(88, 76, 70)
HSL
hsl(20, 11%, 31%)
HSB
hsb(20, 20%, 35%)
CMYK
cmyk(0%, 14%, 20%, 65%)
Oklch
oklch(42.7% 0.019 48.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFE2D0
E3B0C2

Analogous

B0E3B8
AFE2D0
B0DBE3

Triadic

AFE2D0
D1B0E3
E3D1B0

Split-Comp.

AFE2D0
E3B0DB
E3B8B0

Tetradic

AFE2D0
B8B0E3
E3B0C2
DBE3B0

Contrast Matrix WCAG 2.1 Contrast

AFE2D0
97B2B5
948DB0
70635C
584C46
—
1.6
Fail
2.2
Fail
4.0
AA Large
5.8
AA
1.6
Fail
—
1.4
Fail
2.6
Fail
3.7
AA Large
2.2
Fail
1.4
Fail
—
1.8
Fail
2.6
Fail
4.0
AA Large
2.6
Fail
1.8
Fail
—
1.4
Fail
5.8
AA
3.7
AA Large
2.6
Fail
1.4
Fail
—
White BG
1.4Fail
2.2Fail
3.1AA Large
5.8AA
8.3AAA
Black BG
14.6AAA
9.4AAA
6.7AA
3.6AA Large
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6D4
A3A3B4
9191A8
6A6A5E
535347

Deuteranopia

C2BED5
A19FB4
9192A6
6B6C5E
545448

Tritanopia

B2D8D9
98B4B4
94A19F
6F5F5F
574949

Achromatopsia

D1D1D1
AAAAAA
939393
666666
4F4F4F

Shades & Tints Shades & Tints

#AFE2D0

Dark
Light

#97B2B5

Dark
Light

#948DB0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afe2d0;
  --color-2: #97b2b5;
  --color-3: #948db0;
  --color-4: #70635c;
  --color-5: #584c46;
}

SCSS

$color-1: #afe2d0;
$color-2: #97b2b5;
$color-3: #948db0;
$color-4: #70635c;
$color-5: #584c46;

TAILWIND

colors: {
  'brand-1': '#afe2d0',
  'brand-2': '#97b2b5',
  'brand-3': '#948db0',
  'brand-4': '#70635c',
  'brand-5': '#584c46',
}

RGB Array

[175, 226, 208], [151, 178, 181], [148, 141, 176], [112, 99, 92], [88, 76, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #AFE2D0, #97B2B5, #948DB0, #70635C, #584C46 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: #afe2d0; --color-2: #97b2b5; --color-3: #948db0; --color-4: #70635c; --color-5: #584c46. 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