Updated for Sparkle 2.6
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Sparkle adopts a unified palette across the entire website, the color picker is a swatch of colors that can be used anywhere a color is needed: text, backgrounds, fills, shadows, borders, etc.
The purpose of the swatches is to help in maintaining color consistency across elements and pages. When the color value of a swatch is changed, all elements using the color in all pages will change.
For example the page background color picker:
The active color swatch has an outline. The Edit button gives access to the whole range of choices. Also, a specific color can be selected by RGB, HSB and HTML hexadecimal values.
If needed the expanded color picker has a system color wheel on the left side below the swatches, to access your system color picker’s palette or to sample an on-screen color.
For the purpose of maintaining a consistent color scheme across the entire site, all swatches in Sparkle are synchronized across elements. That is when you change the color value of a swatch, all elements that use it will change to that color. The exception to this is the “current” swatch, which is not synchronized.
Finally the color picker for the box element lets you select a gradient, by setting the two ends of the gradient separately.