Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Calculate color-nuances

Status
Not open for further replies.

BennySHS

Programmer
Mar 15, 2005
32
DE
Hi there!

I know my question is not a javascript-question, but I hope one of you guys made something similar that could help me.

What I want to do:
The users on my site has the ability to select their own colors. But they can't select the the colors for every element. Some elemtns should get a very bright nuance of a specific color. i.e. a bright nuance of the color #000099.

I have no idea how to calculate something like this, can somebody give me a hint ?
Thx in advance,
greets,
ben
 
I think what you're going to need is a subroutine that converts RGB values to HSV and back. Once you get the color in RGB, convert it to HSV, adjust the saturation and/or value, then convert it back to RGB. I have such a function somewhere (in PERL), or you could search google for one.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Hi tsdragon,

thx a lot for your fast reply.
I guess that was the trigger for me, can't be hard to find some functions for this job and the rest should be easy.
Thx !
greets ben
 
If somebody is interested in such a function in php:

<?

/**
* Convert a hex colour string into an rgb array.
*
* Handles colour string in the following formats:
*
* o #44FF55
* o 4FF55
* o #4F5
* o 4F5
*
* @return array
* @param string $hex
* @access public
*/
function hex2rgb($hex)
{
$hex = @preg_replace('/^#/', '', $hex);
if (strlen($hex) == 3) {
$v = explode(':', chunk_split($hex, 1, ':'));
return array(16 * hexdec($v[0]) + hexdec($v[0]), 16 * hexdec($v[1]) + hexdec($v[1]), 16 * hexdec($v[2]) + hexdec($v[2]));
} else {
$v = explode(':', chunk_split($hex, 2, ':'));
return array(hexdec($v[0]), hexdec($v[1]), hexdec($v[2]));
}
}

/**
* Convert an rgb array into a hex colour string.
*
* Handles colour string in the following formats:
*
* o #44FF55
* o 4FF55
* o #4F5
* o 4F5
*
* @return array
* @param string $hex
* @access public
*/
function rgb2hex($rgb, $adHash = true)
{
return sprintf("%s%02X%02X%02X", ($adHash ? '#' : ''), $rgb[0], $rgb[1], $rgb[2]);
}


/**
* Convert an RGB array into HLS colour space.
*
* Expects array(r, g, b) where r, g, b in [0,255]. The HLS array is
* returned as array(h, l, s) where h is in [0,360], l and s in [0,1].
*
* Function adapted from 'Computer Graphics: Principles and Practice',
* by Foley, van Dam, Feiner and Hughes. Chapter 13; Achromatic and
* Colored Light.
*
* @return array
* @param array $rgb
* @access public
*/
function rgb2hls($rgb)
{
for ($c=0; $c<3; $c++) {
$rgb[$c] = $rgb[$c] / 255;
}

$hls = array(0, 0, 0);
$max = max($rgb);
$min = min($rgb);

$hls[1] = ($max + $min) / 2;
if ($max == $min) {
$hls[0] = null;
$hls[2] = 0;
} else {
$delta = $max - $min;
$hls[2] = ($hls[1] <= 0.5) ? ($delta / ($max + $min)) : ($delta / (2 - $delta));

if ($rgb[0] == $max) {
$hls[0] = ($rgb[1] - $rgb[2]) / $delta;
} else if ($rgb[1] == $max) {
$hls[0] = 2 + ($rgb[2] - $rgb[0]) / $delta;
} else {
$hls[0] = 4 + ($rgb[0] - $rgb[1]) / $delta;
}

$hls[0] *= 60;
if ($hls[0] < 0) {
$hls[0] += 360;
}
if ($hls[0] > 360) {
$hls[0] -= 360;
}
}
ksort($hls);
return $hls;
}



/**
* Convert HLS colour space array to RGB colour space.
*
* Expects HLS array as array(h, l, s) where h in [0,360], l and s each
* in [0,1]. Returns array(r, g, b) where r, g, and b each in [0, 255]
*
* Function adapted from 'Computer Graphics: Principles and Practice',
* by Foley, van Dam, Feiner and Hughes. Chapter 13; Achromatic and
* Colored Light.
*
* @return array
* @param array $hls
* @access public
*/
function hls2rgb($hls)
{
$rgb = array(0, 0, 0);

$m2 = ($hls[1] <= 0.5) ? ($hls[1] * (1 + $hls[2])) : ($hls[1] + $hls[2] * (1 - $hls[1]));
$m1 = 2 * $hls[1] - $m2;

if (!$hls[2]) {
if ($hls[0] === null) {
$rgb[0] = $rgb[1] = $rgb[2] = $hls[1];
} else {
return false;
}
} else {
$rgb[0] = _hVal($m1, $m2, $hls[0] + 120);
$rgb[1] = _hVal($m1, $m2, $hls[0]);
$rgb[2] = _hVal($m1, $m2, $hls[0] - 120);
}

for ($c=0; $c<3; $c++) {
$rgb[$c] = round($rgb[$c] * 255);
}
return $rgb;
}

/**
* Hue value checker for HSL colour space routine.
*
* @return float
* @param float $n1
* @param float $n2
* @param float $h
* @access private
* @see Image::hls2rgb()
*/
function _hVal($n1, $n2, $h)
{
if ($h > 360) {
$h -= 360;
} else if ($h < 0) {
$h += 360;
}

if ($h < 60) {
return $n1 + ($n2 - $n1) * $h / 60;
} else if ($h < 180) {
return $n2;
} else if ($h < 240) {
return $n1 + ($n2 - $n1) * (240 - $h) / 60;
} else {
return $n1;
}
}


/*
Funktion zum erstellen einer Farbnuance einer HEX-Farbe
@return string
@param string $color
@access private
*/

function create_nuance($color)
{
// Hex-Farbe in RGB und RGB in HSV umwandeln
$hsvcolor = rgb2hls(hex2rgb($color));

// Satuartion der Farbe erhöhen
#$hsvcolor[1] = $hsvcolor[1]+0.3;

while ($hsvcolor[1] < 0.90)
{
$hsvcolor[1] += 0.01;
}

// HSV zurück nach RGB wandeln und RGB zurück nach GEX
return rgb2hex(hls2rgb($hsvcolor));
}

?>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top