meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
section:section-color_picker [2026/07/29 18:16] – dorepssection:section-color_picker [2026/07/29 18:22] (current) – doreps
Line 1: Line 1:
 ====== Total Launcher Color Picker Guide: HSV & Hex Customization ====== ====== Total Launcher Color Picker Guide: HSV & Hex Customization ======
  
-Mastering the **Total Launcher Color Picker utility** is essential for advanced Android UI customization. This tool becomes available whenever modifying color properties for interface elements, including: +Mastering the **Total Launcher Color Picker utility** is essential for advanced Android UI customization. This tool becomes available whenever modifying color properties for interface **Graphic** objects which include: 
-  * **Graphic** +  * Text 
-    * Text +  * Image 
-    * Image +  * Icon pack 
-    * Icon pack +  * Shadow 
-    * Shadow +  * Shape 
-    * Shape +  * Dynamic image 
-    * Dynamic image +  * Background 
-    * Background +  * Filter
-    * Filter+
  
 The utility appears identical across these occurrences, ensuring a unified design workflow throughout the launcher. The utility appears identical across these occurrences, ensuring a unified design workflow throughout the launcher.
Line 17: Line 16:
 <WRAP column 25%> <WRAP column 25%>
 **► Color Picker Utility** **► Color Picker Utility**
- 
 {{:ui:ui-color_picker-v4.webp?direct&300|Total Launcher v4 Color Picker Utility}} {{:ui:ui-color_picker-v4.webp?direct&300|Total Launcher v4 Color Picker Utility}}
 </WRAP> </WRAP>
Line 31: Line 29:
  
 ===== Interface Elements ===== ===== Interface Elements =====
-  * **Mode Selection:** - Radio buttons to choose between: +  * **Mode Selection:** - Radio buttons to choose between **Default** (standardized colors) and **Custom** (manual adjustments).
-    *  **Default**: Offers standardized colors. +
-    * **Custom**: Enables manual color adjustments to achieve the desired color. +
   * **Hexadecimal Display/Input:** - A highlighted box displaying the current color code in an 8-character format (e.g., ''#FFFFD700''). The first two characters represent the Alpha channel, while the remaining six represent the RGB values. This box allows for direct text input by tapping it.   * **Hexadecimal Display/Input:** - A highlighted box displaying the current color code in an 8-character format (e.g., ''#FFFFD700''). The first two characters represent the Alpha channel, while the remaining six represent the RGB values. This box allows for direct text input by tapping it.
- 
   * **Hue Slider:** - A rainbow-gradient slider used to select the base color tone. Values range numerically.   * **Hue Slider:** - A rainbow-gradient slider used to select the base color tone. Values range numerically.
- 
   * **Saturation Slider:** - Adjusts the intensity or purity of the color, ranging from 0% (grayscale with pigment stripped away) to 100% (full color).   * **Saturation Slider:** - Adjusts the intensity or purity of the color, ranging from 0% (grayscale with pigment stripped away) to 100% (full color).
- 
   * **Value Slider:** - Adjusts the brightness or luminance of the color, ranging from 0% (black) to 100% (full brightness).   * **Value Slider:** - Adjusts the brightness or luminance of the color, ranging from 0% (black) to 100% (full brightness).
- 
   * **Alpha Slider:** - Controls the transparency level, ranging from 0% (fully transparent) to 100% (fully solid and opaque).   * **Alpha Slider:** - Controls the transparency level, ranging from 0% (fully transparent) to 100% (fully solid and opaque).
- 
   * **Recent Colors Palette:** - A horizontal row of circular swatches displaying recently used colors. To copy a color from an existing element, open the Color Picker for that element and select ''OK''. The color will be added to the front of this palette for future access.   * **Recent Colors Palette:** - A horizontal row of circular swatches displaying recently used colors. To copy a color from an existing element, open the Color Picker for that element and select ''OK''. The color will be added to the front of this palette for future access.
-    * **Default mode**: Standardized colors. Swatches with a checkerboard pattern provide immediate visual confirmation that the selection is semi-transparent, guaranteeing that background layers will bleed through. +  * **Checkerboard Swatches (Default Mode):** - Swatches with a checkerboard pattern provide immediate visual confirmation that the selection is semi-transparent, guaranteeing that background layers will bleed through. 
- +  * **Auto-Save (Custom Mode):** - When a custom color is finalized by selecting OK, the utility automatically pushes that exact configuration into the recent row, eliminating the need to repeatedly copy and paste hex codes when matching elements. 
-    * **Custom mode**: When a custom color is finalized by selecting OK, the utility automatically pushes that exact configuration into this row, eliminating the need to repeatedly copy and paste hex codes when matching multiple elements across different interface pages. +  * **Cancel / OK:** - Discard or confirm the selection.
- +
-  * **Cancel**: Discard the selection. +
-  * **OK**: Confirm the selection.+
  
 ===== Optimal Workflow for Real Use ===== ===== Optimal Workflow for Real Use =====
-  - Iinitial adjustments should **bypass the Hue slider** +  * **Step 1:** Bypass the Hue slider entirely during initial adjustments. 
-    - Advance the **Value slider** to 100% (restores full illumination) +  * **Step 2:** Advance the **Value slider** to 100% to restore full illumination. 
-    - Advance the **Saturation slider** to 100% (restores full pigment intensity +  * **Step 3:** Advance the **Saturation slider** to 100% to restore full pigment intensity. 
-  - Allows the user to view the vivid color track **before adjusting** the **Hue slider** or reducing levels to achieve exact pastel, deep tone, or shaded variations.+  * **Step 4:** View the vivid color track before adjusting the **Hue slider** or reducing levels to achieve exact pastel, deep tone, or shaded variations.
  
 For more explanation of alpha hex and percentages, ++++click here| For more explanation of alpha hex and percentages, ++++click here|
Line 69: Line 56:
   * **G** - Green channel (####GG##)   * **G** - Green channel (####GG##)
   * **B** - Blue channel (######BB)   * **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. +=== Understanding Percentages === 
-  * 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+Frequently, a reference is made to Alpha levels as a percentage. The 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 a transition from opaque to transparent. The result, as seen in the diagram below, shows a transition from opaque to transparent.
  
Line 79: Line 69:
 ^  Sample Color Showing\\ Alpha Percentages  ^  Alpha Cheat Sheet\\ Hex: FB00FA37\\ {{:ui:ui-color-hex-alpha_values-base_fb00fa37.webp?50}}  ^ ^  Sample Color Showing\\ Alpha Percentages  ^  Alpha Cheat Sheet\\ Hex: FB00FA37\\ {{:ui:ui-color-hex-alpha_values-base_fb00fa37.webp?50}}  ^
 |  Alpha  |  Transparency %  |  Description  | |  Alpha  |  Transparency %  |  Description  |
-|  FF  |  100% opaque  |  Solid  | +|  FF  |  100%  |  Solid  | 
-|  E6  |  90%  |   ::: |+|  E6  |  90%  |  :::  |
 |  CC  |  80%  |  Solid  | |  CC  |  80%  |  Solid  |
 |  B3  |  70%  |  :::  | |  B3  |  70%  |  :::  |
Line 89: Line 79:
 |  33  |  20%  |  Light  | |  33  |  20%  |  Light  |
 |  1A  |  10%  |  Very light  | |  1A  |  10%  |  Very light  |
-|  00  |  0% transparent  |+|  00  |  0%  |  Transparent  |
 ++++ ++++
  
-===== How to Pinpoint Specific Colors for Total Launcher's Color Picker Utility ===== +===== How to Pinpoint Specific Colors ===== 
-There are many methods available, but two are offered here for their ease of use: +There are many methods available to identify specific hex codes, but these two are the most practical for launcher customization:
-  - If a digital image is available: +
-    * Upload a digital image to a website offering image import and color palette extraction to identify specific codes. {{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}}+++
  
-  - Using a non-digital image (photo, magazine, device screen, etc.): +  * **Extracting from Digital Images:** Upload an image to a website offering color palette extraction (like {{https://www.canva.com/colors/color-palette-generator/|Canva}}). An example of Total Launcher's logo imported to that page is ++here|{{:ui:ui-resource-color_picker-canva_tl_logo.webp?direct&400}}++. 
-    * Utilize a dedicated Android color picker application to extract hexadecimal codes. This 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.+  * **Extracting from Device Screens:** Utilize a dedicated Android application to extract hexadecimal codes directly from your display. [[https://play.google.com/store/apps/details?id=gmikhail.colorpicker&pcampaignid=web_share|Color Picker by Mikhail Gribanov]] is a highly recommended utility available on the Google Play Store.
  
 <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP> <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>
-