class ColorScheme

A ColorScheme 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.

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

To learn more about color schemes, see Material Design Color System.

Summary

Public constructors
ColorScheme(
    primary: LayoutColor,
    primaryDim: LayoutColor,
    primaryContainer: LayoutColor,
    onPrimary: LayoutColor,
    onPrimaryContainer: LayoutColor,
    secondary: LayoutColor,
    secondaryDim: LayoutColor,
    secondaryContainer: LayoutColor,
    onSecondary: LayoutColor,
    onSecondaryContainer: LayoutColor,
    tertiary: LayoutColor,
    tertiaryDim: LayoutColor,
    tertiaryContainer: LayoutColor,
    onTertiary: LayoutColor,
    onTertiaryContainer: LayoutColor,
    surfaceContainerLow: LayoutColor,
    surfaceContainer: LayoutColor,
    surfaceContainerHigh: LayoutColor,
    onSurface: LayoutColor,
    onSurfaceVariant: LayoutColor,
    outline: LayoutColor,
    outlineVariant: LayoutColor,
    background: LayoutColor,
    onBackground: LayoutColor,
    error: LayoutColor,
    errorDim: LayoutColor,
    errorContainer: LayoutColor,
    onError: LayoutColor,
    onErrorContainer: LayoutColor
)

Public properties
LayoutColor

color that appears behind other content
LayoutColor

color that indicates remove, delete, close or dismiss actions.
LayoutColor

is color that indicates errors or emergency actions, such as safety alerts.
LayoutColor

color that indicates high priority errors or emergency actions, such as safety alerts
LayoutColor

color is used for text and icons displayed on top of the background color
LayoutColor

color is used for text and icons displayed on top of the error color
LayoutColor

is color used for text and icons on the errorContainer color
LayoutColor

color is used for text and icons displayed on top of the primary color
LayoutColor

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

color is used for text and icons displayed on top of the secondary color
LayoutColor

color (and state variants) should be used for content on top of secondaryContainer
LayoutColor

color is used for text and icons displayed on top of the surface color
LayoutColor

is the color for secondary text and icons on top of surfaceContainer
LayoutColor

color is used for text and icons displayed on top of the tertiary color
LayoutColor

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

is the main color for primary outline components.
LayoutColor

is the secondary color for secondary outline components
LayoutColor

is the color displayed most frequently across your app’s screens and components
LayoutColor

is a standout container color for key components
LayoutColor

is less prominent than primary for component backgrounds
LayoutColor

color provides more ways to accent and distinguish your product
LayoutColor

is a tonal color to be used in containers
LayoutColor

is less prominent than secondary for component backgrounds
LayoutColor

is the main surface color that affect surfaces of components with large containment areas, such as Card and Button
LayoutColor

is a surface color used for large containment components such Card and Button with high prominence
LayoutColor

is a surface color used for large containment components such as Card and Button with low prominence
LayoutColor

color that can be used to balance primary and secondary colors, or bring heightened attention to an element
LayoutColor

is a tonal color to be used in containers
LayoutColor

is a less prominent tertiary color that can be used to balance primary and secondary colors, or bring heightened attention to an element

Public constructors

ColorScheme

Added in 1.3.0
ColorScheme(
    primary: LayoutColor = ColorTokens.PRIMARY.argb,
    primaryDim: LayoutColor = ColorTokens.PRIMARY_DIM.argb,
    primaryContainer: LayoutColor = ColorTokens.PRIMARY_CONTAINER.argb,
    onPrimary: LayoutColor = ColorTokens.ON_PRIMARY.argb,
    onPrimaryContainer: LayoutColor = ColorTokens.ON_PRIMARY_CONTAINER.argb,
    secondary: LayoutColor = ColorTokens.SECONDARY.argb,
    secondaryDim: LayoutColor = ColorTokens.SECONDARY_DIM.argb,
    secondaryContainer: LayoutColor = ColorTokens.SECONDARY_CONTAINER.argb,
    onSecondary: LayoutColor = ColorTokens.ON_SECONDARY.argb,
    onSecondaryContainer: LayoutColor = ColorTokens.ON_SECONDARY_CONTAINER.argb,
    tertiary: LayoutColor = ColorTokens.TERTIARY.argb,
    tertiaryDim: LayoutColor = ColorTokens.TERTIARY_DIM.argb,
    tertiaryContainer: LayoutColor = ColorTokens.TERTIARY_CONTAINER.argb,
    onTertiary: LayoutColor = ColorTokens.ON_TERTIARY.argb,
    onTertiaryContainer: LayoutColor = ColorTokens.ON_TERTIARY_CONTAINER.argb,
    surfaceContainerLow: LayoutColor = ColorTokens.SURFACE_CONTAINER_LOW.argb,
    surfaceContainer: LayoutColor = ColorTokens.SURFACE_CONTAINER.argb,
    surfaceContainerHigh: LayoutColor = ColorTokens.SURFACE_CONTAINER_HIGH.argb,
    onSurface: LayoutColor = ColorTokens.ON_SURFACE.argb,
    onSurfaceVariant: LayoutColor = ColorTokens.ON_SURFACE_VARIANT.argb,
    outline: LayoutColor = ColorTokens.OUTLINE.argb,
    outlineVariant: LayoutColor = ColorTokens.OUTLINE_VARIANT.argb,
    background: LayoutColor = ColorTokens.BACKGROUND.argb,
    onBackground: LayoutColor = ColorTokens.ON_BACKGROUND.argb,
    error: LayoutColor = ColorTokens.ERROR.argb,
    errorDim: LayoutColor = ColorTokens.ERROR_DIM.argb,
    errorContainer: LayoutColor = ColorTokens.ERROR_CONTAINER.argb,
    onError: LayoutColor = ColorTokens.ON_ERROR.argb,
    onErrorContainer: LayoutColor = ColorTokens.ON_ERROR_CONTAINER.argb
)

Public properties

background

Added in 1.3.0
val background: LayoutColor

color that appears behind other content

error

Added in 1.3.0
val error: LayoutColor

color that indicates remove, delete, close or dismiss actions. Added as a slightly less alarming and urgent alternative to errorContainer than the errorDim color

errorContainer

Added in 1.3.0
val errorContainer: LayoutColor

is color that indicates errors or emergency actions, such as safety alerts. This color is for use-cases that are more alarming and urgent than the error color.

errorDim

Added in 1.3.0
val errorDim: LayoutColor

color that indicates high priority errors or emergency actions, such as safety alerts

onBackground

Added in 1.3.0
val onBackground: LayoutColor

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

onError

Added in 1.3.0
val onError: LayoutColor

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

onErrorContainer

Added in 1.3.0
val onErrorContainer: LayoutColor

is color used for text and icons on the errorContainer color

onPrimary

Added in 1.3.0
val onPrimary: LayoutColor

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

onPrimaryContainer

Added in 1.3.0
val onPrimaryContainer: LayoutColor

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

onSecondary

Added in 1.3.0
val onSecondary: LayoutColor

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

onSecondaryContainer

Added in 1.3.0
val onSecondaryContainer: LayoutColor

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

onSurface

Added in 1.3.0
val onSurface: LayoutColor

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

onSurfaceVariant

Added in 1.3.0
val onSurfaceVariant: LayoutColor

is the color for secondary text and icons on top of surfaceContainer

onTertiary

Added in 1.3.0
val onTertiary: LayoutColor

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

onTertiaryContainer

Added in 1.3.0
val onTertiaryContainer: LayoutColor

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

outline

Added in 1.3.0
val outline: LayoutColor

is the main color for primary outline components. The outline color role adds contrast for accessibility purposes.

outlineVariant

Added in 1.3.0
val outlineVariant: LayoutColor

is the secondary color for secondary outline components

primary

Added in 1.3.0
val primary: LayoutColor

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

primaryContainer

Added in 1.3.0
val primaryContainer: LayoutColor

is a standout container color for key components

primaryDim

Added in 1.3.0
val primaryDim: LayoutColor

is less prominent than primary for component backgrounds

secondary

Added in 1.3.0
val secondary: LayoutColor

color provides more ways to accent and distinguish your product

secondaryContainer

Added in 1.3.0
val secondaryContainer: LayoutColor

is a tonal color to be used in containers

secondaryDim

Added in 1.3.0
val secondaryDim: LayoutColor

is less prominent than secondary for component backgrounds

surfaceContainer

Added in 1.3.0
val surfaceContainer: LayoutColor

is the main surface color that affect surfaces of components with large containment areas, such as Card and Button

surfaceContainerHigh

Added in 1.3.0
val surfaceContainerHigh: LayoutColor

is a surface color used for large containment components such Card and Button with high prominence

surfaceContainerLow

Added in 1.3.0
val surfaceContainerLow: LayoutColor

is a surface color used for large containment components such as Card and Button with low prominence

tertiary

Added in 1.3.0
val tertiary: LayoutColor

color that can be used to balance primary and secondary colors, or bring heightened attention to an element

tertiaryContainer

Added in 1.3.0
val tertiaryContainer: LayoutColor

is a tonal color to be used in containers

tertiaryDim

Added in 1.3.0
val tertiaryDim: LayoutColor

is a less prominent tertiary color that can be used to balance primary and secondary colors, or bring heightened attention to an element