Colour schemes and styles

I’ve learned the hard way that you must chose your colours, and font styles prior to planning a document.
That being said is it possible to save a colour scheme, and font style for another website, or do you basically start again.
Saving some of the colour arrangements and font styles would be very handy for a brother, or sister site. Many Thanks!


@Woodrow, Yes that would be nice! :slight_smile:

I would love to see that we could set up the site’s styles (aka colours, font(s), and even buttons) as per document, but I think saving the global styles and using it for other projects isn’t that straight forward? But I could be wrong…

1 Like

With Sparkle we all learn the hard way the importance of setting styles and colors at the beginning.

I would love to be able to label the colors in the swatches as I keep forgetting where I used them.

1 Like

I usually use the Apple Colour Picker to create website-specific swatches. These can then easily be transferred to a new Sparkle project. Another quick option would be to use the original project as a template for the new project. Just open the old project and immediately use the Save As option to create the new project. You can then delete or edit the content from the pages of the new project, but your swatches will be the same. Here is an example of a website-specific colour swatch in Apple colour picker:


I use the Apple Colour Picker as @francbrowne. As he shows, create a name for your color palette and then add colors. I change the name of each color to reflect where I’m using them, such as border and title.

Using the Apple Colour Picker allows you to take the Sparkle project colours into other apps to create elements such as graphics to bring back into Sparkle. Many times I create my Colour palette before I even open Sparkle. Then my palette is ready for when I Start my Sparkle project.

This approach is simple, clean, flexible, and can be transferred between pages and sites.


Another + for Apple Colour Picker.

Adobe used to have a web-based app that showcased various colour combinations and many years ago I used to use this a lot. Just tried to find it again and you might find Adobe Color interesting. The extract theme feature is pretty neat!

If you subscribe to Creative Cloud you can save the palettes, but you’d need to use the Apple Colour Picker to get them into Sparkle.

Very cool Freeway! Thanks.

Another good way to get a colour scheme from an image is to open the image in a good image editing app (I use Pixelmator) With the image open, choose a pixelation filter and adjust until all the colours are separated out. Here is an example.



As can be seen, the image has been split into colours, allowing for the selection of a colour palette with the Apple Colour Picker. Most image editing apps have a pixelation effect option and it’s a great way to create palettes. The screenshot below shows the Pixelate filter as seen in Affinity Photo - it has almost the same range of colours.

Just pick a good, harmonious image to start with that has as its predominant colour the predominant colour you would like to use in your website. The above example shows an image that was selected because I wanted a predominantly blue theme. Apart from giving me several shades of blue, I also have a few contrasting/complimentary colours to choose from.