Marketing Cta UI Gradient: Rose → Cyan (High-contrast)
A professional rose-cyan gradient palette designed for marketing cta interfaces. This high-contrast style color scheme is optimized for modern web and mobile applications, providing excellent contrast and visual appeal.
Preview · The Contextual Visualizer
Overview
Switch templates to see this palette in Admin Dashboard, Pricing Page, and Mobile Profile contexts.
Accessibility & Contrast
Real-time Contrast
Design Intent & Use Cases
- •Maximize CTA visibility
- •Create strong visual contrast
- •Drive user action through color emphasis
Color Psychology
Purple gradients (#7C3AED to #A78BFA) symbolize creativity, innovation, and wisdom. This combination isn't just aesthetic; it's designed to make your CTA feel important and slightly magical. The dark purple implies luxury and value, while the lighter violet draws the eye upward and forward. This helps overcome user hesitation at the crucial moment of clicking 'Sign Up'.
Best Usage Context
Perfect for SaaS pricing tables, feature highlight sections, or the primary 'Get Started' button on a dark-themed website. It separates the action area from the rest of the content, creating a distinct visual container. Avoid using this for warning messages or critical system alerts, as purple is rarely associated with urgency or danger.
Accessibility & Contrast
White text on the deep purple background (#7C3AED) offers excellent contrast (approx 5.7:1), meeting AA standards for normal text and AAA for large text. However, the lighter violet end of the gradient (#A78BFA) against white text drops to around 2.8:1, so ensure your text overlays are positioned over the darker areas of the gradient, or use a text shadow.
Color Palette
Gradient Presets
linear-gradient(135deg, #FB7185 0%, #F43F5E 50%, #22D3EE 100%)radial-gradient(circle at center, #22D3EE 0%, #F43F5E 50%, #FB7185 100%)Copy & Use
:root {
--color-primary: #FB7185;
--color-accent: #22D3EE;
--bg-page: #020617;
--bg-surface: #0F172A;
--border-color: rgba(255,255,255,0.15);
--text-primary: #FFF1F2;
--text-secondary: #FBCFE8;
--button-primary-bg: #F43F5E;
--button-primary-text: #FFFFFF;
--button-secondary-bg: #1E293B;
--button-secondary-text: #E0F2FE;
}Best for
✓Best for
- Call-to-action sections
- SaaS landing pages
- Marketing hero sections
- Promotional banners
✕Not recommended for
- Data-heavy dashboards
- Admin interfaces
- Long-form reading experiences