← Back to Editor

#312823 · #554C45 · #86ABA3 · #45A5A4 · #59607A

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

#312823

Tangerine · DarkSlateGray · Cinnamon

HEX
#312823
RGB
rgb(49, 40, 35)
HSL
hsl(21, 17%, 16%)
HSB
hsb(21, 29%, 19%)
CMYK
cmyk(0%, 18%, 29%, 81%)
Oklch
oklch(28.5% 0.016 50.8)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#554C45

Tangerine · DarkOliveGreen · Amber Brown

HEX
#554C45
RGB
rgb(85, 76, 69)
HSL
hsl(26, 10%, 30%)
HSB
hsb(26, 19%, 33%)
CMYK
cmyk(0%, 11%, 19%, 67%)
Oklch
oklch(42.3% 0.017 60.2)

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

#86ABA3

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#86ABA3
RGB
rgb(134, 171, 163)
HSL
hsl(167, 18%, 60%)
HSB
hsb(167, 22%, 67%)
CMYK
cmyk(22%, 0%, 5%, 33%)
Oklch
oklch(71.2% 0.042 180.4)

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

#45A5A4

Mineral Blue · CadetBlue · Mint Ice

HEX
#45A5A4
RGB
rgb(69, 165, 164)
HSL
hsl(179, 41%, 46%)
HSB
hsb(179, 58%, 65%)
CMYK
cmyk(58%, 0%, 1%, 35%)
Oklch
oklch(66.5% 0.089 194.3)

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

#59607A

Indigo · DimGray · Navy Blue

HEX
#59607A
RGB
rgb(89, 96, 122)
HSL
hsl(227, 16%, 41%)
HSB
hsb(227, 27%, 48%)
CMYK
cmyk(27%, 21%, 0%, 52%)
Oklch
oklch(49.3% 0.043 273.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

312823
222B30

Analogous

302224
312823
302E22

Triadic

312823
223027
272230

Split-Comp.

312823
22302E
222430

Tetradic

312823
243022
222B30
2E2230

Contrast Matrix WCAG 2.1 Contrast

312823
554C45
86ABA3
45A5A4
59607A
—
1.7
Fail
5.7
AA
4.9
AA
2.3
Fail
1.7
Fail
—
3.3
AA Large
2.9
Fail
1.3
Fail
5.7
AA
3.3
AA Large
—
1.2
Fail
2.5
Fail
4.9
AA
2.9
Fail
1.2
Fail
—
2.1
Fail
2.3
Fail
1.3
Fail
2.5
Fail
2.1
Fail
—
White BG
14.4AAA
8.4AAA
2.5Fail
2.9Fail
6.2AA
Black BG
1.5Fail
2.5Fail
8.4AAA
7.2AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D24
515147
9696A5
6F6FA4
5C5C74

Deuteranopia

2E2E25
525247
9491A5
6962A4
5C5B72

Tritanopia

312525
554848
88A6A7
4AA4A4
596F6E

Achromatopsia

2A2A2A
4E4E4E
9F9F9F
888888
616161

Shades & Tints Shades & Tints

#312823

Dark
Light

#554C45

Dark
Light

#86ABA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #312823;
  --color-2: #554c45;
  --color-3: #86aba3;
  --color-4: #45a5a4;
  --color-5: #59607a;
}

SCSS

$color-1: #312823;
$color-2: #554c45;
$color-3: #86aba3;
$color-4: #45a5a4;
$color-5: #59607a;

TAILWIND

colors: {
  'brand-1': '#312823',
  'brand-2': '#554c45',
  'brand-3': '#86aba3',
  'brand-4': '#45a5a4',
  'brand-5': '#59607a',
}

RGB Array

[49, 40, 35], [85, 76, 69], [134, 171, 163], [69, 165, 164], [89, 96, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #312823, #554C45, #86ABA3, #45A5A4, #59607A is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #312823; --color-2: #554c45; --color-3: #86aba3; --color-4: #45a5a4; --color-5: #59607a. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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