====== Color Picker ====== Dialog selections are discussed below the image. For navigation to an item, make a selection in the Color Picker image. {{imapmarkers>:ui:ui-color_picker-v4.webp?300|Color Picker utility}} [[:|ID1|Default: Offers standard colors@21,88,121,119]] [[:|ID2|Custom Manual color adjustments below@21,124,121,159]] [[:|ID3|HEX number: 8 character format. Input directly or use the HSVA to automatically generate@150,82,278,166]] [[:|ID4|Hue: Pick the base color here@20,165,277,215]] [[:|ID5|Saturation: Intensity (0 no color) (100 full) - creates shades of color@20,216,277,257]] [[:|ID6|Value: Brightness with 100 as full@21,259,277,301]] [[:|ID7|Alpha: Transparency (0 full) (100 solid)@21,303,277,345]] [[:|ID8|Recent Color Palette: Previous colors (most recent 1st)@21,347,277,388]] [[:|ID9|Cancel: USE BROWSER L-TO-R SWIPE or LEFT SIDEBAR VISIT PAGES TO RETURN TO THE PRIOR PAGE@169,409,227,433]] [[:|ID10|OK: USE BROWSER L-TO-R SWIPE or LEFT SIDEBAR VISIT PAGES TO RETURN TO THE PRIOR PAGE@231,409,281,432]] {{cfg>}} { } {{**Color Picker dialog. There are no clickable selections above. Review the descriptions below, and then to navigate, use the browser left-to-right swipe or left sidebar to visit pages to return to the prior page** ===== 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. wrap hide> ===== Hidden Index Anchors ===== {{page>site:site-footer-comment_feedback_block}}