Tutorials

Setting Up Flutter Colors with PaletteRx

Flutter uses ThemeData with a ColorScheme to define the color system for your entire app. Every Material widget references these theme colors, so setting them correctly is foundational. PaletteRx exports Dart code with Color constants and a pre-configured ColorScheme.

How Flutter Handles Color

Flutter's Color class uses ARGB values with the alpha channel first: Color(0xFF4F46E5). The ColorScheme class defines semantic color roles: primary, secondary, surface, background, error, and their "on" variants (the text color that goes on top of each). Material Design 3 expanded this to include tertiary, surface variants, and more.

Exporting from PaletteRx

Select Flutter from the Native Apps section in PaletteRx's export step. The output generates a Dart class with static Color constants for each palette color, plus a ColorScheme configuration that maps PaletteRx roles to Flutter's semantic properties. Primary maps to primary, Secondary to secondary, Light Base to surface, and Dark Base to onSurface.

Integration

Copy the generated Dart class into your project. In your app's MaterialApp widget, set the theme using the generated ColorScheme. Every Material widget throughout your app will inherit your PaletteRx palette.

Cross-Platform Consistency

Flutter runs on iOS, Android, web, desktop, and embedded platforms. Your PaletteRx palette renders identically across all of them because Flutter controls its own rendering pipeline. This makes Flutter an ideal platform for brand-consistent multi-platform apps.

For web and desktop targets, consider that display gamuts and brightness vary more than on mobile. PaletteRx's balance checking ensures your colors maintain their relationships across different display conditions.

💡 Tip: Flutter's ColorScheme.fromSeed() generates a full Material Design 3 tonal palette from a single seed color. Use your PaletteRx Primary as the seed to generate an entire Material 3 scheme, then override secondary and surface with your PaletteRx values for full brand control.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx