Dynamic Colour Schemes

Submitted by bas on Mon, 05/08/2013 - 00:22

This website looks slightly different than it did yesterday. As a proof of concept I’ve made some changes to the header image and colour scheme. The very basic outline of the Code Culture logo allows it to be overlaid on any image (that isn’t too white). I’ve created a custom Drupal module which extracts a colour palette from any uploaded image. The 5 selected colors need to be distinct enough to form a palette. With some colour adaptations these 5 selected colours are used for generic things such as the breadcrumbs, link colours, and the striped background. This background, by the way, is also dynamically generated. Integrate this with the dynamic background module and I can set a header image and colour scheme for the site globally, specific sections of the site or even each page individually. While I was tweaking the layout I’ve made some changes to improve rendering on Retina (or high DPI) displays. This includes high resolution image styles, and replacement of background images by CSS3 box-shadows and linear gradients. As always there are some drawbacks to this however. IE9 support and older is sketchy or absent. Sorry to all you Internet Explorer users. Otherwise it seems quite robust and I’m quite content about the results. Feel free to leave comments. Current header imagery used was created by Simon C Page.

Comments

Submitted by Sokratis (not verified) on Sun, 15/12/2013 - 17:58

Hi,
could you share with the community your module that extracts the Colour pallete from an image?
thanks

Submitted by bas on Mon, 16/12/2013 - 11:01
bas's picture

Hi Sokratis, I've added the module as a sandbox project: https://drupal.org/sandbox/basvredeling/2157379

There's no readme, and the code need some cleaning up for generic use. But it should provide a nice starting point for your project.

Add new comment