Color

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.

Synchronized swatches

Non-sync’d swatch

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.