← Back to Editor

#334180 · #7980A0 · #BEBBD7 · #C2D2DC · #E3F8A4

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

#334180

Indigo · DarkSlateBlue · Prussian Blue

HEX
#334180
RGB
rgb(51, 65, 128)
HSL
hsl(229, 43%, 35%)
HSB
hsb(229, 60%, 50%)
CMYK
cmyk(60%, 49%, 0%, 50%)
Oklch
oklch(39.8% 0.107 271.4)

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

#7980A0

Azure · LightSlateGray · Navy Blue

HEX
#7980A0
RGB
rgb(121, 128, 160)
HSL
hsl(229, 17%, 55%)
HSB
hsb(229, 24%, 63%)
CMYK
cmyk(24%, 20%, 0%, 37%)
Oklch
oklch(60.6% 0.049 275.2)

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

#BEBBD7

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#BEBBD7
RGB
rgb(190, 187, 215)
HSL
hsl(246, 26%, 79%)
HSB
hsb(246, 13%, 84%)
CMYK
cmyk(12%, 13%, 0%, 16%)
Oklch
oklch(80.3% 0.039 290.4)

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

#C2D2DC

Sky Blue · LightGray · Sky Blue

HEX
#C2D2DC
RGB
rgb(194, 210, 220)
HSL
hsl(203, 27%, 81%)
HSB
hsb(203, 12%, 86%)
CMYK
cmyk(12%, 5%, 0%, 14%)
Oklch
oklch(85.5% 0.022 235.0)

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

#E3F8A4

Willow Green · Khaki · Mint Green

HEX
#E3F8A4
RGB
rgb(227, 248, 164)
HSL
hsl(75, 86%, 81%)
HSB
hsb(75, 34%, 97%)
CMYK
cmyk(8%, 0%, 34%, 3%)
Oklch
oklch(94.4% 0.109 120.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

334180
807233

Analogous

336780
334180
4B3380

Triadic

334180
803341
418033

Split-Comp.

334180
804B33
678033

Tetradic

334180
803367
807233
33804B

Contrast Matrix WCAG 2.1 Contrast

334180
7980A0
BEBBD7
C2D2DC
E3F8A4
—
2.4
Fail
5.1
AA
6.1
AA
8.3
AAA
2.4
Fail
—
2.1
Fail
2.5
Fail
3.4
AA Large
5.1
AA
2.1
Fail
—
1.2
Fail
1.6
Fail
6.1
AA
2.5
Fail
1.2
Fail
—
1.3
Fail
8.3
AAA
3.4
AA Large
1.6
Fail
1.3
Fail
—
White BG
9.5AAA
3.9AA Large
1.9Fail
1.6Fail
1.2Fail
Black BG
2.2Fail
5.4AA
11.3AAA
13.5AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393971
7C7C98
BDBDD0
C9C9DA
ECECB8

Deuteranopia

38376D
7C7B96
BDBDCF
C8C7D9
EBE9BD

Tritanopia

346562
799291
BECBCA
C3D8D7
E4C8CC

Achromatopsia

444444
828282
BFBFBF
CECECE
E8E8E8

Shades & Tints Shades & Tints

#334180

Dark
Light

#7980A0

Dark
Light

#BEBBD7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #334180;
  --color-2: #7980a0;
  --color-3: #bebbd7;
  --color-4: #c2d2dc;
  --color-5: #e3f8a4;
}

SCSS

$color-1: #334180;
$color-2: #7980a0;
$color-3: #bebbd7;
$color-4: #c2d2dc;
$color-5: #e3f8a4;

TAILWIND

colors: {
  'brand-1': '#334180',
  'brand-2': '#7980a0',
  'brand-3': '#bebbd7',
  'brand-4': '#c2d2dc',
  'brand-5': '#e3f8a4',
}

RGB Array

[51, 65, 128], [121, 128, 160], [190, 187, 215], [194, 210, 220], [227, 248, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #334180, #7980A0, #BEBBD7, #C2D2DC, #E3F8A4 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: #334180; --color-2: #7980a0; --color-3: #bebbd7; --color-4: #c2d2dc; --color-5: #e3f8a4. 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