A multiplatform color picker for Kotlin Compose, featuring components for selecting colors. Designed to be minimal and dependency-free for easy integration into your project. A live demo can be found here.

Supported platforms:

• JVM
• Android (minimum API level 21)
• Kotlin/JS
• Kotlin/WASM
• macOS (untested)
• iOS (untested)

Compose-pipette comes with three different components for selecting colors: CircularColorPicker, SquareColorPicker and RingColorPicker. Each component has a thumb parameter for passing a custom composable to be used for the thumb component.

The CircularColorPicker component is a simple circle that allows the user to select a color by dragging a point around the circle. The circle allows for control over the hue and saturation of the color.

var color by remember { mutableStateOf(HsvColor(Color.Red)) }

CircularColorPicker(
    color = { color },
    onColorChange = { color = it }
)

The SquareColorPicker component is a square that allows the user to select a color by dragging a point around the square. The square allows for control over the saturation and value of the color.

var color by remember { mutableStateOf(HsvColor(Color.Red)) }

SquareColorPicker(
    color = { color },
    onColorChange = { color = it },
    shape = RoundedCornerShape(8.dp),
)

The RingColorPicker component is a ring that allows the user to select a color by dragging a point around the ring. Only the hue of the color can be changed with this component. For saturation control, use the CircularColorPicker component.

var color by remember { mutableStateOf(HsvColor(Color.Red)) }

RingColorPicker(
    color = { color },
    onColorChange = { color = it }
)

To use the library, add the following to your version catalog:

[versions]
composePipette = "x.y.z"

[libraries]
composePipette = { module = "dev.zt64.compose.pipette:compose-pipette", version.ref = "composePipette" }

Compose-pipette is an open source project licensed under the MIT license.