Tuesday, April 3, 2007

From a picture, choose a color scheme.

The idea: Based upon a picture, get colors for your site.

This much has been done: http://www.degraeve.com/color-palette/

Augment: Make it automatically change your css Style.
Start with:

Hey Developers:
Want to automate color palette queries? Try out the new color palette generator web service BETA. Get an XML response to requests sent to:

Which converts to .XML as (example)...

<message>color palette created successfully</message>

Augment: Choose some colors that will be working for text (Contrast-Wise). Hey, I get it that you shouldn’t force colors on your visitors. OTOH, this is a really cool effect.

Hmm... searching ... http://snook.ca/technical/colour_contrast/colour.html has an interactive Contrast checker. The nitty gritty:

function updateColours(){
var brightnessThreshold = 125;
var colorThreshold = 500;

var bY=((br.getValue() * 299) + (bg.getValue() * 587) + (bb.getValue() * 114)) / 1000;
var fY=((fr.getValue() * 299) + (fg.getValue() * 587) + (fb.getValue() * 114)) / 1000;
var brightnessDifference = Math.abs(bY-fY);

var colorDifference = (Math.max (fr.getValue(), br.getValue()) - Math.min (fr.getValue(), br.getValue())) +
(Math.max (fg.getValue(), bg.getValue()) - Math.min (fg.getValue(), bg.getValue())) +
(Math.max (fb.getValue(), bb.getValue()) - Math.min (fb.getValue(), bb.getValue()));

document.getElementById("bDiff").value = brightnessDifference;
document.getElementById("cDiff").value = colorDifference;

if ((brightnessDifference >= brightnessThreshold) && (colorDifference >= colorThreshold)) {
document.getElementById("cResult").value = "YES!";
// compliant
}else if ((brightnessDifference >= brightnessThreshold) || (colorDifference >= colorThreshold)){
document.getElementById("cResult").value = "sort of...";
// sort of compliant
document.getElementById("cResult").value = "NO!";
// not compliant "Poor visibility between text and background colors."

Juicy Studio has code to check on the fly. http://juicystudio.com/article/javascript-contrast-class.php

Augment: Mash it all together based upon one picture... from a gallery or based upon an image for a review for a blog/CMS.

I shall come back to this. Essentially, I’d want, based upon the main picture on a page, to be able to change the look for the page based upon that picture, and yet the text be still readable. I’m sure there’s a reason *not* to do this, but until that time, just think of it as a way to change your CMS design on a whim. You don’t even have to show the picture that the color scheme is based upon. All you’d need is an idea... "OOH, I like that picture’s scheme. Will it look good on my site?

I should probably point myself to http://xmljs.sourceforge.net/index.html to parse the xml if I come back to this.

No comments:

Blog Archive