Color Picker

Dialog selections are discussed below the image. To navigate to an item, select it in the [insert] image. If NOT selecting any item and wanting to return to the prior page: swipe right-to-left; use the browser’s ‘back’ arrow, or use the Wiki’s Backlink icon on the right sidebar (mobile: drop-down dialog at the top of the page).

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

• 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.

1. Iinitial adjustments should bypass the Hue slider
   1. Advance the Value slider to 100% (restores full illumination)
   2. Advance the Saturation slider to 100% (restores full pigment intensity
2. 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.

Sample Color Showing Alpha Percentages	Alpha Cheat Sheet Hex: FB00FA37
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

There are many methods available, but two are offered here for their ease of use:

1. If a digital image is available:
   • Upload a digital image to a website offering image import and color palette extraction to identify specific codes. Canva offers image import and color palette ideas. An example of Total Launcher's logo imported to that page is here

1. 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: Color Picker by Mikhail Gribanov, which is available on the Google Play Store.

wrap hide>

</wrap>