ColorScheme

@Immutable
class ColorScheme(val primary: Color, val onPrimary: Color, val primaryContainer: Color, val onPrimaryContainer: Color, val inversePrimary: Color, val secondary: Color, val onSecondary: Color, val secondaryContainer: Color, val onSecondaryContainer: Color, val tertiary: Color, val onTertiary: Color, val tertiaryContainer: Color, val onTertiaryContainer: Color, val background: Color, val onBackground: Color, val surface: Color, val onSurface: Color, val surfaceVariant: Color, val onSurfaceVariant: Color, val surfaceTint: Color, val inverseSurface: Color, val inverseOnSurface: Color, val error: Color, val onError: Color, val errorContainer: Color, val onErrorContainer: Color, val outline: Color, val outlineVariant: Color, val scrim: Color, val surfaceBright: Color, val surfaceDim: Color, val surfaceContainer: Color, val surfaceContainerHigh: Color, val surfaceContainerHighest: Color, val surfaceContainerLow: Color, val surfaceContainerLowest: Color)

A color scheme holds all the named color parameters for a MaterialTheme.

Color schemes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. There are two built-in baseline schemes, lightColorScheme and a darkColorScheme, that can be used as-is or customized.

The Material color system and custom schemes provide default values for color as a starting point for customization.

Example of extending color scheme, including implementing Fixed Accent colors:

Samples

androidx.compose.material3.samples.ColorSchemeFixedAccentColorSample

Constructors

Link copied to clipboard
constructor(primary: Color, onPrimary: Color, primaryContainer: Color, onPrimaryContainer: Color, inversePrimary: Color, secondary: Color, onSecondary: Color, secondaryContainer: Color, onSecondaryContainer: Color, tertiary: Color, onTertiary: Color, tertiaryContainer: Color, onTertiaryContainer: Color, background: Color, onBackground: Color, surface: Color, onSurface: Color, surfaceVariant: Color, onSurfaceVariant: Color, surfaceTint: Color, inverseSurface: Color, inverseOnSurface: Color, error: Color, onError: Color, errorContainer: Color, onErrorContainer: Color, outline: Color, outlineVariant: Color, scrim: Color)
constructor(primary: Color, onPrimary: Color, primaryContainer: Color, onPrimaryContainer: Color, inversePrimary: Color, secondary: Color, onSecondary: Color, secondaryContainer: Color, onSecondaryContainer: Color, tertiary: Color, onTertiary: Color, tertiaryContainer: Color, onTertiaryContainer: Color, background: Color, onBackground: Color, surface: Color, onSurface: Color, surfaceVariant: Color, onSurfaceVariant: Color, surfaceTint: Color, inverseSurface: Color, inverseOnSurface: Color, error: Color, onError: Color, errorContainer: Color, onErrorContainer: Color, outline: Color, outlineVariant: Color, scrim: Color, surfaceBright: Color, surfaceDim: Color, surfaceContainer: Color, surfaceContainerHigh: Color, surfaceContainerHighest: Color, surfaceContainerLow: Color, surfaceContainerLowest: Color)

Properties

Link copied to clipboard
val background: Color

The background color that appears behind scrollable content.

Link copied to clipboard
val error: Color

The error color is used to indicate errors in components, such as invalid text in a text field.

Link copied to clipboard
val errorContainer: Color

The preferred tonal color of error containers.

Link copied to clipboard
val inverseOnSurface: Color

A color that contrasts well with inverseSurface. Useful for content that sits on top of containers that are inverseSurface.

Link copied to clipboard
val inversePrimary: Color

Color to be used as a "primary" color in places where the inverse color scheme is needed, such as the button on a SnackBar.

Link copied to clipboard
val inverseSurface: Color

A color that contrasts sharply with surface. Useful for surfaces that sit on top of other surfaces with surface color.

Link copied to clipboard
val onBackground: Color

Color used for text and icons displayed on top of the background color.

Link copied to clipboard
val onError: Color

Color used for text and icons displayed on top of the error color.

Link copied to clipboard
val onErrorContainer: Color

The color (and state variants) that should be used for content on top of errorContainer.

Link copied to clipboard
val onPrimary: Color

Color used for text and icons displayed on top of the primary color.

Link copied to clipboard

The color (and state variants) that should be used for content on top of primaryContainer.

Link copied to clipboard
val onSecondary: Color

Color used for text and icons displayed on top of the secondary color.

Link copied to clipboard

The color (and state variants) that should be used for content on top of secondaryContainer.

Link copied to clipboard
val onSurface: Color

Color used for text and icons displayed on top of the surface color.

Link copied to clipboard
val onSurfaceVariant: Color

The color (and state variants) that can be used for content on top of surface.

Link copied to clipboard
val onTertiary: Color

Color used for text and icons displayed on top of the tertiary color.

Link copied to clipboard

The color (and state variants) that should be used for content on top of tertiaryContainer.

Link copied to clipboard
val outline: Color

Subtle color used for boundaries. Outline color role adds contrast for accessibility purposes.

Link copied to clipboard
val outlineVariant: Color

Utility color used for boundaries for decorative elements when strong contrast is not required.

Link copied to clipboard
val primary: Color

The primary color is the color displayed most frequently across your app’s screens and components.

Link copied to clipboard
val primaryContainer: Color

The preferred tonal color of containers.

Link copied to clipboard
val scrim: Color

Color of a scrim that obscures content.

Link copied to clipboard
val secondary: Color

The secondary color provides more ways to accent and distinguish your product. Secondary colors are best for:

Link copied to clipboard

A tonal color to be used in containers.

Link copied to clipboard
val surface: Color

The surface color that affect surfaces of components, such as cards, sheets, and menus.

Link copied to clipboard
val surfaceBright: Color

A surface variant that is always brighter than surface, whether in light or dark mode.

Link copied to clipboard
val surfaceContainer: Color

A surface variant that affects containers of components, such as cards, sheets, and menus.

Link copied to clipboard

A surface variant for containers with higher emphasis than surfaceContainer. Use this role for content which requires more emphasis than surfaceContainer.

Link copied to clipboard

A surface variant for containers with higher emphasis than surfaceContainerHigh. Use this role for content which requires more emphasis than surfaceContainerHigh.

Link copied to clipboard

A surface variant for containers with lower emphasis than surfaceContainer. Use this role for content which requires less emphasis than surfaceContainer.

Link copied to clipboard

A surface variant for containers with lower emphasis than surfaceContainerLow. Use this role for content which requires less emphasis than surfaceContainerLow.

Link copied to clipboard
val surfaceDim: Color

A surface variant that is always dimmer than surface, whether in light or dark mode.

Link copied to clipboard
val surfaceTint: Color

This color will be used by components that apply tonal elevation and is applied on top of surface. The higher the elevation the more this color is used.

Link copied to clipboard
val surfaceVariant: Color

Another option for a color with similar uses of surface.

Link copied to clipboard
val tertiary: Color

The tertiary color that can be used to balance primary and secondary colors, or bring heightened attention to an element such as an input field.

Link copied to clipboard

A tonal color to be used in containers.

Functions

Link copied to clipboard
@Stable
fun ColorScheme.contentColorFor(backgroundColor: Color): Color

The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a Button typically uses primary for its background, and onPrimary for the color of its content (usually text or iconography).

Link copied to clipboard
fun copy(primary: Color = this.primary, onPrimary: Color = this.onPrimary, primaryContainer: Color = this.primaryContainer, onPrimaryContainer: Color = this.onPrimaryContainer, inversePrimary: Color = this.inversePrimary, secondary: Color = this.secondary, onSecondary: Color = this.onSecondary, secondaryContainer: Color = this.secondaryContainer, onSecondaryContainer: Color = this.onSecondaryContainer, tertiary: Color = this.tertiary, onTertiary: Color = this.onTertiary, tertiaryContainer: Color = this.tertiaryContainer, onTertiaryContainer: Color = this.onTertiaryContainer, background: Color = this.background, onBackground: Color = this.onBackground, surface: Color = this.surface, onSurface: Color = this.onSurface, surfaceVariant: Color = this.surfaceVariant, onSurfaceVariant: Color = this.onSurfaceVariant, surfaceTint: Color = this.surfaceTint, inverseSurface: Color = this.inverseSurface, inverseOnSurface: Color = this.inverseOnSurface, error: Color = this.error, onError: Color = this.onError, errorContainer: Color = this.errorContainer, onErrorContainer: Color = this.onErrorContainer, outline: Color = this.outline, outlineVariant: Color = this.outlineVariant, scrim: Color = this.scrim, surfaceBright: Color = this.surfaceBright, surfaceDim: Color = this.surfaceDim, surfaceContainer: Color = this.surfaceContainer, surfaceContainerHigh: Color = this.surfaceContainerHigh, surfaceContainerHighest: Color = this.surfaceContainerHighest, surfaceContainerLow: Color = this.surfaceContainerLow, surfaceContainerLowest: Color = this.surfaceContainerLowest): ColorScheme

Returns a copy of this ColorScheme, optionally overriding some of the values.

Link copied to clipboard
@Stable
fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

Link copied to clipboard
open override fun toString(): String