====== 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 you modify color properties for interface elements, including: * Graphic * Text * Image * Icon pack * Shadow * Shape * Dynamic image * Background * Filter The utility appears identical across these occurrences, ensuring a unified design workflow throughout the launcher. **► Color Picker Utility** {{:ui:ui-color_picker-v4.webp?direct&300|Total Launcher v4 Color Picker Utility}} The **Total Launcher Color Picker utility** facilitates selecting and customizing hexadecimal codes for various elements, including graphics, text, images, shapes, and backgrounds. With the release of **Total Launcher v4.0**, the interface introduces a precise **HSV (Hue, Saturation, Value)** selector with **Alpha transparency control**, completely replacing the legacy ARGB wheel system. This guide covers basic use, hex breakdown, and color matching workflows. ===== Basic Use ===== Interaction can be performed visually using the interactive sliders or by direct hexadecimal entry. Adjusting the HSV sliders automatically updates the displayed 8-character hex code in real time. ===== Interface Elements ===== * **Mode Selection:** - Radio buttons to choose between: * **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. * **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). * **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). * **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. * **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**: Discard the selection. * **OK**: Confirm the selection. ===== Optimal Workflow for Real Use ===== - Iinitial adjustments should **bypass the Hue slider** - Advance the **Value slider** to 100% (restores full illumination) - Advance the **Saturation slider** to 100% (restores 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. For more explanation of alpha hex and percentages, ++++click here| ===== Primer For Alpha HEX and Percentages ===== The Color Picker displays the exact value using an 8-character hexadecimal format. Pinpoint accuracy can be achieved by directly entering a specific value into the input box. 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 a transition from opaque to transparent. {{ :ui:ui-color-hex-alpha_values.webp?150}} ^ 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 Pinpoint Specific Colors for Total Launcher's Color Picker Utility ===== There are many methods available, but two are offered here for their ease of use: - 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.): * 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. {{page>site:site-footer-comment_feedback_block}}