← Back to Editor

#83A7A3 · #348588 · #115643 · #0D3723 · #CB5C17

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

#83A7A3

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#83A7A3
RGB
rgb(131, 167, 163)
HSL
hsl(173, 17%, 58%)
HSB
hsb(173, 22%, 65%)
CMYK
cmyk(22%, 0%, 2%, 35%)
Oklch
oklch(70.1% 0.040 187.9)

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

#348588

Slate Blue · SteelBlue · Mint Ice

HEX
#348588
RGB
rgb(52, 133, 136)
HSL
hsl(182, 45%, 37%)
HSB
hsb(182, 62%, 53%)
CMYK
cmyk(62%, 2%, 0%, 47%)
Oklch
oklch(56.9% 0.078 198.6)

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

#115643

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#115643
RGB
rgb(17, 86, 67)
HSL
hsl(163, 67%, 20%)
HSB
hsb(163, 80%, 34%)
CMYK
cmyk(80%, 0%, 22%, 66%)
Oklch
oklch(40.6% 0.074 169.7)

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

#0D3723

Mineral Blue · DarkGreen · Dark Green

HEX
#0D3723
RGB
rgb(13, 55, 35)
HSL
hsl(151, 62%, 13%)
HSB
hsb(151, 76%, 22%)
CMYK
cmyk(76%, 0%, 36%, 78%)
Oklch
oklch(30.2% 0.059 158.8)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#CB5C17

Tangerine · Chocolate · Amber Brown

HEX
#CB5C17
RGB
rgb(203, 92, 23)
HSL
hsl(23, 80%, 44%)
HSB
hsb(23, 89%, 80%)
CMYK
cmyk(0%, 55%, 89%, 20%)
Oklch
oklch(60.4% 0.159 46.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83A7A3
A68286

Analogous

82A690
83A7A3
8298A6

Triadic

83A7A3
A282A6
A6A282

Split-Comp.

83A7A3
A68298
A69082

Tetradic

83A7A3
9082A6
A68286
98A682

Contrast Matrix WCAG 2.1 Contrast

83A7A3
348588
115643
0D3723
CB5C17
—
1.7
Fail
3.3
AA Large
5.1
AA
1.6
Fail
1.7
Fail
—
2.0
Fail
3.1
AA Large
1.0
Fail
3.3
AA Large
2.0
Fail
—
1.5
Fail
2.1
Fail
5.1
AA
3.1
AA Large
1.5
Fail
—
3.2
AA Large
1.6
Fail
1.0
Fail
2.1
Fail
3.2
AA Large
—
White BG
2.6Fail
4.3AA Large
8.6AAA
13.2AAA
4.1AA Large
Black BG
8.0AAA
4.9AA
2.4Fail
1.6Fail
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9393A4
575887
2F2F48
1F2028
9B9A28

Deuteranopia

918EA4
524C87
2B2649
1D1A29
A1AA2C

Tritanopia

85A5A5
388787
144B4C
0F2C2D
C53538

Achromatopsia

9C9C9C
6D6D6D
3F3F3F
282828
757575

Shades & Tints Shades & Tints

#83A7A3

Dark
Light

#348588

Dark
Light

#115643

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83a7a3;
  --color-2: #348588;
  --color-3: #115643;
  --color-4: #0d3723;
  --color-5: #cb5c17;
}

SCSS

$color-1: #83a7a3;
$color-2: #348588;
$color-3: #115643;
$color-4: #0d3723;
$color-5: #cb5c17;

TAILWIND

colors: {
  'brand-1': '#83a7a3',
  'brand-2': '#348588',
  'brand-3': '#115643',
  'brand-4': '#0d3723',
  'brand-5': '#cb5c17',
}

RGB Array

[131, 167, 163], [52, 133, 136], [17, 86, 67], [13, 55, 35], [203, 92, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #83A7A3, #348588, #115643, #0D3723, #CB5C17 is ideal for: tech websites, dark mode UIs, game UIs, 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: #83a7a3; --color-2: #348588; --color-3: #115643; --color-4: #0d3723; --color-5: #cb5c17. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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