# Colors

Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/Colors.kt+class:androidx.compose.material.Colors) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  class Colors
  ```

*** ** * ** ***

[Material Design color system](https://material.io/design/color/the-color-system.html)

The Material Design color system can help you create a color theme that reflects your brand or style.

![Color
image](https://developer.android.com/images/reference/androidx/compose/material/color.png)

To create a light set of colors using the baseline values, use `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#lightColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` To create a dark set of colors using the baseline values, use `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#darkColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`

## Summary

| ### Public constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#Colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Boolean)( primary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, primaryVariant: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, secondary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, secondaryVariant: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, background: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, surface: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, error: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onPrimary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onSecondary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onBackground: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onSurface: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onError: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, isLight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` | Cmn |

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#copy(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Boolean)( primary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, primaryVariant: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, secondary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, secondaryVariant: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, background: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, surface: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, error: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onPrimary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onSecondary: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onBackground: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onSurface: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, onError: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, isLight: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Returns a copy of this Colors, optionally overriding some of the values. | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#toString()()` | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#background()` The background color appears behind scrollable content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#error()` The error color is used to indicate error within components, such as text fields. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#isLight()` Whether this Colors is considered as a 'light' or 'dark' set of colors. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#onBackground()` Color used for text and icons displayed on top of the background color. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#onError()` Color used for text and icons displayed on top of the error color. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#onPrimary()` Color used for text and icons displayed on top of the primary color. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#onSecondary()` Color used for text and icons displayed on top of the secondary color. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#onSurface()` Color used for text and icons displayed on top of the surface color. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#primary()` The primary color is the color displayed most frequently across your app's screens and components. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#primaryVariant()` The primary variant color is used to distinguish two elements of the app using the primary color, such as the top app bar and the system bar. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#secondary()` The secondary color provides more ways to accent and distinguish your product. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#secondaryVariant()` The secondary variant color is used to distinguish two elements of the app using the secondary color. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#surface()` The surface color is used on surfaces of components, such as cards, sheets and menus. | Cmn |

| ### Extension functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors.https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)(backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color)` The Material color system contains pairs of colors that are typically used for the background and content color inside a component. | Cmn |

| ### Extension properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors.https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#(androidx.compose.material.Colors).primarySurface()` primarySurface represents the background color of components that are `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#primary()` in light theme, and `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#surface()` in dark theme, such as `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TopAppBar(kotlin.Function0,androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp)`. | Cmn |

## Public constructors

### Colors

Cmn Added in [1.9.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.9.0)

```
Colors(
    primary: Color,
    primaryVariant: Color,
    secondary: Color,
    secondaryVariant: Color,
    background: Color,
    surface: Color,
    error: Color,
    onPrimary: Color,
    onSecondary: Color,
    onBackground: Color,
    onSurface: Color,
    onError: Color,
    isLight: Boolean
)
```

## Public functions

### copy

Cmn Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.10.0)

```
fun copy(
    primary: Color = this.primary,
    primaryVariant: Color = this.primaryVariant,
    secondary: Color = this.secondary,
    secondaryVariant: Color = this.secondaryVariant,
    background: Color = this.background,
    surface: Color = this.surface,
    error: Color = this.error,
    onPrimary: Color = this.onPrimary,
    onSecondary: Color = this.onSecondary,
    onBackground: Color = this.onBackground,
    onSurface: Color = this.onSurface,
    onError: Color = this.onError,
    isLight: Boolean = this.isLight
): Colors
```

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

### toString

Cmn

```
open fun toString(): String
```

## Public properties

### background

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val background: Color
```

The background color appears behind scrollable content.

### error

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val error: Color
```

The error color is used to indicate error within components, such as text fields.

### isLight

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val isLight: Boolean
```

Whether this Colors is considered as a 'light' or 'dark' set of colors. This affects default behavior for some components: for example, in a light theme a `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TopAppBar(kotlin.Function0,androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp)` will use `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Boolean)` by default for its background color, when in a dark theme it will use `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Boolean)`.

### onBackground

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val onBackground: Color
```

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

### onError

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val onError: Color
```

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

### onPrimary

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val onPrimary: Color
```

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

### onSecondary

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val onSecondary: Color
```

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

### onSurface

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val onSurface: Color
```

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

### primary

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val primary: Color
```

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

### primaryVariant

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val primaryVariant: Color
```

The primary variant color is used to distinguish two elements of the app using the primary color, such as the top app bar and the system bar.

### secondary

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
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

### secondaryVariant

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val secondaryVariant: Color
```

The secondary variant color is used to distinguish two elements of the app using the secondary color.

### surface

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val surface: Color
```

The surface color is used on surfaces of components, such as cards, sheets and menus.

## Extension functions

### contentColorFor

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/Colors.kt+function:contentColorFor)

```
fun Colors.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 `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.ButtonElevation,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke,androidx.compose.material.ButtonColors,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)` to a 'background' color in this `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors`, and then will return the corresponding color used for content. For example, when `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)` is `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#primary()`, this will return `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#onPrimary()`.

If `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)` does not match a background color in the theme, this will return `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Unspecified()`.

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)`. If `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)` is not present in the theme's `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors`, then returns `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Unspecified()`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.material.Colors).contentColorFor(androidx.compose.ui.graphics.Color)` |   |

## Extension properties

### primarySurface

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/Colors.kt+symbol:primarySurface) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.0.0)

```
val Colors.primarySurface: Color
```

primarySurface represents the background color of components that are `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#primary()` in light theme, and `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#surface()` in dark theme, such as `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TopAppBar(kotlin.Function0,androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp)`. This is to reduce brightness of large surfaces in dark theme, aiding contrast and readability. See [Dark Theme](https://material.io/design/color/dark-theme.html#custom-application).

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#primary()` if in light theme, else `https://developer.android.com/reference/kotlin/androidx/compose/material/Colors#surface()` |