A component that provides two different HSV color pickers, written in Jetpack Compose.
- ClassicColorPicker - Square picker with alpha channel
- HarmonyColorPicker - Circular wheel with harmony modes (ie complementary, triadic, analogous, shades, monochromatic, tetradic)
color-hsv.mp4
harmony-modes.mp4
Add the dependency to your build.gradle file:
implementation 'com.godaddy.android.colorpicker:compose-color-picker:<latest-version>'
// with Android ColorInt extensions
implementation 'com.godaddy.android.colorpicker:compose-color-picker-android:<latest-version>'
// desktop jvm version
implementation 'com.godaddy.android.colorpicker:compose-color-picker-jvm:<latest-version>'
Add ClassicColorPicker to your Compose hierarchy:
import com.godaddy.android.colorpicker.HsvColor
Column {
ClassicColorPicker(
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)
}Or add the HarmonyColorPicker to your Compose hierarchy for an HSV color wheel implementation:
HarmonyColorPicker(
harmonyMode = harmonyMode.value,
modifier = Modifier.size(400.dp),
onColorChanged = { color ->
currentColor.value = color
extraColors.value = color.getColors(colorHarmonyMode = harmonyMode.value)
})The HarmonyColorPicker allows for you to set a certain ColorHarmonyMode on the wheel.
This will then display multiple magnifiers on top of the wheel for the different harmony modes: ie complementary, triadic, analogous, shades, monochromatic, tetradic.
If you wish to not display other magnifiers - set ColorHarmonyMode.NONE as your harmonyMode on the wheel.
To change the size of the control, pass in the Modifier option:
import com.godaddy.android.colorpicker.HsvColor
ClassicColorPicker(
modifier = Modifier.height(200.dp),
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)To hide the alpha bar, change the showAlphaBar parameter:
import com.godaddy.android.colorpicker.HsvColor
ClassicColorPicker(
showAlphaBar = false,
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)To change the harmony mode of the picker, pass in a different mode into the function:
HarmonyColorPicker(
harmonyMode = ColorHarmonyMode.SHADES,
modifier = Modifier.size(400.dp),
onColorChanged = { color ->
// do stuff with new color
})To change the size of the control, pass in the Modifier option:
import com.godaddy.android.colorpicker.HsvColor
HarmonyColorPicker(
modifier = Modifier.height(200.dp),
onColorChanged = { color: HsvColor ->
// Do something with the color
}
)This project uses spotless to enforce code formatting. Run ./gradlew spotlessApply to run formatting before committing.
- Update the version number in color-picker/build.gradle.kts
- Make a PR into main and get that merged
- Run "Deploy to Sonatype" GitHub Action.
- Login to Sonatype and "Close" release. After a few minutes, click "Release".
- Release should then be available for download on maven (might take like 30 min to propagate).
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent