Palettes

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

Class

Neo’s compact color palette with semantic and mode-specific pigments.

Brand & Semantic:

brand
red
green
yellow

Mode Pigments:

lightBlack — light-mode ink
lightWhite — light-mode surface
darkBlack — dark-mode surface
darkWhite — dark-mode ink

Absolute Colors:

pureBlack
pureWhite
transparent
nullSafety

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 {
  static const Color brand = Color(0xFF6366F1);
  static const Color brandStrong = Color(0xFF4F46E5);
  static const Color brandDeep = 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 colors and mode pigments
Match Neo’s Naming: Prefer clear base names (brand, red) over numbered scales for shared tokens
Create Color Scales: Define multiple shades for different interaction states when your brand needs them
Test Both Themes: Ensure brand colors work in light and dark themes

Getting Started

AI

Widgets

Layouts

Theming

Utilities

NeoPalette

Custom Brand Colors

Creating Your Brand Palette

Using Brand Colors in Themes

Best Practices

​NeoPalette

​Custom Brand Colors

​Creating Your Brand Palette

​Using Brand Colors in Themes

​Best Practices

NeoPalette

Custom Brand Colors

Creating Your Brand Palette

Using Brand Colors in Themes

Best Practices