ColorPicker

ColorPicker is a color selection component in Miuix that allows users to pick colors by adjusting hue, saturation, brightness, and transparency. The component provides an intuitive slider interface with haptic feedback and real-time color preview.

Import

import top.yukonga.miuix.kmp.basic.ColorPicker

Basic Usage

The ColorPicker component enables users to select custom colors:

var selectedColor by remember { mutableStateOf(Color.Red) }

ColorPicker(
    initialColor = selectedColor,
    onColorChanged = { newColor ->
        selectedColor = newColor
    }
)

Component Variants

Without Color Preview

By default, ColorPicker displays a preview of the currently selected color. If you don't want to show the default color preview, set showPreview to false:

ColorPicker(
    initialColor = Color.Blue,
    onColorChanged = { /* Handle color change */ },
    showPreview = false
)

Haptic Feedback

ColorPicker supports haptic feedback, which can be customized using the hapticEffect parameter. See SliderHapticEffect for details.

ColorPicker(
    initialColor = Color.Green,
    onColorChanged = { /* Handle color change */ },
    hapticEffect = SliderHapticEffect.Step
)

Properties

ColorPicker Properties

Property Name	Type	Description	Default Value	Required
initialColor	Color	Initial color	-	Yes
onColorChanged	(Color) -> Unit	Callback for color changes	-	Yes
showPreview	Boolean	Show color preview	true	No
hapticEffect	SliderDefaults.SliderHapticEffect	Slider haptic feedback effect	SliderDefaults.DefaultHapticEffect	No
modifier	Modifier	Modifier for the component	Modifier	No
colorSpace	ColorSpace	Color space to use	ColorSpace.HSV	No

Individual Slider Components

ColorPicker provides four different slider components that can be used independently:

HueSlider

var hue by remember { mutableStateOf(0f) }

HueSlider(
    currentHue = hue,
    onHueChanged = { newHue -> 
        hue = newHue * 360f 
    }
)

SaturationSlider

var saturation by remember { mutableStateOf(0.5f) }

SaturationSlider(
    currentHue = 180f, // Current hue
    currentSaturation = saturation,
    onSaturationChanged = { newSaturation ->
        saturation = newSaturation
    }
)

ValueSlider

var value by remember { mutableStateOf(0.5f) }

ValueSlider(
    currentHue = 180f, // Current hue
    currentSaturation = 0.5f, // Current saturation
    currentValue = value,
    onValueChanged = { newValue ->
        value = newValue
    }
)

AlphaSlider

var alpha by remember { mutableStateOf(1f) }

AlphaSlider(
    currentHue = 180f, // Current hue
    currentSaturation = 0.5f, // Current saturation
    currentValue = 0.5f, // Current value
    currentAlpha = alpha,
    onAlphaChanged = { newAlpha ->
        alpha = newAlpha
    }
)

Advanced Usage

Color Spaces

ColorPicker supports multiple color spaces via colorSpace:

• ColorSpace.HSV — classic HSV sliders (Hue, Saturation, Value, Alpha).
• ColorSpace.OKHSV — perceptual HSV variant based on OkLCH, more uniform hue steps.
• ColorSpace.OKLAB — OkLab sliders (Lightness, a, b, Alpha) for perceptual editing.
• ColorSpace.OKLCH — OkLCH sliders (Lightness, Chroma, Hue, Alpha). Chroma is clamped to typical sRGB gamut.

Example: use the OKLCH color space

ColorPicker(
    initialColor = Color(0xFF4CAF50),
    onColorChanged = { /* Handle color change */ },
    colorSpace = ColorSpace.OKLCH
)

Using in Forms

Combine with other input controls to create a color selection form:

var currentColor by remember { mutableStateOf(Color.Red) }
var hexValue by remember(currentColor) {
    mutableStateOf(
            "#${(currentColor.red * 255).toInt().toString(16).padStart(2, '0').uppercase()}" +
                (currentColor.green * 255).toInt().toString(16).padStart(2, '0').uppercase() +
                (currentColor.blue * 255).toInt().toString(16).padStart(2, '0').uppercase()
    )
}

Surface {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(
            text = "Select Color",
            style = MiuixTheme.textStyles.title2
        )
        Spacer(modifier = Modifier.height(16.dp))
        ColorPicker(
            initialColor = currentColor,
            onColorChanged = {
                currentColor = it
                hexValue = "#${(it.red * 255).toInt().toString(16).padStart(2, '0').uppercase()}" +
                        (it.green * 255).toInt().toString(16).padStart(2, '0').uppercase() +
                        (it.blue * 255).toInt().toString(16).padStart(2, '0').uppercase()
            }
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = hexValue,
            onValueChange = { /* Add hex value parsing logic */ },
            label = "Hex Value",
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Using with Dialog

Use ColorPicker in a dialog to create a color selector:

var showColorDialog = remember { mutableStateOf(false) }
var selectedColor by remember { mutableStateOf(Color.Red) }

Scaffold { 
    TextButton(
        text = "Select Color",
        onClick = { showColorDialog.value = true }
    )
    SuperDialog(
        title = "Select Color",
        show = showColorDialog,
        onDismissRequest = { showColorDialog.value = false } // Close dialog
    ) {
        Column {
            ColorPicker(
                initialColor = selectedColor,
                onColorChanged = { selectedColor = it }
            )
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                TextButton(
                    modifier = Modifier.weight(1f),
                    text = "Cancel",
                    onClick = { showColorDialog.value = false } // Close dialog
                )
                TextButton(
                    modifier = Modifier.weight(1f),
                    text = "Confirm",
                    colors = ButtonDefaults.textButtonColorsPrimary(), // Use theme color
                    onClick = {
                        showColorDialog.value = false
                        // Handle confirmation logic
                        // For example: save the selected color
                    })
            }
        }
    }
}