---
title: "TimePickerColors"
description: "Represents the colors used by a [TimePicker] in different states"
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3Api
class TimePickerColors
constructor(
    val clockDialColor: Color,
    val selectorColor: Color,
    val containerColor: Color,
    val periodSelectorBorderColor: Color,
    val clockDialSelectedContentColor: Color,
    val clockDialUnselectedContentColor: Color,
    val periodSelectorSelectedContainerColor: Color,
    val periodSelectorUnselectedContainerColor: Color,
    val periodSelectorSelectedContentColor: Color,
    val periodSelectorUnselectedContentColor: Color,
    val timeSelectorSelectedContainerColor: Color,
    val timeSelectorUnselectedContainerColor: Color,
    val timeSelectorSelectedContentColor: Color,
    val timeSelectorUnselectedContentColor: Color,
)
```


Represents the colors used by a `TimePicker` in different states

#### Parameters

| | |
| --- | --- |
| clockDialColor | The color of the clock dial. |
| clockDialSelectedContentColor | the color of the numbers of the clock dial when they are selected or overlapping with the selector |
| clockDialUnselectedContentColor | the color of the numbers of the clock dial when they are unselected |
| selectorColor | The color of the clock dial selector. |
| containerColor | The container color of the time picker. |
| periodSelectorBorderColor | the color used for the border of the AM/PM toggle. |
| periodSelectorSelectedContainerColor | the color used for the selected container of the AM/PM toggle |
| periodSelectorUnselectedContainerColor | the color used for the unselected container of the AM/PM toggle |
| periodSelectorSelectedContentColor | color used for the selected content of the AM/PM toggle |
| periodSelectorUnselectedContentColor | color used for the unselected content of the AM/PM toggle |
| timeSelectorSelectedContainerColor | color used for the selected container of the display buttons to switch between hour and minutes |
| timeSelectorUnselectedContainerColor | color used for the unselected container of the display buttons to switch between hour and minutes |
| timeSelectorSelectedContentColor | color used for the selected content of the display buttons to switch between hour and minutes |
| timeSelectorUnselectedContentColor | color used for the unselected content of the display buttons to switch between hour and minutes |



## Functions

```kotlin
fun copy(
        clockDialColor: Color = this.containerColor,
        selectorColor: Color = this.selectorColor,
        containerColor: Color = this.containerColor,
        periodSelectorBorderColor: Color = this.periodSelectorBorderColor,
        clockDialSelectedContentColor: Color = this.clockDialSelectedContentColor,
        clockDialUnselectedContentColor: Color = this.clockDialUnselectedContentColor,
        periodSelectorSelectedContainerColor: Color = this.periodSelectorSelectedContainerColor,
        periodSelectorUnselectedContainerColor: Color = this.periodSelectorUnselectedContainerColor,
        periodSelectorSelectedContentColor: Color = this.periodSelectorSelectedContentColor,
        periodSelectorUnselectedContentColor: Color = this.periodSelectorUnselectedContentColor,
        timeSelectorSelectedContainerColor: Color = this.timeSelectorSelectedContainerColor,
        timeSelectorUnselectedContainerColor: Color = this.timeSelectorUnselectedContainerColor,
        timeSelectorSelectedContentColor: Color = this.timeSelectorSelectedContentColor,
        timeSelectorUnselectedContentColor: Color = this.timeSelectorUnselectedContentColor,
    ) =
        TimePickerColors(
            clockDialColor.takeOrElse { this.clockDialColor },
            selectorColor.takeOrElse { this.selectorColor },
            containerColor.takeOrElse { this.containerColor },
            periodSelectorBorderColor.takeOrElse { this.periodSelectorBorderColor },
            clockDialSelectedContentColor.takeOrElse { this.clockDialSelectedContentColor },
            clockDialUnselectedContentColor.takeOrElse { this.clockDialUnselectedContentColor },
            periodSelectorSelectedContainerColor.takeOrElse {
                this.periodSelectorSelectedContainerColor
            },
            periodSelectorUnselectedContainerColor.takeOrElse {
                this.periodSelectorUnselectedContainerColor
            },
            periodSelectorSelectedContentColor.takeOrElse {
                this.periodSelectorSelectedContentColor
            },
            periodSelectorUnselectedContentColor.takeOrElse {
                this.periodSelectorUnselectedContentColor
            },
            timeSelectorSelectedContainerColor.takeOrElse {
                this.timeSelectorSelectedContainerColor
            },
            timeSelectorUnselectedContainerColor.takeOrElse {
                this.timeSelectorUnselectedContainerColor
            },
            timeSelectorSelectedContentColor.takeOrElse { this.timeSelectorSelectedContentColor },
            timeSelectorUnselectedContentColor.takeOrElse {
                this.timeSelectorUnselectedContentColor
            },
        )
```


Returns a copy of this TimePickerColors, optionally overriding some of the values. This uses
the Color.Unspecified to mean “use the value from the source”