Why feature math colours?
We feature math colours, applied to the copy that's presented over the hero images at the top of our site (when viewed on larger devices and desktops), as it allows us to show some original thinking, problem solving and use of technology to cut out work.
And it allowed us to include a photo of a cat.
What is math colours?
Math colours is a feature we developed to dynamically choose hue and brightness for text based on the image it overlays.
Each images' text is dynamically styled to provide appealing, complimentary colours and effective, readable contrasts.
This automatic colour adaption is an innovative and original way to help a publisher who wants to drop in images and edit overlaying copy but doesn't want to go back and forth with a web designer.
The copy is real text that Google can accurately and easily index rather than the monolithic approach of having text as part of an image.
Add a great CMF to automatic colour adaption and you have a good solution for this albeit slightly niche requirement.
Here's how the editor sees the steps in the CMF, and the result.
How is it achieved
Two jQuery plugins, adaptive-backgrounds.js (Brian Gonzalez) and alterColor.js (luqmaan) do the heavy lifting, we then developed some custom jQuery, designed some style rules that worked with most hue and brightness levels and also designed a baseline style for the text presentation that the jQuery code augments.