Page 1 of 1

Set a color for a given time of the year

Posted: Mon Oct 11, 2010 8:12 am
by Bricedre
Hi everybody, I'm a French PHP developper,I recently started working on a website and I was just finishing the layout when a beautiful idea came to my mind. What about a color-changing layout (header jpg, borders of the body and text) according to the time of the year, following this schematic :
Image

Thus affecting the mood of the website. The best way, IMO, to do so would be to select 2 shades of color, a dark and a light one. The light one would affect the hue of images and borders. The main titles would be in light, the sub titles in the dark one.

Could you steer me towards a good way to code this thing, if there is so ??

Bye bye,
Bricedre !

Re: Set a color for a given time of the year

Posted: Mon Oct 11, 2010 10:19 am
by AbraCadaver
Several ways. You can use month numbers just as easily, but here is an example:

Code: Select all

$colors = array(
				'January' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								  ),
		  		'February' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								  ),
				'March' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'April' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'May' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'June' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'July' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'August' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'September' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'October' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'November' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								),
				'December' => array('light' => '#FFFFFF',
						'dark'  => '#000000'
								)
			   );
			   
$month = date('F');

$light = $colors[$month]['light'];
$dark  = $colors[$month]['dark'];

Re: Set a color for a given time of the year

Posted: Mon Oct 11, 2010 6:28 pm
by Bricedre
Thanks very much, I try it right now ^^

PS : What if I want it to be daily-based (different tone each day), and how can I change the hue of my header image ?Please.

Re: Set a color for a given time of the year

Posted: Mon Oct 11, 2010 11:51 pm
by requinix
An interesting idea. Wonder if it's been done before.

HSV (or HSL) would be easiest for the initial math, but the numbers would probably have to be converted to RGB.
That January's blue is HSV 240,100%,100%. The H increases and wraps around 360->0 until getting back to 240. The equation to calculate the H according to the day of the year would be

Code: Select all

H(start, dayofyear, daysinyear) = (start + 360 * (dayofyear - 1) / daysinyear) mod 360
PHPized would be

Code: Select all

$H = fmod($start + 360 * date("z") / (365 + date("L")), 360.0);
S and V would be fixed according to whether you wanted a highlight, shadow, midtone, etc.

While I'm at it,

Code: Select all

function hsv2rgb($h, $s, $v) {
    $c = $v * $s;
    $h1 = fmod($h, 360.0) / 60;
    $x = $c * (1 - abs(fmod($h1, 2.0) - 1));
    $m = $v - $c;

    $lookup = array(
        array($c, $x, 0),
        array($x, $c, 0),
        array(0, $c, $x),
        array(0, $x, $c),
        array($x, 0, $c),
        array($c, 0, $x)
    );
    list($r, $g, $b) = $lookup[floor($h1)];
    $r = round(255 * ($r + $m)); $g = round(255 * ($g + $m)); $b = round(255 * ($b + $m));
    return array(
        0 => ($r << 16) + ($g << 8) + $b,
        "r" => $r, "g" => $g, "b" => $b,
        "hex" => sprintf("%02X%02X%02X", $r, $g, $b),
        "rgb" => sprintf("rgb(%u, %u, %u)", $r, $g, $b)
    );
}
Oct 11's color is this light greenish/blueish color, which matches up with the chart you posted.

Re: Set a color for a given time of the year

Posted: Tue Oct 12, 2010 12:13 am
by Bricedre
Brilliant, thank you very much for the converter and the piece of code :D

Do you know, now, how to modify an image in php ? brightness, hue, saturation, even contrast ??

EDIT : Found the perfect script here ;)
http://stackoverflow.com/questions/1890 ... gd-library

I'll Try this tomorrow, well this afternoon ^^