Synth Studio

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

#Neon#Futuristic#Bold
Open in Generator
COLOR 1
#FA8F11
Dark Orange
COLOR 2
#A7FB42
Green Yellow
COLOR 3
#1BEE8D
Medium Spring Green
COLOR 4
#4697F5
Cornflower Blue
COLOR 5
#9F15F2
Neon Purple

Color Values & Codes

HEX · RGB · HSL
rgb(250, 143, 17)hsl(32, 96%, 52%)Color details →
rgb(167, 251, 66)hsl(87, 96%, 62%)Color details →
rgb(27, 238, 141)hsl(152, 86%, 52%)Color details →
rgb(70, 151, 245)hsl(212, 90%, 62%)Color details →
rgb(159, 21, 242)hsl(277, 89%, 52%)Color details →

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #FA8F11;
  --color-2: #A7FB42;
  --color-3: #1BEE8D;
  --color-4: #4697F5;
  --color-5: #9F15F2;
}

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
#FA8F11 on #4697F51.28:1
Large Text Only (Fail)
Sample Text
#FA8F11 on #9F15F22.33:1
Large Text Only (Fail)
Sample Text
#A7FB42 on #4697F52.36:1
Large Text Only (Fail)
Sample Text
#A7FB42 on #9F15F24.28:1
Large Text Only (Pass)
Sample Text
#1BEE8D on #4697F51.95:1
Large Text Only (Fail)
Sample Text
#1BEE8D on #9F15F23.54:1
Large Text Only (Pass)