🎨 compose-pipette

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
• iOS

Motivation

While there are several color picker libraries available for Compose, they all have opinionated designs and implementations, making it difficult for developers to customize them to fit their needs. Compose-pipette aims to fill this gap by providing the base components for color picking, allowing developers to build their own custom color pickers on top of them. The library is designed to be minimal and dependency-free, making it simple to integrate into any project.

Styles

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.

Circular Color Picker

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

Square Color Picker

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

Ring Color Picker

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

Setup

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" }

License

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