← Back to Editor

#46487A · #7B7DB3 · #ABADDE · #AECFE6 · #D7DBDE

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

#46487A

Indigo · DarkSlateBlue · Prussian Blue

HEX
#46487A
RGB
rgb(70, 72, 122)
HSL
hsl(238, 27%, 38%)
HSB
hsb(238, 43%, 48%)
CMYK
cmyk(43%, 41%, 0%, 52%)
Oklch
oklch(42.4% 0.082 280.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#7B7DB3

Azure · LightSlateGray · Navy Blue

HEX
#7B7DB3
RGB
rgb(123, 125, 179)
HSL
hsl(238, 27%, 59%)
HSB
hsb(238, 31%, 70%)
CMYK
cmyk(31%, 30%, 0%, 30%)
Oklch
oklch(60.9% 0.082 282.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#ABADDE

Azure · LightSteelBlue · Cobalt Blue

HEX
#ABADDE
RGB
rgb(171, 173, 222)
HSL
hsl(238, 44%, 77%)
HSB
hsb(238, 23%, 87%)
CMYK
cmyk(23%, 22%, 0%, 13%)
Oklch
oklch(76.3% 0.070 282.8)

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

#AECFE6

Sky Blue · LightBlue · Cobalt Blue

HEX
#AECFE6
RGB
rgb(174, 207, 230)
HSL
hsl(205, 53%, 79%)
HSB
hsb(205, 24%, 90%)
CMYK
cmyk(24%, 10%, 0%, 10%)
Oklch
oklch(83.8% 0.048 238.6)

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

#D7DBDE

Sky Blue · LightGray · Sky Blue

HEX
#D7DBDE
RGB
rgb(215, 219, 222)
HSL
hsl(206, 10%, 86%)
HSB
hsb(206, 3%, 87%)
CMYK
cmyk(3%, 1%, 0%, 13%)
Oklch
oklch(88.9% 0.006 239.8)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

46487A
7B7947

Analogous

47637B
46487A
5F477B

Triadic

46487A
7B4748
487B47

Split-Comp.

46487A
7B5F47
637B47

Tetradic

46487A
7B4763
7B7947
477B5F

Contrast Matrix WCAG 2.1 Contrast

46487A
7B7DB3
ABADDE
AECFE6
D7DBDE
—
2.2
Fail
4.0
AA Large
5.2
AA
6.1
AA
2.2
Fail
—
1.8
Fail
2.4
Fail
2.8
Fail
4.0
AA Large
1.8
Fail
—
1.3
Fail
1.5
Fail
5.2
AA
2.4
Fail
1.3
Fail
—
1.2
Fail
6.1
AA
2.8
Fail
1.5
Fail
1.2
Fail
—
White BG
8.5AAA
3.9AA Large
2.2Fail
1.6Fail
1.4Fail
Black BG
2.5Fail
5.4AA
9.8AAA
12.9AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47476E
7C7CA6
ACACD2
BCBDE0
D9D9DD

Deuteranopia

47476B
7C7CA3
ACACCF
BAB8DF
D9D8DD

Tritanopia

466462
7B9C99
ABC9C7
B0DCDB
D7DDDD

Achromatopsia

4D4D4D
838383
B2B2B2
C8C8C8
DADADA

Shades & Tints Shades & Tints

#46487A

Dark
Light

#7B7DB3

Dark
Light

#ABADDE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #46487a;
  --color-2: #7b7db3;
  --color-3: #abadde;
  --color-4: #aecfe6;
  --color-5: #d7dbde;
}

SCSS

$color-1: #46487a;
$color-2: #7b7db3;
$color-3: #abadde;
$color-4: #aecfe6;
$color-5: #d7dbde;

TAILWIND

colors: {
  'brand-1': '#46487a',
  'brand-2': '#7b7db3',
  'brand-3': '#abadde',
  'brand-4': '#aecfe6',
  'brand-5': '#d7dbde',
}

RGB Array

[70, 72, 122], [123, 125, 179], [171, 173, 222], [174, 207, 230], [215, 219, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #46487A, #7B7DB3, #ABADDE, #AECFE6, #D7DBDE is ideal for: health products, baby brands, fresh-style blogs, 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: #46487a; --color-2: #7b7db3; --color-3: #abadde; --color-4: #aecfe6; --color-5: #d7dbde. 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. 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