? Circular Color Picker Compose ?

HarmonyColorPicker – Circular wheel with harmony modes.

? How to

Add it in your root build.gradle.kts at the end of repositories:

allprojects{
    repositories {
        ...
        maven("https://jitpack.io")
    }
}

Add the dependency to module build.gradle.kts.

dependencies {
    ...
    implementation("com.github.honyadew:circular-color-picker-compose:<version>")
}

? Screnshots

Amount of additional colors: “none – 0; complementary – 1; triadic – 2; analogous – 2; tetradic – 3; monochromatic – 4; shades – 4”.

? Customization from Jetpack Compose

HarmonyColorPicker(
    ... 
    colors = ColorPickerDefaults.harmonyColors(wheelBorderColor = Color.Black)
)

@Composable
fun harmonyColors(
    wheelBorderColor: Color = Color.Transparent,
    brightnessBarColor: Color = MaterialTheme.colorScheme.primary,
    primaryMagnifierColor: Color = Color.White,
    additionalMagnifierColor: Color = primaryMagnifierColor,
    disabledWheelBorderColor: Color = Color.Transparent,
    disabledBrightnessBarColor: Color = MaterialTheme.colorScheme.inversePrimary,
    disabledPrimaryMagnifierColor: Color = Color.Gray,
    disabledAdditionalMagnifierColor: Color = disabledPrimaryMagnifierColor
): ColorPickerColors = DefaultColorPickerColors(...)

? Minimal usage example

@Composable
fun AnyComposableFunction() {
    val hsvColor = remember { mutableStateOf(HsvColor.DEFAULT) }

    HarmonyColorPicker(
        harmonyMode = ColorHarmonyMode.NONE,
        value = hsvColor.value,
        onValueChanged = { newValue ->
            hsvColor.value = newValue
        }
    )

    Box(Modifier.size(64.dp).background(hsvColor.value.toColor()))
}

? Full usage example

@Composable
fun AnyComposableFunction(){
    val hsvColor = remember{ mutableStateOf(HsvColor.DEFAULT)}
    val extractHsvColor = remember{ mutableStateOf(listOf<HsvColor>())}
    val harmonyMode = remember { mutableStateOf(ColorHarmonyMode.NONE)}
    val enabled = remember{ mutableStateOf(true)}

    Column() {
        HarmonyColorPicker(
            harmonyMode = harmonyMode.value,
            value = hsvColor.value,
            onValueChanged = { newValue ->
                hsvColor.value = newValue
                extractHsvColor.value = newValue.getColors(colorHarmonyMode = harmonyMode.value)
            },
            modifier = Modifier.size(384.dp),
            showBrightnessBar = true,
            enabled = enabled.value,
            colors = ColorPickerDefaults.harmonyColors(wheelBorderColor = Color.Black)
        )

        //Logic example
        Button(onClick = {
            val index = ColorHarmonyMode.values().indexOf(harmonyMode.value)
            val all = ColorHarmonyMode.values()
            harmonyMode.value = if (index != all.size-1) all[index + 1] else all[0]
        }) {
            Text(text = "Harmony = ${harmonyMode.value.name}")
        }
        Button(onClick = {
            enabled.value = !enabled.value
        }) {
            Text(text = "Enabled = ${enabled.value}")
        }
        Row {
            Box(modifier = Modifier
                .size(64.dp)
                .background(hsvColor.value.toColor())
            )
            extractHsvColor.value.forEach { hsvColor ->
                Box(modifier = Modifier
                    .size(64.dp)
                    .background(hsvColor.toColor())
                )
            }
        }
    }
}

Don’t forget to star the project if you like it! ⭐ = ❤

GitHub

View Github