← Back to Editor

#A2DDFA · #F7FF00 · #0F2E3D · #FFFFFF · #EBF8FF

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

#A2DDFA

Sky Blue · LightBlue · Sky Blue

HEX
#A2DDFA
RGB
rgb(162, 221, 250)
HSL
hsl(200, 90%, 81%)
HSB
hsb(200, 35%, 98%)
CMYK
cmyk(35%, 12%, 0%, 2%)
Oklch
oklch(86.7% 0.072 229.8)

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

#F7FF00

Autumn Sage · Yellow · Honey Gold

HEX
#F7FF00
RGB
rgb(247, 255, 0)
HSL
hsl(62, 100%, 50%)
HSB
hsb(62, 100%, 100%)
CMYK
cmyk(3%, 0%, 100%, 0%)
Oklch
oklch(96.2% 0.213 112.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#0F2E3D

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#0F2E3D
RGB
rgb(15, 46, 61)
HSL
hsl(200, 61%, 15%)
HSB
hsb(200, 75%, 24%)
CMYK
cmyk(75%, 25%, 0%, 76%)
Oklch
oklch(28.6% 0.045 232.5)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#EBF8FF

Sky Blue · Lavender · Sky Blue

HEX
#EBF8FF
RGB
rgb(235, 248, 255)
HSL
hsl(201, 100%, 96%)
HSB
hsb(201, 8%, 100%)
CMYK
cmyk(8%, 3%, 0%, 0%)
Oklch
oklch(97.1% 0.017 230.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2DDFA
FAC0A3

Analogous

A3FAEC
A2DDFA
A3B1FA

Triadic

A2DDFA
FAA3DD
DDFAA3

Split-Comp.

A2DDFA
FAA3B1
FAECA3

Tetradic

A2DDFA
ECA3FA
FAC0A3
B1FAA3

Contrast Matrix WCAG 2.1 Contrast

A2DDFA
F7FF00
0F2E3D
FFFFFF
EBF8FF
—
1.4
Fail
9.6
AAA
1.5
Fail
1.4
Fail
1.4
Fail
—
13.0
AAA
1.1
Fail
1.0
Fail
9.6
AAA
13.0
AAA
—
14.2
AAA
13.1
AAA
1.5
Fail
1.1
Fail
14.2
AAA
—
1.1
Fail
1.4
Fail
1.0
Fail
13.1
AAA
1.1
Fail
—
White BG
1.5Fail
1.1Fail
14.2AAA
1.0Fail
1.1Fail
Black BG
14.3AAA
19.3AAA
1.5Fail
21.0AAA
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCF3
FAFB3E
1C1D39
FFFFFF
F1F1FD

Deuteranopia

B8B4F1
FAF94D
1B1838
FFFFFF
F0EFFD

Tritanopia

A5EDEC
F76E79
113736
FFFFFF
ECFCFC

Achromatopsia

CFCFCF
E0E0E0
262626
FFFFFF
F5F5F5

Shades & Tints Shades & Tints

#A2DDFA

Dark
Light

#F7FF00

Dark
Light

#0F2E3D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2ddfa;
  --color-2: #f7ff00;
  --color-3: #0f2e3d;
  --color-4: #ffffff;
  --color-5: #ebf8ff;
}

SCSS

$color-1: #a2ddfa;
$color-2: #f7ff00;
$color-3: #0f2e3d;
$color-4: #ffffff;
$color-5: #ebf8ff;

TAILWIND

colors: {
  'brand-1': '#a2ddfa',
  'brand-2': '#f7ff00',
  'brand-3': '#0f2e3d',
  'brand-4': '#ffffff',
  'brand-5': '#ebf8ff',
}

RGB Array

[162, 221, 250], [247, 255, 0], [15, 46, 61], [255, 255, 255], [235, 248, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #A2DDFA, #F7FF00, #0F2E3D, #FFFFFF, #EBF8FF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #a2ddfa; --color-2: #f7ff00; --color-3: #0f2e3d; --color-4: #ffffff; --color-5: #ebf8ff. 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. 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