Skip to content

ColorPicker

@Composable



fun ColorPicker(
    color: HsvColor, 
    showAlphaBar: Boolean = true, 
    alphaBarHeight: Int = 12, 
    hueBarWidth: Int = 16, 
    barPadding: Int = 8, 
    modifier: Modifier = Modifier, 
    onColorChanged: (HsvColor) -> Unit
)

A fully controlled HSV + alpha colour picker composable.

This composable is stateless: it displays the colour provided by color and reports changes through onColorChanged. The caller is responsible for creating and hoisting the state, typically via remember { mutableStateOf(HsvColor(...)) }.

The picker consists of a saturation-value gradient area, an optional alpha slider, and a vertical hue slider. Apply a Modifier.size(width, height) to set the picker's overall dimensions.

Example

var color by remember { mutableStateOf(HsvColor.from(KColor.RED)) }
ColorPicker(
    color = color,
    modifier = Modifier.size(200, 150),
    onColorChanged = { color = it },
)

Parameters

  • color: The current colour value to display.

  • showAlphaBar: Whether to show the horizontal alpha slider.

  • alphaBarHeight: Height of the alpha slider in pixels.

  • hueBarWidth: Width of the vertical hue slider in pixels.

  • barPadding: Gap in pixels between the main SV area and the sliders.

  • modifier: Modifiers applied to the picker container (size required).

  • onColorChanged: Called with the updated HsvColor on every user interaction.