ColorScheme class

A set of 30 colors based on the Material spec that can be used to configure the color properties of most components.

Colors in Material 3

In Material 3, colors are represented using color roles and corresponding tokens. Each property in the ColorScheme class represents one color role as defined in the spec above.

The main accent color groups in the scheme are primary, secondary, and tertiary.

Primary colors are used for key components across the UI, such as the FAB, prominent buttons, and active states.
Secondary colors are used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.
Tertiary colors are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as an input field. The tertiary colors are left for makers to use at their discretion and are intended to support broader color expression in products.

The remaining colors of the scheme are comprised of neutral colors used for backgrounds and surfaces, as well as specific colors for errors, dividers and shadows.

Many of the colors have matching 'on' colors, which are used for drawing content on top of the matching color. For example, if something is using primary for a background color, onPrimary would be used to paint text and icons on top of it. For this reason, the 'on' colors should have a contrast ratio with their matching colors of at least 4.5:1 in order to be readable.

Setting Colors in Flutter

Flutter's Material widgets can be assigned colors at the widget level using widget properties, or at the app level using theme classes.

For example, you can set the background of the AppBar by setting the AppBar.backgroundColor to a specific Color value.

To globally set the AppBar background color for your app, you can set the ThemeData.appBarTheme property for your MaterialApp using the ThemeData class. You can also override the default appearance of all the AppBars in a widget subtree by placing the AppBarTheme at the root of the subtree.

Alternatively, you can set the ThemeData.colorScheme property to a custom ColorScheme. This creates a unified ColorScheme to be used across the app. The AppBar.backgroundColor uses the ColorScheme.surface by default.

Mixed in types

Diagnosticable

Annotations

@immutable

Constructors

ColorScheme({required Brightness brightness, required Color primary, required Color onPrimary, Color? primaryContainer, Color? onPrimaryContainer, required Color secondary, required Color onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, required Color error, required Color onError, Color? errorContainer, Color? onErrorContainer, required Color background, required Color onBackground, required Color surface, required Color onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint}): Create a ColorScheme instance from the given colors.
const
ColorScheme.dark({Brightness brightness = Brightness.dark, Color primary = const Color(0xffbb86fc), Color onPrimary = Colors.black, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff03dac6), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xffcf6679), Color onError = Colors.black, Color? errorContainer, Color? onErrorContainer, Color background = const Color(0xff121212), Color onBackground = Colors.white, Color surface = const Color(0xff121212), Color onSurface = Colors.white, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint}): Create the recommended dark color scheme that matches the baseline Material color scheme.
const
ColorScheme.fromSeed({required Color seedColor, Brightness brightness = Brightness.light, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? outline, Color? outlineVariant, Color? background, Color? onBackground, Color? surface, Color? onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? shadow, Color? scrim, Color? surfaceTint}): Generate a ColorScheme derived from the given seedColor.
factory
ColorScheme.fromSwatch({MaterialColor primarySwatch = Colors.blue, Color? accentColor, Color? cardColor, Color? backgroundColor, Color? errorColor, Brightness brightness = Brightness.light}): Create a color scheme from a MaterialColor swatch.
factory
ColorScheme.highContrastDark({Brightness brightness = Brightness.dark, Color primary = const Color(0xffefb7ff), Color onPrimary = Colors.black, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff66fff9), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xff9b374d), Color onError = Colors.black, Color? errorContainer, Color? onErrorContainer, Color background = const Color(0xff121212), Color onBackground = Colors.white, Color surface = const Color(0xff121212), Color onSurface = Colors.white, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint}): Create a high contrast ColorScheme based on the dark baseline Material color scheme.
const
ColorScheme.highContrastLight({Brightness brightness = Brightness.light, Color primary = const Color(0xff0000ba), Color onPrimary = Colors.white, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff66fff9), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xff790000), Color onError = Colors.white, Color? errorContainer, Color? onErrorContainer, Color background = Colors.white, Color onBackground = Colors.black, Color surface = Colors.white, Color onSurface = Colors.black, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint}): Create a high contrast ColorScheme based on a purple primary color that matches the baseline Material color scheme.
const
ColorScheme.light({Brightness brightness = Brightness.light, Color primary = const Color(0xff6200ee), Color onPrimary = Colors.white, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff03dac6), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xffb00020), Color onError = Colors.white, Color? errorContainer, Color? onErrorContainer, Color background = Colors.white, Color onBackground = Colors.black, Color surface = Colors.white, Color onSurface = Colors.black, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint}): Create a ColorScheme based on a purple primary color that matches the baseline Material color scheme.
const

Properties

background → Color: A color that typically appears behind scrollable content.
final
brightness → Brightness: The overall brightness of this color scheme.
final
error → Color: The color to use for input validation errors, e.g. for InputDecoration.errorText.
final
errorContainer → Color: A color used for error elements needing less emphasis than error.
read-only
hashCode → int: The hash code for this object.
read-onlyoverride
inversePrimary → Color: An accent color used for displaying a highlight color on inverseSurface backgrounds, like button text in a SnackBar.
read-only
inverseSurface → Color: A surface color used for displaying the reverse of what’s seen in the surrounding UI, for example in a SnackBar to bring attention to an alert.
read-only
onBackground → Color: A color that's clearly legible when drawn on background.
final
onError → Color: A color that's clearly legible when drawn on error.
final
onErrorContainer → Color: A color that's clearly legible when drawn on errorContainer.
read-only
onInverseSurface → Color: A color that's clearly legible when drawn on inverseSurface.
read-only
onPrimary → Color: A color that's clearly legible when drawn on primary.
final
onPrimaryContainer → Color: A color that's clearly legible when drawn on primaryContainer.
read-only
onSecondary → Color: A color that's clearly legible when drawn on secondary.
final
onSecondaryContainer → Color: A color that's clearly legible when drawn on secondaryContainer.
read-only
onSurface → Color: A color that's clearly legible when drawn on surface.
final
onSurfaceVariant → Color: A color that's clearly legible when drawn on surfaceVariant.
read-only
onTertiary → Color: A color that's clearly legible when drawn on tertiary.
read-only
onTertiaryContainer → Color: A color that's clearly legible when drawn on tertiaryContainer.
read-only
outline → Color: A utility color that creates boundaries and emphasis to improve usability.
read-only
outlineVariant → Color: A utility color that creates boundaries for decorative elements when a 3:1 contrast isn’t required, such as for dividers or decorative elements.
read-only
primary → Color: The color displayed most frequently across your app’s screens and components.
final
primaryContainer → Color: A color used for elements needing less emphasis than primary.
read-only
runtimeType → Type: A representation of the runtime type of the object.
read-onlyinherited
scrim → Color: A color use to paint the scrim around of modal components.
read-only
secondary → Color: An accent color used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.
final
secondaryContainer → Color: A color used for elements needing less emphasis than secondary.
read-only
shadow → Color: A color use to paint the drop shadows of elevated components.
read-only
surface → Color: The background color for widgets like Card.
final
surfaceTint → Color: A color used as an overlay on a surface color to indicate a component's elevation.
read-only
surfaceVariant → Color: A color variant of surface that can be used for differentiation against a component using surface.
read-only
tertiary → Color: A color used as a contrasting accent that can balance primary and secondary colors or bring heightened attention to an element, such as an input field.
read-only
tertiaryContainer → Color: A color used for elements needing less emphasis than tertiary.
read-only

Methods

copyWith({Brightness? brightness, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? background, Color? onBackground, Color? surface, Color? onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint}) → ColorScheme: Creates a copy of this color scheme with the given fields replaced by the non-null parameter values.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringShort() → String: A brief description of this object, usually just the runtimeType and the hashCode.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
override

Static Methods

fromImageProvider({required ImageProvider<Object> provider, Brightness brightness = Brightness.light, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? outline, Color? outlineVariant, Color? background, Color? onBackground, Color? surface, Color? onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? shadow, Color? scrim, Color? surfaceTint}) → Future<ColorScheme>: Generate a ColorScheme derived from the given imageProvider.
lerp(ColorScheme a, ColorScheme b, double t) → ColorScheme: Linearly interpolate between two ColorScheme objects.