Marketing Cta UI Gradient: Rose → Amber (Warm-promo)
A professional rose-amber gradient palette designed for marketing cta interfaces. This warm-promo 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
- •Warm campaign tone for announcements
- •Rose CTAs that read 'action' without danger
- •Amber highlights for discounts and badges
Color Psychology
Rose feels human and enthusiastic, which increases approachability. Amber signals value and opportunity—use it to highlight discounts, 'best plan' badges, or bonus features.
Best Usage Context
Use rose for the primary CTA and key links. Use amber for offer chips and pricing highlights. Keep the rest of the layout neutral so your promo message remains the focus.
Accessibility & Contrast
Rose with white text can be readable when the rose is saturated enough; this palette is tuned for dark backgrounds. Avoid amber text on light backgrounds—use amber as a badge background with dark text or as an icon highlight.
Color Palette
Gradient Presets
linear-gradient(135deg, #F43F5E 0%, #FB7185 50%, #F59E0B 100%)radial-gradient(circle at center, #F59E0B 0%, #FB7185 50%, #F43F5E 100%)Copy & Use
:root {
--color-primary: #F43F5E;
--color-accent: #F59E0B;
--bg-page: #020617;
--bg-surface: #111827;
--border-color: #1F2937;
--text-primary: #FFF1F2;
--text-secondary: #FBCFE8;
--button-primary-bg: #F43F5E;
--button-primary-text: #FFFFFF;
--button-secondary-bg: #1F2937;
--button-secondary-text: #FFFBEB;
}Best for
✓Best for
- Seasonal campaigns
- Launch announcements
- Email landing pages
- Promo sections on product sites
✕Not recommended for
- Enterprise admin dashboards
- Long-form documentation pages