🚀🌈 🎨 Collection of Color Pickers written with Jetpack Compose with solid Color or Gradient with type, tile mode, and color stops in HSL/HSV/RGB models with Colorful Sliders, displays, and many customization options.
Bundle of Stylish customizable Color pickers, selectors, colorful sliders written with Jetpack Compose enables users to choose from HSL, HSV or RGB color models to pick Solid colors or gradients. With colorful Sliders, panels, hex and color displays and various elements to create customized pickers based on preference.
There are 12, as of current version, different color pickers and 3 different color+gradient pickers available to choose from to use as Composables or inside dialogs that are available in demos.
To get a Git project into your build:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.SmartToolFactory:Compose-Color-Picker-Bundle:<version>'
}
There are various selection of default color pickers and with selectors sliders, and hex displays it's possible to create new ones either.
Hue Ring-Diamond HSL | Hue Ring-Diamond HEX | Hue- Ring-Rect HSL | Hue Ring-Rect HSV |
---|---|---|---|
Saturation-Value HSV | Saturation-Lightness HSL | Hue-Circle HSV | Hue Ring-Rect Hex |
---|---|---|---|
HS HSV | HL HSV | HS HSL | HL HSL |
---|---|---|---|
ColorPickerRingRectHSL(
modifier: Modifier = Modifier,
initialColor: Color,
ringOuterRadiusFraction: Float = .9f,
ringInnerRadiusFraction: Float = .6f,
ringBackgroundColor: Color = Color.Transparent,
ringBorderStrokeColor: Color = Color.Black,
ringBorderStrokeWidth: Dp = 4.dp,
selectionRadius: Dp = 8.dp,
onColorChange: (Color) -> Unit
)
ColorPicker with SelectorRingHue
hue selector and SelectorRectSaturationLightnessHSL
saturation
lightness Selector that uses HSL color model as base.
This color picker has tabs section that can be changed between HSL, HSV and RGB color models and
color can be set using CompositeSliderPanel
which contains sliders for each color models.
SelectorRingHue
.SelectorRingHue
.SelectorRingHue
.Color
is changed
using SelectorRingHue
SelectorDiamondSaturationLightnessHSL
or CompositeSliderPanel
ColorPickerCircleValueHSV(
modifier: Modifier = Modifier,
selectionRadius: Dp = 8.dp,
initialColor: Color,
onColorChange: (Color) -> Unit
)
Color
is changedHue Ring-Diamond HSL | Hue Ring-Diamond HSL2 | Hue- Ring-Rect HSL | Hue Ring-Rect HSV |
---|---|---|---|
ColorPickerGradientRingDiamondHSL(
modifier: Modifier = Modifier,
initialBrushColor: BrushColor,
gradientColorState: GradientColorState = rememberGradientColorState(),
ringOuterRadiusFraction: Float = .9f,
ringInnerRadiusFraction: Float = .6f,
ringBackgroundColor: Color = Color.Black,
ringBorderStrokeColor: Color = Color.Black,
ringBorderStrokeWidth: Dp = 4.dp,
selectionRadius: Dp = 8.dp,
onBrushColorChange: (BrushColor) -> Unit
)
Gradients in Compose might require Size, Offset, or radius based on Linear, Radial, or Sweep gradient is implemented.
A GradientColorState
should be provided to this picker that hold brush, color and other
meta-data about the gradient or color. When there is no size provided you won't be able to choose
linear gradient with start end offset, angle rotation still available, or other gradients.
@Composable
fun rememberGradientColorState(
color: Color = Color.Unspecified,
size: DpSize = DpSize.Zero
): GradientColorState {
val density = LocalDensity.current
return remember {
val sizePx = if (size == DpSize.Zero) {
Size.Zero
} else {
with(density) {
Size(
size.width.toPx(),
size.height.toPx()
)
}
}
GradientColorState(color, sizePx)
}
}
Set size of your container that you wish to display gradients in and pass it
val size = DpSize(150.dp, 100.dp)
and initial color to be displayed on picker
val gradientColorState = rememberGradientColorState(
color = currentBrushColor.color,
size = size
)
BrushColor
class is a color and brush wrapper class that is returned from gradient pickers in **
onChange** callback instead of Color
/**
* Data class that contains [Brush] and [Color] and can return either based on user selection.
*/
data class BrushColor(
var color: Color = Color.Unspecified,
var brush: Brush? = null
) {
/**
* [Brush] that is not **null** [brush] property or [SolidColor] that is not nullable and
* contains [color] property as [SolidColor.value]
*/
val activeBrush: Brush
get() = brush ?: solidColor
/**
* [SolidColor] is a [Brush] that
* wraps [color] property that is used for [activeBrush] if [brush] property is **null**
*/
val solidColor = SolidColor(color)
}
SaturationSelectorDemo
different type of Hue/Saturation/Value/Lightness SelectorsGradientSelection
select gradient with varying properties such as tile mode, angle, size, or
type, colors and color stopsGradientAngleDeme
gradient rotation with GradientOffset
objects.HSVHSLGradientDemo
various types of gradients for creating pickersColorfulSliderDemo
Sliders that can be used with different type of options with different
Selectors and PickersSelectors | Gradient Selection | Gradient Angle | HSV/HSL Gradients | Colorful Sliders |
---|---|---|---|---|