Synth Studio

neon palette with a balanced five-color hierarchy for design use.

#Neon#Futuristic#Bold
Open in Generator
COLOR 1
#F813A4
Deep Pink
COLOR 2
#F97844
Snapdragon Orange
COLOR 3
#A0EC1D
Green Yellow
COLOR 4
#48F384
Medium Spring Green
COLOR 5
#0B8FFD
Dodger Blue

Color Values & Codes

HEX · RGB · HSL
Deep Pink
#F813A4
rgb(248, 19, 164)hsl(322, 94%, 52%)Color details →
rgb(249, 120, 68)hsl(17, 94%, 62%)Color details →
rgb(160, 236, 29)hsl(82, 84%, 52%)Color details →
rgb(72, 243, 132)hsl(141, 88%, 62%)Color details →
rgb(11, 143, 253)hsl(207, 98%, 52%)Color details →

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #F813A4;
  --color-2: #F97844;
  --color-3: #A0EC1D;
  --color-4: #48F384;
  --color-5: #0B8FFD;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#F813A4 on #48F3842.57:1
Large Text Only (Fail)
Sample Text
#F813A4 on #0B8FFD1.13:1
Large Text Only (Fail)
Sample Text
#F97844 on #48F3841.85:1
Large Text Only (Fail)
Sample Text
#F97844 on #0B8FFD1.23:1
Large Text Only (Fail)
Sample Text
#A0EC1D on #48F3841.01:1
Large Text Only (Fail)
Sample Text
#A0EC1D on #0B8FFD2.28:1
Large Text Only (Fail)