← Back to Editor

#0C0C16 · #BB2F32 · #905654 · #81889B · #FCF8F7

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

#0C0C16

Deep Indigo · Black · Deep Sea Blue

HEX
#0C0C16
RGB
rgb(12, 12, 22)
HSL
hsl(240, 29%, 7%)
HSB
hsb(240, 45%, 9%)
CMYK
cmyk(45%, 45%, 0%, 91%)
Oklch
oklch(16.0% 0.021 283.8)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#BB2F32

Crimson · FireBrick · Passion Red

HEX
#BB2F32
RGB
rgb(187, 47, 50)
HSL
hsl(359, 60%, 46%)
HSB
hsb(359, 75%, 73%)
CMYK
cmyk(0%, 75%, 73%, 27%)
Oklch
oklch(52.6% 0.177 24.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#905654

Crimson · Sienna · Passion Red

HEX
#905654
RGB
rgb(144, 86, 84)
HSL
hsl(2, 26%, 45%)
HSB
hsb(2, 42%, 56%)
CMYK
cmyk(0%, 40%, 42%, 44%)
Oklch
oklch(51.9% 0.078 22.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#81889B

Azure · LightSlateGray · Navy Blue

HEX
#81889B
RGB
rgb(129, 136, 155)
HSL
hsl(224, 12%, 56%)
HSB
hsb(224, 17%, 61%)
CMYK
cmyk(17%, 12%, 0%, 39%)
Oklch
oklch(62.7% 0.030 269.5)

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

#FCF8F7

Peach Pink · Snow · Cherry Blossom

HEX
#FCF8F7
RGB
rgb(252, 248, 247)
HSL
hsl(12, 45%, 98%)
HSB
hsb(12, 2%, 99%)
CMYK
cmyk(0%, 2%, 2%, 1%)
Oklch
oklch(98.2% 0.004 34.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C0C16
17170D

Analogous

0D1217
0C0C16
120D17

Triadic

0C0C16
170D0D
0D170D

Split-Comp.

0C0C16
17120D
12170D

Tetradic

0C0C16
170D12
17170D
0D1712

Contrast Matrix WCAG 2.1 Contrast

0C0C16
BB2F32
905654
81889B
FCF8F7
—
3.3
AA Large
3.4
AA Large
5.5
AA
18.4
AAA
3.3
AA Large
—
1.0
Fail
1.7
Fail
5.6
AA
3.4
AA Large
1.0
Fail
—
1.6
Fail
5.5
AA
5.5
AA
1.7
Fail
1.6
Fail
—
3.4
AA Large
18.4
AAA
5.6
AA
5.5
AA
3.4
AA Large
—
White BG
19.4AAA
5.9AA
5.8AA
3.5AA Large
1.1Fail
Black BG
1.1Fail
3.6AA Large
3.6AA Large
5.9AA
19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C14
7E7D31
777654
848496
FAFAF7

Deuteranopia

0C0C13
879131
7A7F55
848395
FBFBF7

Tritanopia

0C1211
B43131
8D5555
819392
FCF7F7

Achromatopsia

0D0D0D
595959
676767
888888
F9F9F9

Shades & Tints Shades & Tints

#0C0C16

Dark
Light

#BB2F32

Dark
Light

#905654

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c0c16;
  --color-2: #bb2f32;
  --color-3: #905654;
  --color-4: #81889b;
  --color-5: #fcf8f7;
}

SCSS

$color-1: #0c0c16;
$color-2: #bb2f32;
$color-3: #905654;
$color-4: #81889b;
$color-5: #fcf8f7;

TAILWIND

colors: {
  'brand-1': '#0c0c16',
  'brand-2': '#bb2f32',
  'brand-3': '#905654',
  'brand-4': '#81889b',
  'brand-5': '#fcf8f7',
}

RGB Array

[12, 12, 22], [187, 47, 50], [144, 86, 84], [129, 136, 155], [252, 248, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #0C0C16, #BB2F32, #905654, #81889B, #FCF8F7 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: #0c0c16; --color-2: #bb2f32; --color-3: #905654; --color-4: #81889b; --color-5: #fcf8f7. 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