Reflections on color

What's with Red, Yellow, Green, Blue as the 4 colors of most game pieces?

Red, Yellow, and Blue are the three primary colors of paint. Primary meaning that all other colors are derived from these colors, and the three primary colors are not comprised of other colors.

Green, of course, is made of Yellow and Blue. However, Green is one of the primary colors of *light*. Perhaps you've heard of RGB? Red, Green, Blue? ... In light, Green is a primary color. LCD screens use red, green, and blue colors mixed in various intensities to make all the colors you see on a screen.

Are there secondary colors? Yes. Secondary colors of paint are Orange, Green, and Purple. These are obtained by mixing equal parts Red and Yellow, Blue and Yellow, and Red and Blue, respectively.

Have you heard of CMYK? That's Cyan, Magenta, Yellow, and Black. While these are ink/paint colors, the colors themselves are secondary colors of light: equal intensities of Green and Blue, Blue and Red, and Green and Red, respectively for the colors.

What is interesting is that Cyan is "kinda" blue, Magenta is "kinda" red, and Yellow is ... yellow, hence we get to mixing "light" colors to make "pigment".

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.