SassyColours: A Colour Palette Generator for Sass!

View SassyColours here: http://chrisasher.com/sassycolours/

Get SassyColours at GitHub: https://github.com/chrisasher/sassycolours

Over the last couple of weeks I have been spending a fair bit of spare time learning about colours. Colour palettes and good colour schemes are important for websites, as they really create the mood for the content and can subconciously set the user expectation regarding product or content quality. I know I can’t talk right now about that because of my current theme, but I am about to design a new one from scratch rather than use a pre built theme.

This brings me to the build.  I am not great with photoshop as a starting point in my workflow. I like to get creative with code.  Being new to Sass, I decided I am going to want to learn how to use it better than simply nesting css and using variables.  I wondered what I could do with colours and how I would go about setting my colour variables up. Then I wondered if there was anything for Sass that would help me with that.

After a bit of a search, I came up with nothing, so I figured, why not make my own Sass colour palette generator?? And the wrodpress theme was on hold, and the journey into Sass colours began.

I started with the rgba() function in sass. after some twaeks, fails and daunting maths, i realized that colour palettes are from colour wheels and that I would need to use the hsl() functions.  This made life much easier.

Anyway, to cut a long story short, I created SassyColours – it works for almost all colours but might do with some tweaking later down the line. If anyone wants to contribute, please feel free. Check out the example page, and get it on GitHub.

3 Comments

  1. jre · June 25, 2014 Reply

    Sometimes I put an image in the palette generator and I am like “… where in the world did you get those colors from”

  2. Luis Betancourt · November 29, 2015 Reply

    Thank you so much for making this. This has proven to be soooo useful.

Leave a Reply