ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/App UI

Social Magenta Vibe

Dynamic creator community interface palette with energetic magenta highlights and sleek dark mode panels.

#App UI#Vibrant#UI#Creative#Modern
Open in Generator
COLOR 1
#18181B
Zinc 900
COLOR 2
#27272A
Anthracite
COLOR 3
#D946EF
Fuchsia 500
COLOR 4
#E879F9
Violet
COLOR 5
#FDF4FF
Magnolia White

Color Values & Codes

HEX · RGB · HSL
Zinc 900
#18181B
rgb(24, 24, 27)hsl(240, 6%, 10%)Color details →
Anthracite
#27272A
rgb(39, 39, 42)hsl(240, 4%, 16%)Color details →
rgb(217, 70, 239)hsl(292, 84%, 61%)Color details →
Violet
#E879F9
rgb(232, 121, 249)hsl(292, 91%, 73%)Color details →
rgb(253, 244, 255)hsl(289, 100%, 98%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
App UI Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #18181B;
  --color-2: #27272A;
  --color-3: #D946EF;
  --color-4: #E879F9;
  --color-5: #FDF4FF;
}

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
#18181B on #E879F97.20:1
Normal Text AA Pass
Sample Text
#18181B on #FDF4FF16.50:1
Normal Text AA Pass
Sample Text
#27272A on #E879F96.05:1
Normal Text AA Pass
Sample Text
#27272A on #FDF4FF13.87:1
Normal Text AA Pass
Sample Text
#D946EF on #E879F91.41:1
Large Text Only (Fail)
Sample Text
#D946EF on #FDF4FF3.22:1
Large Text Only (Pass)

Related Palettes in App UI

Explore App UI
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#2B0938Copy
#6A0572Copy
#AB2E64Copy
#D85A52Copy
#F9A03FCopy
cp-featured-02Sunset
Malibu Dusk Glow
SunsetGradientCreative
#180F33Copy
#491F79Copy
#7C3AEDCopy
#A78BFACopy
#F5F3FFCopy
cp-featured-05App UI
Fluid iOS Violet
App UICreative
#FFFFFFCopy
#F4F4F5Copy
#A1A1AACopy
#27272ACopy
#E11D48Copy
cp-featured-07Minimal
Swiss Editorial Clean
MinimalCreativeBold