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.