Skip to main content
Palettes are collections of color definitions that form the foundation of your theming system. Neo provides a built-in NeoPalette, and you can create custom palettes for your specific brand needs.

​
NeoPalette

​
NeoPalette
Class
Neo’s comprehensive color palette with semantic color names.
Brand Colors:
  • brand500
Semantic Colors:
  • green500
  • yellow500
  • red500 / red550 / red600
Neutral Grays:
  • gray50
  • gray100
  • gray200
  • gray300
  • gray400
  • gray500
  • gray600
  • gray700
  • gray800
  • gray900
  • gray950
Base Colors:
  • white
  • black

​
Custom Brand Colors

Most applications use Neo’s default palette but customize brand colors. Create your own brand palette:

​
Creating Your Brand Palette

import 'package:flutter/widgets.dart';

class MyAppPalette {
  // Your brand colors using Neo's naming convention
  static const Color brand500 = Color(0xFF6366F1);
  static const Color brand600 = Color(0xFF4F46E5);
  static const Color brand700 = Color(0xFF4338CA);
}

​
Using Brand Colors in Themes

Once you’ve created your brand palette, you can use it in your custom themes. See the Custom Themes page for complete examples of creating and using custom themes with your brand colors.

​
Best Practices

  • Start with Brand Colors: Most apps only need to customize brand colors
  • Use Neo’s Defaults: Leverage Neo’s semantic and neutral colors
  • Follow Neo’s Naming: Use numbered scales like brand500, brand600 for consistency
  • Create Color Scales: Define multiple shades for different interaction states
  • Test Both Themes: Ensure brand colors work in light and dark themes
⌘I