===== Resource: Color Picker Utility =====

The Color Picker will be available for as an option selection when working with
  * Grapic
    * Text
    * Image
    * Icon pack
    * Shadow
    * Shape
    * Dynamic image
    * Background
    * Filter

The utility will appear, unchanged, as shown below in each of these occurrences. 

==== Basic Use ====
    * It is easy, and very basic, for interaction to be solely visual. That is ... tap the gradient color block {{mdi>numeric-1-circle-outline?20&align=center}}, drag to change the hues {{mdi>numeric-2-circle-outline?20&align=center}}, and use the "slider" to choose a level of transparency {{mdi>numeric-3-circle-outline?20&align=center}}. The ARGB dialog {{mdi>numeric-5-circle-outline?20&align=center}} will automatically reference the selection's //hex number// accurately.  Then click "OK" {{mdi>numeric-7-circle-outline?20&align=center}} to select the color and "OK" to confirm and advance. 

^  Color Picker Utility  ^  Element Descriptions  ^
| {{:ui:ui-resources-color_picker_indexed.webp?direct&400|Color Picker}} | {{:ui:ui-resources-color_picker-index.webp?direct&500|Index}} |

==== Advanced Use ====
Total Launcher's Color Picker shows ARGB hex value by using a slider or ... by direct entry of a value into the ARGB dialog , pinpoint accuracy will be achieved. To learn more ++++click here|

To break down the ARGB value:
  * **A** - Alpha channel (AA######)
  * **R** - Red channel (##RR####) 
  * **G** - Green channel (####GG##)
  * **B** - Blue channel (######BB)
=== External sources ===
  * Frequently a reference is made to Alpha levels as a percentage. This cheat chart below shows how to make any Color Picker ARGB value show the Alpha channel by changing the "A" of ARGB to an Alpha value which is frequently expressed as a percentage while leaving the RGB portion as default.
  * If alpha is expressed as an actual number, such as 77, that number represents its position within the 0–255 range. The transparency percentage is 77/255, or about 30%. This is the simplest way to understand and set alpha levels when using ARGB values in Total Launcher’s Color Picker
The result, as seen in the diagram below, shows opaque to transparent view.

<WRAP>
{{  :ui:ui-color-hex-alpha_values.webp?150}}
</WRAP>
^  Sample Color Showing\\ Alpha Percentages  ^  Alpha Cheat Sheet\\ Hex: FB00FA37\\ {{:ui:ui-color-hex-alpha_values-base_fb00fa37.webp?50}}  ^
|  Alpha  |  Transparency %  |  Description  |
|  FF  |  100% opaque  |  Solid  |
|  E6  |  90%  |   ::: |
|  CC  |  80%  |  Solid  |
|  B3  |  70%  |  :::  |
|  99  |  60%  |  :::  |
|  80  |  50%  |  Semi-solid  |
|  66  |  40%  |  :::  |
|  4D  |  30%  |  Medium  |
|  33  |  20%  |  Light  |
|  1A  |  10%  |  Very light  |
|  00  |  0% transparent  |

=== How to Pin Point Specific ARGB Colors for Total Launcher's Color Picker ===
There are many methods available, but two are offered here for their easy of use:
  - Digital image is available
    * With a file, the website for the imaging program {{https://www.canva.com/colors/color-palette-generator/|Canva}} offers image import and color palette ideas. An example of Total Launcher's logo imported to that page is ++here|{{:ui:ui-resource-color_picker-canva_tl_logo.webp?direct&400}}++
  - Non-digital image (photo, magazine, device screen, etc.)
    * This source does require an Android app: [[https://play.google.com/store/apps/details?id=gmikhail.colorpicker&pcampaignid=web_share|Color Picker by Mikhail Gribanov]] which is available on the Google Play Store.
++++