The Color Tool
The Color Tool, found in the Skin Editor, lets you quickly change the colors of a skin or a selection of elements.
The Color Tool is accessed by clicking on the Color Tool button in the Skin Editor’s Toolbar. This opens the Change Colors dialog.
The colors or color values are grouped together. For example, all element properties that use the color black at full opacity will fall under the same grouping. While an element property that uses black but with transparency will fall under a different grouping.
You can also use the Color Tool to view the current color scheme of a skin. If you don’t select anything in the skin and open the tool, you’ll see something similar to the image above which is showing the color scheme of the Feather Orb skin.
Click on the black disclosure triangles to see which element properties use which colors. A common color in the silhouette skin is black. So, under the black color heading you’ll see a list of element properties using that color.
The Color Tool collects the colorizable properties of the skin’s elements: the background and border colors of Rectangle, Text, Scroll Area, External Image, and Seekbar elements; the text color of Text elements; the scroll bar colors of Scroll Area elements; the border and radar colors of Map elements; the playback, download, and playhead colors of Seekbar elements; and the fill, stroke, stop, flood, and lighting colors of SVG images.
The Color Tool also shows you colors used by non-elements, or parts of the skin that aren’t listed in the tree. For example, the color change created in a Logic Block.
Skin Colors
The colors appear in two columns: Original Color shows the color as it currently is in the skin, and New Color shows the color it will be changed to. To edit a color, double-click its color bar in the New Color column to open the color picker, where you can also change the color’s opacity. Hover over a color bar to see its color value.
Click a color bar to select it; Command-click (macOS) or Ctrl+click (Windows) to select multiple colors. Selecting the topmost bar of a color group selects all element properties in that group. Click an empty area of the list to deselect all colors.
Right-click a color bar to open a shortcut menu with Copy Color and Paste Color commands (Paste Color is available when the clipboard contains a valid color) and the commands for exposing colors.
Click Apply to apply the color changes to the skin, or Cancel to discard all changes, including changes to exposed colors. If the skin, or the current selection of skin elements, has no colorizable properties, a warning appears instead and the Color Tool doesn’t open.
Transform Colors
Select one or more colors to enable the Transform Colors sliders. Drag the Hue (-180 to 180), Saturation (-100 to 100), or Lightness (-100 to 100) sliders to shift all selected colors at once. The adjustment is applied relative to each selected color, so similar colors keep their distance to each other.
Exposing Colors
Colors can be exposed so that they can later be changed in the Output panel’s skin configuration, without opening the Skin Editor. Right-click a color bar and choose Expose Color As to assign the color to an existing exposed color, or select New to create a new one by entering a title. Select With Alpha if the color’s opacity should also be editable in the skin configuration.
The title of an exposed color is displayed on its color bar. An asterisk (*) after the title means the color is exposed for only some of the elements that use it.
Right-click an exposed color and choose Do not expose color to remove the exposure, or Rename exposed color to change its title.
Exposed Colors in Lottie Animations
A Lottie animation can take a color from an
exposed color. In the Lottie file’s JSON, write {<ggColor['Title']>} in place
of a color value, where Title is the exact title of the exposed color, with
the same upper and lower case. When you generate the output, each of these
placeholders is replaced with that exposed color as it is set in the output’s
skin configuration, so the animation follows the skin’s colors.
If you change that exposed color in the Color Tool and click Apply, the new color is written into the Lottie element itself and replaces the placeholder. From then on the animation keeps that color, whatever the skin configuration says.