Portfolio Personal UI Gradient: Pink → Cyan (Neon-soft)

Portfolio / Personal·Neon Soft

A professional pink-cyan gradient palette designed for portfolio personal interfaces. This neon-soft style color scheme is optimized for modern web and mobile applications, providing excellent contrast and visual appeal.

Preview · The Contextual Visualizer

Overview

Total Users
12,345
+12%
Revenue
$45,678
+8%
Active Projects
24
+3
Weekly Signups
Project
Status
Progress
Project Alpha
Active
75%
Project Beta
In Progress
45%

Switch templates to see this palette in Admin Dashboard, Pricing Page, and Mobile Profile contexts.

Accessibility & Contrast

Real-time Contrast

Text on Background
18.48:1
WCAG AAA
Primary on Background
5.72:1
WCAG AAA
Contrast tested for text & buttons
Suitable for long-time usage

Design Intent & Use Cases

  • Expressive personal brand identity
  • Clear interactive hierarchy with distinct highlight color
  • Works well with gradients, glows and modern hero sections

Color Psychology

Rose feels human and bold; violet reads premium and creative. Cyan adds a technical sharpness that makes highlights feel clickable and modern.

Best Usage Context

Use rose for the primary contact CTA and key actions. Use cyan for links and highlight icons. Keep surfaces dark and calm so the palette stays sophisticated rather than neon.

Accessibility & Contrast

The palette is designed around dark surfaces with light ink for reliable reading contrast. Keep cyan for highlights and icons; avoid long cyan text on light surfaces to prevent contrast issues.

Color Palette

Dominant
#EC4899
Support
#A78BFA
Accent
#22D3EE
Primary
#EC4899
Primary Hover
#A78BFA
Background
#020617
Surface
#111827
Text Primary
#FDF2F8
Text Muted
#FBCFE8
Border
#1F2937

Gradient Presets

Linear (Hero)
linear-gradient(135deg, #EC4899 0%, #A78BFA 50%, #22D3EE 100%)
Radial (Highlight)
radial-gradient(circle at center, #22D3EE 0%, #A78BFA 50%, #EC4899 100%)

Copy & Use

:root {
  --color-primary: #EC4899;
  --color-accent: #22D3EE;
  --bg-page: #020617;
  --bg-surface: #111827;
  --border-color: #1F2937;
  --text-primary: #FDF2F8;
  --text-secondary: #FBCFE8;
  --button-primary-bg: #EC4899;
  --button-primary-text: #FFFFFF;
  --button-secondary-bg: #1F2937;
  --button-secondary-text: #EDE9FE;
}

Best for

Best for

  • Creator portfolios
  • Artist landing pages
  • Newsletter signup sections
  • Project showcases with modern visuals

Not recommended for

  • Enterprise business tools
  • Ultra-minimal monochrome branding