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:
http://www.degraeve.org/cgi-bin/color-palette.cgi?url=http://url.to.your.image


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

<colorpalette>
<imageurl>http://www.degraeve.com/images/beach.jpg</imageurl>
<status>success</status>
<message>color palette created successfully</message>
<dullcolors>
<color>304035</color>
<
color>6B9FA3</color>
<
color>90AEAD</color>
<
color>B1C5CB</color>
<
color
>43729C</color>
</dullcolors>
<vibrantcolors>


<
color>285135</color>
<color>40C2CC</color>
<color>8EDAD6</color>
<color>BEEEFE</color>
<color>005AC3</color>
</vibrantcolors>
</colorpalette>
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
}else{
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