← Back to Editor

#4D2827 · #9E4B16 · #C75107 · #EBE1B6 · #31B59D

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

#4D2827

Crimson · DarkSlateGray · Wine Red

HEX
#4D2827
RGB
rgb(77, 40, 39)
HSL
hsl(2, 33%, 23%)
HSB
hsb(2, 49%, 30%)
CMYK
cmyk(0%, 48%, 49%, 70%)
Oklch
oklch(32.5% 0.056 22.2)

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

#9E4B16

Tangerine · Sienna · Amber Brown

HEX
#9E4B16
RGB
rgb(158, 75, 22)
HSL
hsl(23, 76%, 35%)
HSB
hsb(23, 86%, 62%)
CMYK
cmyk(0%, 53%, 86%, 38%)
Oklch
oklch(51.0% 0.127 48.2)

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

#C75107

Tangerine · Chocolate · Amber Brown

HEX
#C75107
RGB
rgb(199, 81, 7)
HSL
hsl(23, 93%, 40%)
HSB
hsb(23, 96%, 78%)
CMYK
cmyk(0%, 59%, 96%, 22%)
Oklch
oklch(58.2% 0.166 44.1)

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

#EBE1B6

Goose Yellow · Wheat · Lemon Cream

HEX
#EBE1B6
RGB
rgb(235, 225, 182)
HSL
hsl(49, 57%, 82%)
HSB
hsb(49, 23%, 92%)
CMYK
cmyk(0%, 4%, 23%, 8%)
Oklch
oklch(90.7% 0.057 96.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#31B59D

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#31B59D
RGB
rgb(49, 181, 157)
HSL
hsl(169, 57%, 45%)
HSB
hsb(169, 73%, 71%)
CMYK
cmyk(73%, 0%, 13%, 29%)
Oklch
oklch(69.8% 0.117 177.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D2827
274D4E

Analogous

4E2739
4D2827
4E3C27

Triadic

4D2827
274E29
29274E

Split-Comp.

4D2827
274E3C
27394E

Tetradic

4D2827
394E27
274D4E
3C274E

Contrast Matrix WCAG 2.1 Contrast

4D2827
9E4B16
C75107
EBE1B6
31B59D
—
2.1
Fail
2.8
Fail
9.7
AAA
5.0
AA
2.1
Fail
—
1.3
Fail
4.6
AA
2.4
Fail
2.8
Fail
1.3
Fail
—
3.5
AA Large
1.8
Fail
9.7
AAA
4.6
AA
3.5
AA Large
—
1.9
Fail
5.0
AA
2.4
Fail
1.8
Fail
1.9
Fail
—
White BG
12.7AAA
6.0AA
4.6AA
1.3Fail
2.6Fail
Black BG
1.6Fail
3.5AA Large
4.6AA
16.0AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D27
7A7923
949319
E7E7C0
6A6BA3

Deuteranopia

3F4227
7F8526
9BA41D
E7E8C3
6359A4

Tritanopia

4B2727
9A2D2F
C1272A
EBC9CA
38A7A8

Achromatopsia

333333
5E5E5E
6C6C6C
DFDFDF
8B8B8B

Shades & Tints Shades & Tints

#4D2827

Dark
Light

#9E4B16

Dark
Light

#C75107

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d2827;
  --color-2: #9e4b16;
  --color-3: #c75107;
  --color-4: #ebe1b6;
  --color-5: #31b59d;
}

SCSS

$color-1: #4d2827;
$color-2: #9e4b16;
$color-3: #c75107;
$color-4: #ebe1b6;
$color-5: #31b59d;

TAILWIND

colors: {
  'brand-1': '#4d2827',
  'brand-2': '#9e4b16',
  'brand-3': '#c75107',
  'brand-4': '#ebe1b6',
  'brand-5': '#31b59d',
}

RGB Array

[77, 40, 39], [158, 75, 22], [199, 81, 7], [235, 225, 182], [49, 181, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #4D2827, #9E4B16, #C75107, #EBE1B6, #31B59D is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4d2827; --color-2: #9e4b16; --color-3: #c75107; --color-4: #ebe1b6; --color-5: #31b59d. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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