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!

This site uses cookies. Some are essential to make our site work; others help us improve the user experience. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn more.