Minimal, dependency-free color picker tool featuring Circular, Square, and Ring components for customizable color selection. Integrates seamlessly with projects for enhanced user interaction.
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:
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.
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.
Surfaced from shared tags and platforms — no rankings paid for.