Mobile App UI Gradient: Blue → Cyan (Soft-blend)
A professional blue-cyan gradient palette designed for mobile app interfaces. This soft-blend 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
- •Enhance mobile UI clarity
- •Support touch-first interactions
- •Deliver a clean, modern app appearance
Color Psychology
Mint green (#2DD4BF) is fresh, clean, and energizing. It's often used in fitness, health, and productivity apps because it implies 'new beginnings' and 'health'. Unlike a heavy corporate blue, mint feels lightweight and frictionless, encouraging users to tap and interact.
Best Usage Context
Perfect for consumer-facing mobile apps where engagement is key. It works beautifully for onboarding flows, success states ('Task Completed!'), and lifestyle tracking apps. The color naturally pops on both dark and light modes, though this specific palette is optimized for a dark mode interface.
Accessibility & Contrast
The mint accent (#2DD4BF) against the dark background (#020617) has a contrast ratio of about 10:1 (AAA). However, using white text ON the mint button can be tricky (approx 1.8:1 - fail). That's why we use dark text (#020617) on the mint button, which yields a massive 15:1 contrast ratio, ensuring perfect readability even in bright sunlight.
Color Palette
Gradient Presets
linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 50%, #38BDF8 100%)radial-gradient(circle at center, #38BDF8 0%, #5EEAD4 50%, #2DD4BF 100%)Copy & Use
:root {
--color-primary: #2DD4BF;
--color-accent: #38BDF8;
--bg-page: #020617;
--bg-surface: #0F172A;
--border-color: rgba(255,255,255,0.12);
--text-primary: #ECFEFF;
--text-secondary: #99F6E4;
--button-primary-bg: #2DD4BF;
--button-primary-text: #020617;
--button-secondary-bg: #134E4A;
--button-secondary-text: #CCFBF1;
}Best for
✓Best for
- Mobile applications
- iOS apps
- Android apps
- Onboarding and setup flows
✕Not recommended for
- Desktop dashboards
- Admin systems
- Data-dense interfaces
Frequently asked questions
What colors are in the Mint Fresh Mobile?
The Mint Fresh Mobile is built around a dominant color (#2DD4BF), a support tone (#5EEAD4), and an accent color (#38BDF8). These are organized into semantic roles—background, surface, border, text, and primary action—so the palette maps directly onto a design token system rather than a loose set of swatches.
What is the Mint Fresh Mobile best used for?
This palette is curated for mobile app. It works especially well for mobile applications, ios apps, android apps, and onboarding and setup flows. It is less suited to desktop dashboards, admin systems, and data-dense interfaces, where a different contrast or saturation balance usually works better.
Does the Mint Fresh Mobile meet accessibility contrast standards?
The mint accent (#2DD4BF) against the dark background (#020617) has a contrast ratio of about 10:1 (AAA). However, using white text ON the mint button can be tricky (approx 1.8:1 - fail). That's why we use dark text (#020617) on the mint button, which yields a massive 15:1 contrast ratio, ensuring perfect readability even in bright sunlight.
How do I use the Mint Fresh Mobile in CSS or Tailwind?
Every color in the Mint Fresh Mobile ships as copy-ready CSS custom properties and a matching Tailwind config, plus linear and radial gradient presets. Copy the CSS variables for a framework-agnostic setup, or drop the Tailwind config into your theme to reference semantic names like primary, surface, and border throughout your components.
Is the Mint Fresh Mobile free to use in commercial projects?
Yes. The Mint Fresh Mobile, like every palette on UI Colors Lab, is free for both personal and commercial projects. No signup is required and attribution is appreciated but not mandatory.