Updated for Sparkle 2.2
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 color wheels in Sparkle are synchronized across elements. That is when you change the color value of a color wheel, all elements that use it will change to that color. The exception to this is the “current” color wheel, which is not synchronized.
Synchronized color wheels
Non-sync’d color wheel
Finally the color picker for the box element lets you select a gradient, by setting the two ends of the gradient separately:
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!