← Back to Editor

#97A2B1 · #98CFEA · #94E7CA · #94F6C1 · #CEFEB1

vintage

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPoster

Color Details Color Details

#97A2B1

Azure · DarkGray · Cobalt Blue

HEX
#97A2B1
RGB
rgb(151, 162, 177)
HSL
hsl(215, 14%, 64%)
HSB
hsb(215, 15%, 69%)
CMYK
cmyk(15%, 8%, 0%, 31%)
Oklch
oklch(70.8% 0.025 256.1)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#98CFEA

Sky Blue · SkyBlue · Cobalt Blue

HEX
#98CFEA
RGB
rgb(152, 207, 234)
HSL
hsl(200, 66%, 76%)
HSB
hsb(200, 35%, 92%)
CMYK
cmyk(35%, 12%, 0%, 8%)
Oklch
oklch(82.6% 0.068 229.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#94E7CA

Jade · LightBlue · Apple Green

HEX
#94E7CA
RGB
rgb(148, 231, 202)
HSL
hsl(159, 63%, 74%)
HSB
hsb(159, 36%, 91%)
CMYK
cmyk(36%, 0%, 13%, 9%)
Oklch
oklch(86.7% 0.091 170.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#94F6C1

Emerald · LightGreen · Apple Green

HEX
#94F6C1
RGB
rgb(148, 246, 193)
HSL
hsl(148, 84%, 77%)
HSB
hsb(148, 40%, 96%)
CMYK
cmyk(40%, 0%, 22%, 4%)
Oklch
oklch(89.8% 0.119 159.1)

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

#CEFEB1

Emerald · Wheat · Mint Green

HEX
#CEFEB1
RGB
rgb(206, 254, 177)
HSL
hsl(97, 97%, 85%)
HSB
hsb(97, 30%, 100%)
CMYK
cmyk(19%, 0%, 30%, 0%)
Oklch
oklch(94.5% 0.112 134.1)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97A2B1
B0A596

Analogous

96AEB0
97A2B1
9896B0

Triadic

97A2B1
B096A1
A1B096

Split-Comp.

97A2B1
B09896
AEB096

Tetradic

97A2B1
B096AE
B0A596
96B098

Contrast Matrix WCAG 2.1 Contrast

97A2B1
98CFEA
94E7CA
94F6C1
CEFEB1
—
1.5
Fail
1.8
Fail
2.0
Fail
2.3
Fail
1.5
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.8
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
2.0
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
2.3
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
2.6Fail
1.7Fail
1.4Fail
1.3Fail
1.1Fail
Black BG
8.1AAA
12.4AAA
14.5AAA
16.2AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CAD
B0B0E3
B8B9D1
BEBFCE
E3E3C4

Deuteranopia

9B9AAD
ADA9E2
B3ADD3
B9B1D1
E0DCC8

Tritanopia

98ABAA
9BDEDD
98D7D8
99D8DA
D0D2D6

Achromatopsia

A0A0A0
C2C2C2
CBCBCB
D3D3D3
E7E7E7

Shades & Tints Shades & Tints

#97A2B1

Dark
Light

#98CFEA

Dark
Light

#94E7CA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97a2b1;
  --color-2: #98cfea;
  --color-3: #94e7ca;
  --color-4: #94f6c1;
  --color-5: #cefeb1;
}

SCSS

$color-1: #97a2b1;
$color-2: #98cfea;
$color-3: #94e7ca;
$color-4: #94f6c1;
$color-5: #cefeb1;

TAILWIND

colors: {
  'brand-1': '#97a2b1',
  'brand-2': '#98cfea',
  'brand-3': '#94e7ca',
  'brand-4': '#94f6c1',
  'brand-5': '#cefeb1',
}

RGB Array

[151, 162, 177], [152, 207, 234], [148, 231, 202], [148, 246, 193], [206, 254, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #97A2B1, #98CFEA, #94E7CA, #94F6C1, #CEFEB1 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #97a2b1; --color-2: #98cfea; --color-3: #94e7ca; --color-4: #94f6c1; --color-5: #cefeb1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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