Mobile App UI Gradient: Blue → Cyan (Soft-blend)

Mobile App·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

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
19.39:1
WCAG AAA
Primary on Background
10.84:1
WCAG AAA
✓Contrast tested for text & buttons
✓Suitable for long-time usage

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

Dominant
#2DD4BF
Support
#5EEAD4
Accent
#38BDF8
Primary
#2DD4BF
Primary Hover
#5EEAD4
Background
#020617
Surface
#0F172A
Text Primary
#ECFEFF
Text Muted
#99F6E4

Gradient Presets

Linear (Hero)
linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 50%, #38BDF8 100%)
Radial (Highlight)
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

Related Color Schemes

Soft Peach App

Dark Violet Touch