ColorScheme


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.

To learn more about colors, see Material Design colors.

Summary

Public constructors

ColorScheme(
    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
)

This function is deprecated. Use constructor with additional 'surfaceContainer' roles.

Cmn
ColorScheme(
    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
)

This function is deprecated. Use constructor with additional 'fixed' container roles.

Cmn
ColorScheme(
    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,
    primaryFixed: Color,
    primaryFixedDim: Color,
    onPrimaryFixed: Color,
    onPrimaryFixedVariant: Color,
    secondaryFixed: Color,
    secondaryFixedDim: Color,
    onSecondaryFixed: Color,
    onSecondaryFixedVariant: Color,
    tertiaryFixed: Color,
    tertiaryFixedDim: Color,
    onTertiaryFixed: Color,
    onTertiaryFixedVariant: Color
)
Cmn

Public functions

ColorScheme
copy(
    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,
    primaryFixed: Color,
    primaryFixedDim: Color,
    onPrimaryFixed: Color,
    onPrimaryFixedVariant: Color,
    secondaryFixed: Color,
    secondaryFixedDim: Color,
    onSecondaryFixed: Color,
    onSecondaryFixedVariant: Color,
    tertiaryFixed: Color,
    tertiaryFixedDim: Color,
    onTertiaryFixed: Color,
    onTertiaryFixedVariant: Color
)

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

Cmn
open String
Cmn

Public properties

Color

The background color that appears behind scrollable content.

Cmn
Color

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

Cmn
Color

The preferred tonal color of error containers.

Cmn
Color

A color that contrasts well with inverseSurface.

Cmn
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.

Cmn
Color

A color that contrasts sharply with surface.

Cmn
Color

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

Cmn
Color

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

Cmn
Color

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

Cmn
Color

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

Cmn
Color

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

Cmn
Color

Color used for text and icons displayed on top of primaryFixed or primaryFixedDim.

Cmn
Color

An onPrimaryFixed variant which provides less emphasis.

Cmn
Color

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

Cmn
Color

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

Cmn
Color

Color used for text and icons displayed on top of secondaryFixed or secondaryFixedDim.

Cmn
Color

An onSecondaryFixed variant which provides less emphasis.

Cmn
Color

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

Cmn
Color

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

Cmn
Color

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

Cmn
Color

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

Cmn
Color

Color used for text and icons displayed on top of tertiaryFixed or tertiaryFixedDim.

Cmn
Color

An onTertiaryFixed variant which provides less emphasis.

Cmn
Color

Subtle color used for boundaries.

Cmn
Color

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

Cmn
Color

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

Cmn
Color

The preferred tonal color of containers.

Cmn
Color

A primary variant that maintains the same tone in light and dark themes.

Cmn
Color

A primary variant that maintains the same tone in light and dark themes.

Cmn
Color

Color of a scrim that obscures content.

Cmn
Color

The secondary color provides more ways to accent and distinguish your product.

Cmn
Color

A tonal color to be used in containers.

Cmn
Color

A secondary variant that maintains the same tone in light and dark themes.

Cmn
Color

A secondary variant that maintains the same tone in light and dark themes.

Cmn
Color

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

Cmn
Color

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

Cmn
Color

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

Cmn
Color

A surface variant for containers with higher emphasis than surfaceContainer.

Cmn
Color

A surface variant for containers with higher emphasis than surfaceContainerHigh.

Cmn
Color

A surface variant for containers with lower emphasis than surfaceContainer.

Cmn
Color

A surface variant for containers with lower emphasis than surfaceContainerLow.

Cmn
Color

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

Cmn
Color

This color will be used by components that apply tonal elevation and is applied on top of surface.

Cmn
Color

Another option for a color with similar uses of surface.

Cmn
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.

Cmn
Color

A tonal color to be used in containers.

Cmn
Color

A tertiary variant that maintains the same tone in light and dark themes.

Cmn
Color

A tertiary variant that maintains the same tone in light and dark themes.

Cmn

Extension functions

Color
ColorScheme.contentColorFor(backgroundColor: Color)

The Material color system contains pairs of colors that are typically used for the background and content color inside a component.

Cmn
Color

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

Cmn

Public constructors

ColorScheme

ColorScheme(
    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
)

ColorScheme

ColorScheme(
    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
)

ColorScheme

ColorScheme(
    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,
    primaryFixed: Color,
    primaryFixedDim: Color,
    onPrimaryFixed: Color,
    onPrimaryFixedVariant: Color,
    secondaryFixed: Color,
    secondaryFixedDim: Color,
    onSecondaryFixed: Color,
    onSecondaryFixedVariant: Color,
    tertiaryFixed: Color,
    tertiaryFixedDim: Color,
    onTertiaryFixed: Color,
    onTertiaryFixedVariant: Color
)

Public functions

copy

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,
    primaryFixed: Color = this.primaryFixed,
    primaryFixedDim: Color = this.primaryFixedDim,
    onPrimaryFixed: Color = this.onPrimaryFixed,
    onPrimaryFixedVariant: Color = this.onPrimaryFixedVariant,
    secondaryFixed: Color = this.secondaryFixed,
    secondaryFixedDim: Color = this.secondaryFixedDim,
    onSecondaryFixed: Color = this.onSecondaryFixed,
    onSecondaryFixedVariant: Color = this.onSecondaryFixedVariant,
    tertiaryFixed: Color = this.tertiaryFixed,
    tertiaryFixedDim: Color = this.tertiaryFixedDim,
    onTertiaryFixed: Color = this.onTertiaryFixed,
    onTertiaryFixedVariant: Color = this.onTertiaryFixedVariant
): ColorScheme

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

toString

open fun toString(): String

Public properties

background

val background: Color

The background color that appears behind scrollable content.

error

val error: Color

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

errorContainer

val errorContainer: Color

The preferred tonal color of error containers.

inverseOnSurface

val inverseOnSurface: Color

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

inversePrimary

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.

inverseSurface

val inverseSurface: Color

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

onBackground

val onBackground: Color

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

onError

val onError: Color

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

onErrorContainer

val onErrorContainer: Color

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

onPrimary

val onPrimary: Color

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

onPrimaryContainer

val onPrimaryContainer: Color

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

onPrimaryFixed

val onPrimaryFixed: Color

Color used for text and icons displayed on top of primaryFixed or primaryFixedDim. Maintains the same tone in light and dark themes.

onPrimaryFixedVariant

val onPrimaryFixedVariant: Color

An onPrimaryFixed variant which provides less emphasis. Useful when a strong contrast is not required.

onSecondary

val onSecondary: Color

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

onSecondaryContainer

val onSecondaryContainer: Color

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

onSecondaryFixed

val onSecondaryFixed: Color

Color used for text and icons displayed on top of secondaryFixed or secondaryFixedDim. Maintains the same tone in light and dark themes.

onSecondaryFixedVariant

val onSecondaryFixedVariant: Color

An onSecondaryFixed variant which provides less emphasis. Useful when a strong contrast is not required.

onSurface

val onSurface: Color

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

onSurfaceVariant

val onSurfaceVariant: Color

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

onTertiary

val onTertiary: Color

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

onTertiaryContainer

val onTertiaryContainer: Color

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

onTertiaryFixed

val onTertiaryFixed: Color

Color used for text and icons displayed on top of tertiaryFixed or tertiaryFixedDim. Maintains the same tone in light and dark themes.

onTertiaryFixedVariant

val onTertiaryFixedVariant: Color

An onTertiaryFixed variant which provides less emphasis. Useful when a strong contrast is not required.

outline

val outline: Color

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

outlineVariant

val outlineVariant: Color

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

primary

val primary: Color

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

primaryContainer

val primaryContainer: Color

The preferred tonal color of containers.

primaryFixed

val primaryFixed: Color

A primary variant that maintains the same tone in light and dark themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.

primaryFixedDim

val primaryFixedDim: Color

A primary variant that maintains the same tone in light and dark themes. Dim roles provide a stronger, more emphasized tone relative to the equivalent fixed color.

scrim

val scrim: Color

Color of a scrim that obscures content.

secondary

val secondary: Color

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

  • Floating action buttons

  • Selection controls, like checkboxes and radio buttons

  • Highlighting selected text

  • Links and headlines

secondaryContainer

val secondaryContainer: Color

A tonal color to be used in containers.

secondaryFixed

val secondaryFixed: Color

A secondary variant that maintains the same tone in light and dark themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.

secondaryFixedDim

val secondaryFixedDim: Color

A secondary variant that maintains the same tone in light and dark themes. Dim roles provide a stronger, more emphasized tone relative to the equivalent fixed color.

surface

val surface: Color

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

surfaceBright

val surfaceBright: Color

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

surfaceContainer

val surfaceContainer: Color

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

surfaceContainerHigh

val surfaceContainerHigh: Color

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

surfaceContainerHighest

val surfaceContainerHighest: Color

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

surfaceContainerLow

val surfaceContainerLow: Color

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

surfaceContainerLowest

val surfaceContainerLowest: Color

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

surfaceDim

val surfaceDim: Color

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

surfaceTint

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.

surfaceVariant

val surfaceVariant: Color

Another option for a color with similar uses of surface.

tertiary

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.

tertiaryContainer

val tertiaryContainer: Color

A tonal color to be used in containers.

tertiaryFixed

val tertiaryFixed: Color

A tertiary variant that maintains the same tone in light and dark themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.

tertiaryFixedDim

val tertiaryFixedDim: Color

A tertiary variant that maintains the same tone in light and dark themes. Dim roles provide a stronger, more emphasized tone relative to the equivalent fixed color.

Extension functions

ColorScheme.contentColorFor

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).

This function tries to match the provided backgroundColor to a 'background' color in this ColorScheme, and then will return the corresponding color used for content. For example, when backgroundColor is ColorScheme.primary, this will return ColorScheme.onPrimary.

If backgroundColor does not match a background color in the theme, this will return Color.Unspecified.

Returns
Color

the matching content color for backgroundColor. If backgroundColor is not present in the theme's ColorScheme, then returns Color.Unspecified.

See also
contentColorFor

ColorScheme.surfaceColorAtElevation

fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color

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

Parameters
elevation: Dp

Elevation value used to compute alpha of the color overlay layer.

Returns
Color

the ColorScheme.surface color with an alpha of the ColorScheme.surfaceTint color overlaid on top of it.