{"id":19521812,"url":"https://github.com/smarttoolfactory/compose-color-picker-bundle","last_synced_at":"2025-10-28T12:38:41.354Z","repository":{"id":39332577,"uuid":"468093233","full_name":"SmartToolFactory/Compose-Color-Picker-Bundle","owner":"SmartToolFactory","description":"🚀🌈 🎨 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.","archived":false,"fork":false,"pushed_at":"2023-08-08T17:57:23.000Z","size":45047,"stargazers_count":78,"open_issues_count":3,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T10:25:51.995Z","etag":null,"topics":["android","color","color-palette","color-picker","gradient","gradients-palette","hsl","hsl-color","hsl-picker","hsv","hsv-color-detection","hsv-color-range","hsv-color-wheel","jetpack-compose","jetpack-compose-canvas","rgb"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmartToolFactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-09T21:10:58.000Z","updated_at":"2025-01-25T12:45:46.000Z","dependencies_parsed_at":"2024-11-11T00:45:32.092Z","dependency_job_id":null,"html_url":"https://github.com/SmartToolFactory/Compose-Color-Picker-Bundle","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Color-Picker-Bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Color-Picker-Bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Color-Picker-Bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Color-Picker-Bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmartToolFactory","download_url":"https://codeload.github.com/SmartToolFactory/Compose-Color-Picker-Bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967127,"owners_count":21515541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","color","color-palette","color-picker","gradient","gradients-palette","hsl","hsl-color","hsl-picker","hsv","hsv-color-detection","hsv-color-range","hsv-color-wheel","jetpack-compose","jetpack-compose-canvas","rgb"],"created_at":"2024-11-11T00:35:08.275Z","updated_at":"2025-10-28T12:38:36.323Z","avatar_url":"https://github.com/SmartToolFactory.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jetpack Compose Color Picker Bundle\n\n[![](https://jitpack.io/v/SmartToolFactory/Compose-Color-Picker-Bundle.svg)](https://jitpack.io/#SmartToolFactory/Compose-Color-Picker-Bundle)\n\n\nBundle of Stylish customizable Color pickers, selectors, colorful sliders written with Jetpack\nCompose enables users to choose from HSL, HSV or RGB color models to pick Solid colors or gradients.\nWith colorful Sliders, panels, hex and color displays and various elements to create customized\npickers based on preference.\n\nThere are 12, as of current version, different color pickers and 3 different color+gradient pickers\navailable to choose from to use as Composables or inside dialogs that are available in demos.\n\nhttps://user-images.githubusercontent.com/35650605/161702454-34b0cf00-8496-4060-bfe1-bea9d1bf754d.mp4\n\n## Gradle Setup\n\nTo get a Git project into your build:\n\n* Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end\n  of repositories:\n\n```\nallprojects {\n  repositories {\n      ...\n      maven { url 'https://jitpack.io' }\n  }\n}\n```\n\n* Step 2. Add the dependency\n\n```\ndependencies {\n    implementation 'com.github.SmartToolFactory:Compose-Color-Picker-Bundle:\u003cversion\u003e'\n}\n```\n\n## Color Pickers\n\nThere are various selection of default color pickers and with selectors sliders, and hex displays\nit's possible to create new ones either.\n\n| Hue Ring-Diamond HSL | Hue Ring-Diamond HEX | Hue- Ring-Rect HSL | Hue Ring-Rect HSV| \n| ----------|-----------| -----------| -----------|\n| \u003cimg src=\"./screenshots/colorpicker/cp_ring_diamond_hsl.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_ring_diamond_hex.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_ring_rect_hsl.png\" width=\"250\"\u003e |  \u003cimg src=\"./screenshots/colorpicker/cp_ring_rect_hsv.png\" width=\"250\"\u003e |\n\n| Saturation-Value HSV | Saturation-Lightness HSL | Hue-Circle HSV | Hue Ring-Rect Hex|\n| ----------|-----------| -----------| -----------|\n| \u003cimg src=\"./screenshots/colorpicker/cp_rect_saturation_value_hsv.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_rect_saturation_lightness_hsl.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_circle_hue_saturation_hsv.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_ring_rect_hex_hsv.png\" width=\"250\"\u003e |\n\n| HS HSV |  HL HSV |  HS HSL  | HL HSL  |\n| ----------|-----------| -----------| -----------|\n| \u003cimg src=\"./screenshots/colorpicker/cp_rect_hue_saturation_hsv.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_rect_hue_value_hsv.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_rect_hue_saturation_hsl.png\" width=\"250\"\u003e |  \u003cimg src=\"./screenshots/colorpicker/cp_rect_hue_lightness_hsl.png\" width=\"250\"\u003e |\n\n### Implementation Hue Ring-Diamond HSL and ones with Ring Selectors\n\n```\nColorPickerRingRectHSL(\n  modifier: Modifier = Modifier,\n  initialColor: Color,\n  ringOuterRadiusFraction: Float = .9f,\n  ringInnerRadiusFraction: Float = .6f,\n  ringBackgroundColor: Color = Color.Transparent,\n  ringBorderStrokeColor: Color = Color.Black,\n  ringBorderStrokeWidth: Dp = 4.dp,\n  selectionRadius: Dp = 8.dp,\n  onColorChange: (Color) -\u003e Unit\n) \n```\n\nColorPicker with `SelectorRingHue` hue selector and `SelectorRectSaturationLightnessHSL`  saturation\nlightness Selector that uses [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) color model as base.\nThis color picker has tabs section that can be changed between HSL, HSV and RGB color models and\ncolor can be set using `CompositeSliderPanel` which contains sliders for each color models.\n\n* **initialColor** color that is passed to this picker initially.\n* **ringOuterRadiusFraction** outer radius of `SelectorRingHue`.\n* **ringInnerRadiusFraction** inner radius of `SelectorRingHue`.\n* **ringBackgroundColor** background from center to inner radius of `SelectorRingHue`.\n* **ringBorderStrokeColor** stroke color for drawing borders around inner or outer radius.\n* **ringBorderStrokeWidth** stroke width of borders.\n* **selectionRadius radius** of white and black circle selector.\n* **onColorChange** callback that is triggered when `Color` is changed\n  using `SelectorRingHue` `SelectorDiamondSaturationLightnessHSL` or `CompositeSliderPanel`\n\n### Implementation for other Color Pickers\n\n```\nColorPickerCircleValueHSV(\n    modifier: Modifier = Modifier,\n    selectionRadius: Dp = 8.dp,\n    initialColor: Color,\n    onColorChange: (Color) -\u003e Unit\n)\n```\n\n* **selectionRadius radius** of white and black circle selector.\n* **initialColor** color that is passed to this picker initially.\n* **onColorChange** callback that is triggered when `Color` is changed\n\n## Gradient Color Pickers\n\n| Hue Ring-Diamond HSL | Hue Ring-Diamond HSL2 | Hue- Ring-Rect HSL | Hue Ring-Rect HSV|\n| ----------|-----------| -----------| -----------|\n| \u003cimg src=\"./screenshots/colorpicker/cp_gradient_diamond_hsl.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_gradient_diamond_hsl2.png\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorpicker/cp_gradient_rect_hsl.png\" width=\"250\"\u003e |  \u003cimg src=\"./screenshots/colorpicker/cp_gradient_rect_hsv.png\" width=\"250\"\u003e |\n\n### Implementation\n\n```\nColorPickerGradientRingDiamondHSL(\n    modifier: Modifier = Modifier,\n    initialBrushColor: BrushColor,\n    gradientColorState: GradientColorState = rememberGradientColorState(),\n    ringOuterRadiusFraction: Float = .9f,\n    ringInnerRadiusFraction: Float = .6f,\n    ringBackgroundColor: Color = Color.Black,\n    ringBorderStrokeColor: Color = Color.Black,\n    ringBorderStrokeWidth: Dp = 4.dp,\n    selectionRadius: Dp = 8.dp,\n    onBrushColorChange: (BrushColor) -\u003e Unit\n)\n```\n\nGradients in Compose might require **Size**, Offset, or radius based on Linear, Radial, or Sweep\ngradient is implemented.\n\nA `GradientColorState` should be provided to this picker that hold **brush**, **color** and other\nmeta-data about the gradient or color. When there is no size provided you won't be able to choose\nlinear gradient with start end offset, angle rotation still available, or other gradients.\n\n```\n@Composable\nfun rememberGradientColorState(\n    color: Color = Color.Unspecified,\n    size: DpSize = DpSize.Zero\n): GradientColorState {\n\n    val density = LocalDensity.current\n\n    return remember {\n\n        val sizePx = if (size == DpSize.Zero) {\n            Size.Zero\n        } else {\n            with(density) {\n                Size(\n                    size.width.toPx(),\n                    size.height.toPx()\n                )\n            }\n        }\n        GradientColorState(color, sizePx)\n    }\n}\n```\n\nSet size of your container that you wish to display gradients in and pass it\n\n```\nval size = DpSize(150.dp, 100.dp)\n\nand initial color to be displayed on picker\nval gradientColorState = rememberGradientColorState(\n    color = currentBrushColor.color,\n    size = size\n)\n```\n\n`BrushColor` class is a color and brush wrapper class that is returned from gradient pickers in **\nonChange** callback instead of **Color**\n\n```\n/**\n * Data class that contains [Brush] and [Color] and can return either based on user selection.\n */\ndata class BrushColor(\n    var color: Color = Color.Unspecified,\n    var brush: Brush? = null\n) {\n    /**\n     * [Brush] that is not **null** [brush] property or [SolidColor] that is not nullable and\n     * contains [color] property as [SolidColor.value]\n     */\n    val activeBrush: Brush\n        get() = brush ?: solidColor\n\n    /**\n     * [SolidColor] is a [Brush] that\n     * wraps [color] property that is used for [activeBrush] if [brush] property is **null**\n     */\n    val solidColor = SolidColor(color)\n}\n```\n\n## Demos\n\n* `SaturationSelectorDemo`  different type of Hue/Saturation/Value/Lightness Selectors\n* `GradientSelection`  select gradient with varying properties such as tile mode, angle, size, or\n  type, colors and color stops\n* `GradientAngleDeme` gradient rotation with `GradientOffset` objects.\n* `HSVHSLGradientDemo` various types of gradients for creating pickers\n* `ColorfulSliderDemo` Sliders that can be used with different type of options with different\n  Selectors and Pickers\n\n| Selectors      | Gradient Selection   |Gradient Angle   | HSV/HSL Gradients| Colorful Sliders |\n| ----------|-----------|-----------| -----------| -----------|\n| \u003cimg src=\"./screenshots/saturation.gif\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/gradient_selection.gif\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/gradient_angle.gif\" width=\"250\"\u003e |  \u003cimg src=\"./screenshots/hsv_hsl_gradient.gif\" width=\"250\"\u003e | \u003cimg src=\"./screenshots/colorful_sliders.gif\" width=\"250\"\u003e |\n\n## Completed:\n\n- [x] Add Hue Picker Wheel for selecting Hue\n- [x] Add Saturation Rectangle for selecting Saturation and Lightness\n- [x] Add Saturation Diamond for selecting Saturation and Lightness\n- [x] Add Composable to display previous and current color\n- [x] Fix Saturation Diamond color display for HSL\n- [x] Add colorful Sliders to have more stylish sliders\n- [x] Add gradient rotation option(GradientOffset)\n- [x] Add HSV-HSL gradient demo\n- [x] Add gradient rotation demo\n- [x] Add checker Composable/Modifier that draws checker pattern behind to display alpha\n- [x] Add console with interoperability between HSV, HSL and RGB(Conversion between color models)\n- [x] Add Rectangle Hue+Saturation/Value/Lightness HSV/HSL Selectors\n- [x] Add Circle Hue Saturation Selector\n- [x] Add Composable to display colors in HEX and change color using TextField\n- [x] Add option to display colors in a dialog\n- [x] Add gradient color selection with percentage stops, linear, radial and sweep options\n- [x] Add gradient selection demo\n- [x] Add color detection from screen demo\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-color-picker-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmarttoolfactory%2Fcompose-color-picker-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-color-picker-bundle/lists"}