← Back to Editor

#9DD19F · #DBD8A2 · #FF9D82 · #EBA031 · #857765

vintage

A 5-color vintage palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarm

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#9DD19F

Celadon · DarkSeaGreen · Apple Green

HEX
#9DD19F
RGB
rgb(157, 209, 159)
HSL
hsl(122, 36%, 72%)
HSB
hsb(122, 25%, 82%)
CMYK
cmyk(25%, 0%, 24%, 18%)
Oklch
oklch(81.1% 0.088 145.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#DBD8A2

Fresh Green · Wheat · Sunflower

HEX
#DBD8A2
RGB
rgb(219, 216, 162)
HSL
hsl(57, 44%, 75%)
HSB
hsb(57, 26%, 86%)
CMYK
cmyk(0%, 1%, 26%, 14%)
Oklch
oklch(87.1% 0.071 105.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FF9D82

Peach Pink · LightSalmon · Coral Red

HEX
#FF9D82
RGB
rgb(255, 157, 130)
HSL
hsl(13, 100%, 75%)
HSB
hsb(13, 49%, 100%)
CMYK
cmyk(0%, 38%, 49%, 0%)
Oklch
oklch(79.0% 0.124 36.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#EBA031

Ginger · GoldenRod · Warm Sun

HEX
#EBA031
RGB
rgb(235, 160, 49)
HSL
hsl(36, 82%, 56%)
HSB
hsb(36, 79%, 92%)
CMYK
cmyk(0%, 32%, 79%, 8%)
Oklch
oklch(76.2% 0.148 71.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#857765

Ochre · Gray · Amber Brown

HEX
#857765
RGB
rgb(133, 119, 101)
HSL
hsl(34, 14%, 46%)
HSB
hsb(34, 24%, 52%)
CMYK
cmyk(0%, 11%, 24%, 48%)
Oklch
oklch(57.7% 0.032 74.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DD19F
D19ED0

Analogous

B6D19E
9DD19F
9ED1B9

Triadic

9DD19F
A09ED1
D1A09E

Split-Comp.

9DD19F
B99ED1
D19EB6

Tetradic

9DD19F
9EB6D1
D19ED0
D1B99E

Contrast Matrix WCAG 2.1 Contrast

9DD19F
DBD8A2
FF9D82
EBA031
857765
—
1.2
Fail
1.2
Fail
1.3
Fail
2.5
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
3.0
Fail
1.2
Fail
1.4
Fail
—
1.1
Fail
2.2
Fail
1.3
Fail
1.5
Fail
1.1
Fail
—
2.0
Fail
2.5
Fail
3.0
Fail
2.2
Fail
2.0
Fail
—
White BG
1.7Fail
1.5Fail
2.0Fail
2.2Fail
4.4AA Large
Black BG
12.1AAA
14.4AAA
10.4AAA
9.6AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B4AB
DADAAF
D5D489
CBCA4C
7F7F69

Deuteranopia

B1ADAE
DADAB2
DAE28A
CFD552
80816A

Tritanopia

A0B5B7
DBB9BC
FA8E8F
E76166
846D6E

Achromatopsia

BCBCBC
D3D3D3
B7B7B7
AAAAAA
797979

Shades & Tints Shades & Tints

#9DD19F

Dark
Light

#DBD8A2

Dark
Light

#FF9D82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dd19f;
  --color-2: #dbd8a2;
  --color-3: #ff9d82;
  --color-4: #eba031;
  --color-5: #857765;
}

SCSS

$color-1: #9dd19f;
$color-2: #dbd8a2;
$color-3: #ff9d82;
$color-4: #eba031;
$color-5: #857765;

TAILWIND

colors: {
  'brand-1': '#9dd19f',
  'brand-2': '#dbd8a2',
  'brand-3': '#ff9d82',
  'brand-4': '#eba031',
  'brand-5': '#857765',
}

RGB Array

[157, 209, 159], [219, 216, 162], [255, 157, 130], [235, 160, 49], [133, 119, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #9DD19F, #DBD8A2, #FF9D82, #EBA031, #857765 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: #9dd19f; --color-2: #dbd8a2; --color-3: #ff9d82; --color-4: #eba031; --color-5: #857765. 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