Color collection
Onboarding Screen Palettes
Friendly onboarding palettes for mobile apps, SaaS setup flows, welcome screens, and guided product tours.
#317CD8Accent#D65175Surface#EBEEF4Text#121821Support#CE82A4Onboarding Screen 11Onboarding / Mobile / FriendlyQuality 97Primary#314DD8Accent#D66C51Surface#EBECF4Text#121421Support#CE828FOnboarding Screen 5Onboarding / Mobile / FriendlyQuality 95Primary#31D848Accent#51A1D6Surface#EBF4EEText#122115Support#8C82CEOnboarding Screen 6Onboarding / Mobile / FriendlyQuality 95Primary#31D877Accent#5163D6Surface#EBF4F0Text#122119Support#A282CEOnboarding Screen 9Onboarding / Mobile / FriendlyQuality 95Primary#31ABD8Accent#D651B3Surface#EBF1F4Text#121C21Support#CE82BAOnboarding Screen 12Onboarding / Mobile / FriendlyQuality 95Primary#4531D8Accent#D6AA51Surface#EEEBF4Text#151221Support#CE8B82How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for mobile onboarding, SaaS setup, welcome screens, and product tours. Use welcoming accents but keep form fields and next-step buttons highly legible.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #317CD8;
--accent: #D65175;
--surface: #EBEEF4;
--text: #121821;
--support: #CE82A4;
}FAQ
Where should I use onboarding screen palettes?
These palettes are designed for mobile onboarding, SaaS setup, welcome screens, and product tours.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Use welcoming accents but keep form fields and next-step buttons highly legible.