#FF5300 + #AF0F20 + #36403C + #7E8295 + #B51F07 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#FF5300

Tangerine · OrangeRed · Amber Brown

HEX

#FF5300

RGB

rgb(255, 83, 0)

HSL

hsl(20, 100%, 50%)

HSB

hsb(20, 100%, 100%)

CMYK

cmyk(0%, 67%, 100%, 0%)

Oklch

oklch(67.4% 0.219 38.3)

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

#AF0F20

Vermilion · FireBrick · Wine Red

HEX

#AF0F20

RGB

rgb(175, 15, 32)

HSL

hsl(354, 84%, 37%)

HSB

hsb(354, 91%, 69%)

CMYK

cmyk(0%, 91%, 82%, 31%)

Oklch

oklch(48.0% 0.187 24.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#36403C

Mineral Blue · DarkSlateGray · Dark Stone

HEX

#36403C

RGB

rgb(54, 64, 60)

HSL

hsl(156, 8%, 23%)

HSB

hsb(156, 16%, 25%)

CMYK

cmyk(16%, 0%, 6%, 75%)

Oklch

oklch(36.1% 0.015 169.4)

Traditional「Mineral Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#7E8295

Azure · LightSlateGray · Navy Blue

HEX

#7E8295

RGB

rgb(126, 130, 149)

HSL

hsl(230, 10%, 54%)

HSB

hsb(230, 15%, 58%)

CMYK

cmyk(15%, 13%, 0%, 42%)

Oklch

oklch(61.0% 0.029 276.1)

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

#B51F07

Vermilion · FireBrick · Wine Red

HEX

#B51F07

RGB

rgb(181, 31, 7)

HSL

hsl(8, 93%, 37%)

HSB

hsb(8, 96%, 71%)

CMYK

cmyk(0%, 83%, 96%, 29%)

Oklch

oklch(49.9% 0.187 31.4)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF5300

00AAFF

Analogous

FF002B

FF5300

FFD400

Triadic

FF5300

00FF55

5500FF

Split-Comp.

FF5300

00FFD5

002AFF

Tetradic

FF5300

2BFF00

00AAFF

D400FF

Contrast Matrix WCAG 2.1 Contrast

FF5300	AF0F20	36403C	7E8295	B51F07
—	2.2 Fail	3.3 AA Large	1.2 Fail	2.1 Fail
2.2 Fail	—	1.5 Fail	1.9 Fail	1.1 Fail
3.3 AA Large	1.5 Fail	—	2.8 Fail	1.6 Fail
1.2 Fail	1.9 Fail	2.8 Fail	—	1.7 Fail
2.1 Fail	1.1 Fail	1.6 Fail	1.7 Fail	—

White BG

3.2AA Large

7.2AAA

10.7AAA

3.8AA Large

6.6AA

Black BG

6.5AA

2.9Fail

2.0Fail

5.5AA

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B314

6A681C

3A3A3D

808090

74730D

Deuteranopia

BFCB19

737F1B

3A393D

807F8F

7D880E

Tritanopia

F62427

A71918

373E3E

7E8D8C

AE1112

Achromatopsia

7D7D7D

414141

3D3D3D

838383

494949

Shades & Tints Shades & Tints

#FF5300

Dark

Light

#AF0F20

Dark

Light

#36403C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff5300;
  --color-2: #af0f20;
  --color-3: #36403c;
  --color-4: #7e8295;
  --color-5: #b51f07;
}

SCSS

$color-1: #ff5300;
$color-2: #af0f20;
$color-3: #36403c;
$color-4: #7e8295;
$color-5: #b51f07;

TAILWIND

colors: {
  'brand-1': '#ff5300',
  'brand-2': '#af0f20',
  'brand-3': '#36403c',
  'brand-4': '#7e8295',
  'brand-5': '#b51f07',
}

RGB Array

[255, 83, 0], [175, 15, 32], [54, 64, 60], [126, 130, 149], [181, 31, 7]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #FF5300, #AF0F20, #36403C, #7E8295, #B51F07 is ideal for: corporate websites, product showcases, portfolios. 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: #ff5300; --color-2: #af0f20; --color-3: #36403c; --color-4: #7e8295; --color-5: #b51f07. 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. 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