← Back to Editor

#314963 · #B0E0E9 · #8FC8F1 · #51A0CE · #267DAD

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

#314963

Indigo · DarkSlateGray · Prussian Blue

HEX
#314963
RGB
rgb(49, 73, 99)
HSL
hsl(211, 34%, 29%)
HSB
hsb(211, 51%, 39%)
CMYK
cmyk(51%, 26%, 0%, 61%)
Oklch
oklch(39.8% 0.053 251.2)

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

#B0E0E9

Sky Blue · LightBlue · Glacier Blue

HEX
#B0E0E9
RGB
rgb(176, 224, 233)
HSL
hsl(189, 56%, 80%)
HSB
hsb(189, 24%, 91%)
CMYK
cmyk(24%, 4%, 0%, 9%)
Oklch
oklch(87.6% 0.051 210.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#8FC8F1

Sky Blue · SkyBlue · Cobalt Blue

HEX
#8FC8F1
RGB
rgb(143, 200, 241)
HSL
hsl(205, 78%, 75%)
HSB
hsb(205, 41%, 95%)
CMYK
cmyk(41%, 17%, 0%, 5%)
Oklch
oklch(80.8% 0.083 240.3)

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

#51A0CE

Lake Blue · CornflowerBlue · Navy Blue

HEX
#51A0CE
RGB
rgb(81, 160, 206)
HSL
hsl(202, 56%, 56%)
HSB
hsb(202, 61%, 81%)
CMYK
cmyk(61%, 22%, 0%, 19%)
Oklch
oklch(67.5% 0.103 236.6)

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

#267DAD

Lake Blue · SteelBlue · Navy Blue

HEX
#267DAD
RGB
rgb(38, 125, 173)
HSL
hsl(201, 64%, 41%)
HSB
hsb(201, 78%, 68%)
CMYK
cmyk(78%, 28%, 0%, 32%)
Oklch
oklch(56.1% 0.109 238.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

314963
634B31

Analogous

316263
314963
323163

Triadic

314963
633149
496331

Split-Comp.

314963
633231
626331

Tetradic

314963
633162
634B31
316332

Contrast Matrix WCAG 2.1 Contrast

314963
B0E0E9
8FC8F1
51A0CE
267DAD
—
6.5
AA
5.2
AA
3.2
AA Large
2.0
Fail
6.5
AA
—
1.3
Fail
2.0
Fail
3.2
AA Large
5.2
AA
1.3
Fail
—
1.6
Fail
2.5
Fail
3.2
AA Large
2.0
Fail
1.6
Fail
—
1.6
Fail
2.0
Fail
3.2
AA Large
2.5
Fail
1.6
Fail
—
White BG
9.3AAA
1.4Fail
1.8Fail
2.9Fail
4.5AA
Black BG
2.3Fail
14.7AAA
11.7AAA
7.3AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3C5D
C5C5E7
A8A8E7
7374C3
4C4CA1

Deuteranopia

3A385B
C2BEE6
A4A0E5
6F69C0
47409F

Tritanopia

325857
B2E5E5
92DFDE
55BAB8
2A9896

Achromatopsia

454545
D3D3D3
BCBCBC
8E8E8E
686868

Shades & Tints Shades & Tints

#314963

Dark
Light

#B0E0E9

Dark
Light

#8FC8F1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #314963;
  --color-2: #b0e0e9;
  --color-3: #8fc8f1;
  --color-4: #51a0ce;
  --color-5: #267dad;
}

SCSS

$color-1: #314963;
$color-2: #b0e0e9;
$color-3: #8fc8f1;
$color-4: #51a0ce;
$color-5: #267dad;

TAILWIND

colors: {
  'brand-1': '#314963',
  'brand-2': '#b0e0e9',
  'brand-3': '#8fc8f1',
  'brand-4': '#51a0ce',
  'brand-5': '#267dad',
}

RGB Array

[49, 73, 99], [176, 224, 233], [143, 200, 241], [81, 160, 206], [38, 125, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #314963, #B0E0E9, #8FC8F1, #51A0CE, #267DAD 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: #314963; --color-2: #b0e0e9; --color-3: #8fc8f1; --color-4: #51a0ce; --color-5: #267dad. 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