#84AA97 + #3C7584 + #483C60 + #804A62 + #B24351 · vintage - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#84AA97

Mineral Blue · DarkSeaGreen · Olive Green

HEX

#84AA97

RGB

rgb(132, 170, 151)

HSL

hsl(150, 18%, 59%)

HSB

hsb(150, 22%, 67%)

CMYK

cmyk(22%, 0%, 11%, 33%)

Oklch

oklch(70.4% 0.050 163.1)

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

#3C7584

Slate Blue · SteelBlue · Mint Ice

HEX

#3C7584

RGB

rgb(60, 117, 132)

HSL

hsl(193, 38%, 38%)

HSB

hsb(193, 55%, 52%)

CMYK

cmyk(55%, 11%, 0%, 48%)

Oklch

oklch(53.0% 0.064 217.1)

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

#483C60

Deep Indigo · DarkSlateGray · Eggplant

HEX

#483C60

RGB

rgb(72, 60, 96)

HSL

hsl(260, 23%, 31%)

HSB

hsb(260, 38%, 38%)

CMYK

cmyk(25%, 37%, 0%, 62%)

Oklch

oklch(38.5% 0.062 298.8)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#804A62

Dark Violet · DimGray · Camellia

HEX

#804A62

RGB

rgb(128, 74, 98)

HSL

hsl(333, 27%, 40%)

HSB

hsb(333, 42%, 50%)

CMYK

cmyk(0%, 42%, 23%, 50%)

Oklch

oklch(48.0% 0.080 352.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#B24351

Crimson · Sienna · Passion Red

HEX

#B24351

RGB

rgb(178, 67, 81)

HSL

hsl(352, 45%, 48%)

HSB

hsb(352, 62%, 70%)

CMYK

cmyk(0%, 62%, 54%, 30%)

Oklch

oklch(53.8% 0.144 15.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84AA97

A98496

Analogous

84A984

84AA97

84A9A9

Triadic

84AA97

9684A9

A99684

Split-Comp.

84AA97

A984A9

A98484

Tetradic

84AA97

8484A9

A98496

A9A984

Contrast Matrix WCAG 2.1 Contrast

84AA97	3C7584	483C60	804A62	B24351
—	2.0 Fail	3.9 AA Large	2.7 Fail	2.1 Fail
2.0 Fail	—	1.9 Fail	1.3 Fail	1.1 Fail
3.9 AA Large	1.9 Fail	—	1.5 Fail	1.8 Fail
2.7 Fail	1.3 Fail	1.5 Fail	—	1.2 Fail
2.1 Fail	1.1 Fail	1.8 Fail	1.2 Fail	—

White BG

2.6Fail

5.2AA

10.0AAA

6.8AA

5.5AA

Black BG

8.2AAA

4.1AA Large

2.1Fail

3.1AA Large

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

94959C

555580

434357

69685C

82814E

Deuteranopia

928F9D

514D80

444455

6C705B

88914D

Tritanopia

869FA0

3F7E7D

47504F

7D5857

AC4B4A

Achromatopsia

9C9C9C

666666

444444

5D5D5D

666666

Shades & Tints Shades & Tints

#84AA97

Dark

Light

#3C7584

Dark

Light

#483C60

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84aa97;
  --color-2: #3c7584;
  --color-3: #483c60;
  --color-4: #804a62;
  --color-5: #b24351;
}

SCSS

$color-1: #84aa97;
$color-2: #3c7584;
$color-3: #483c60;
$color-4: #804a62;
$color-5: #b24351;

TAILWIND

colors: {
  'brand-1': '#84aa97',
  'brand-2': '#3c7584',
  'brand-3': '#483c60',
  'brand-4': '#804a62',
  'brand-5': '#b24351',
}

RGB Array

[132, 170, 151], [60, 117, 132], [72, 60, 96], [128, 74, 98], [178, 67, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #84AA97, #3C7584, #483C60, #804A62, #B24351 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: #84aa97; --color-2: #3c7584; --color-3: #483c60; --color-4: #804a62; --color-5: #b24351. 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