← Back to Editor

#0D3A4F · #16677C · #FFFFFF · #BA681C · #223B47

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

#0D3A4F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0D3A4F
RGB
rgb(13, 58, 79)
HSL
hsl(199, 72%, 18%)
HSB
hsb(199, 84%, 31%)
CMYK
cmyk(84%, 27%, 0%, 69%)
Oklch
oklch(33.0% 0.060 233.4)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#16677C

Lake Blue · Teal · Mint Ice

HEX
#16677C
RGB
rgb(22, 103, 124)
HSL
hsl(192, 70%, 29%)
HSB
hsb(192, 82%, 49%)
CMYK
cmyk(82%, 17%, 0%, 51%)
Oklch
oklch(47.7% 0.080 220.1)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#BA681C

Tangerine · Chocolate · Amber Brown

HEX
#BA681C
RGB
rgb(186, 104, 28)
HSL
hsl(29, 74%, 42%)
HSB
hsb(29, 85%, 73%)
CMYK
cmyk(0%, 44%, 85%, 27%)
Oklch
oklch(59.9% 0.134 57.2)

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

#223B47

Slate Blue · DarkSlateGray · Peacock Green

HEX
#223B47
RGB
rgb(34, 59, 71)
HSL
hsl(199, 35%, 21%)
HSB
hsb(199, 52%, 28%)
CMYK
cmyk(52%, 17%, 0%, 72%)
Oklch
oklch(33.7% 0.037 230.1)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0D3A4F
4F220D

Analogous

0D4F43
0D3A4F
0D194F

Triadic

0D3A4F
4F0D3A
3A4F0D

Split-Comp.

0D3A4F
4F0D19
4F430D

Tetradic

0D3A4F
430D4F
4F220D
194F0D

Contrast Matrix WCAG 2.1 Contrast

0D3A4F
16677C
FFFFFF
BA681C
223B47
—
1.9
Fail
12.1
AAA
2.9
Fail
1.0
Fail
1.9
Fail
—
6.4
AA
1.6
Fail
1.8
Fail
12.1
AAA
6.4
AA
—
4.1
AA Large
11.8
AAA
2.9
Fail
1.6
Fail
4.1
AA Large
—
2.8
Fail
1.0
Fail
1.8
Fail
11.8
AAA
2.8
Fail
—
White BG
12.1AAA
6.4AA
1.0Fail
4.1AA Large
11.8AAA
Black BG
1.7Fail
3.3AA Large
21.0AAA
5.1AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

20214A
393A77
FFFFFF
96962E
2D2D44

Deuteranopia

1E1B49
342E76
FFFFFF
9BA133
2B2A43

Tritanopia

0F4645
1A7372
FFFFFF
B63D40
234241

Achromatopsia

2F2F2F
515151
FFFFFF
787878
353535

Shades & Tints Shades & Tints

#0D3A4F

Dark
Light

#16677C

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0d3a4f;
  --color-2: #16677c;
  --color-3: #ffffff;
  --color-4: #ba681c;
  --color-5: #223b47;
}

SCSS

$color-1: #0d3a4f;
$color-2: #16677c;
$color-3: #ffffff;
$color-4: #ba681c;
$color-5: #223b47;

TAILWIND

colors: {
  'brand-1': '#0d3a4f',
  'brand-2': '#16677c',
  'brand-3': '#ffffff',
  'brand-4': '#ba681c',
  'brand-5': '#223b47',
}

RGB Array

[13, 58, 79], [22, 103, 124], [255, 255, 255], [186, 104, 28], [34, 59, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #0D3A4F, #16677C, #FFFFFF, #BA681C, #223B47 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: #0d3a4f; --color-2: #16677c; --color-3: #ffffff; --color-4: #ba681c; --color-5: #223b47. 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