Blog, PHP

Convert RGB Colour Values to HSV and HSL with PHP

The RGB model of visualising color can be problematic on the web because of the nature in which the values are mixed. Not unlike mixing paints from individual tins, we would have to alter all the quantity of all paints to achieve our desired result. For example, if we have an orange with RGB values of R217 G118 B33 and want to reduce its colourfulness by half to a less saturated orange, we would need to drag RGB sliders to decrease R by 31, increase G by 24, and increase B by 59; not a very effective model when using color pickers on the web.

#D97621 (R217 G118 B33) to #BA845C (R186 G132 B92)

The HSV model was developed in the mid-1970s based upon how colors are organized and conceptualized in human vision in terms of other color-making attributes, such as hue, lightness, and chroma. The model is based on the real-life mixing of black or white pigments to achieve lighter, darker, or less colorful colors. Mixing these pure colors with white produces tints (while reducing saturation) while mixing them with black producing shades. The model permits a single slider to alter color with another for saturation, and one for value (color scale). Most web-based color pickers are based off the model because a flat pallet will permit a user to simply drag their cursor over the screen. They're not perfect: both HSV and HSI trade off perceptual relevance for computation speed.

The HSV and HSL Color Cylinder

The screenshot below shows the orange color noted above in Color Cop .

This article will provide you with the PHP code to convert between RGB and HSV/HSL and back again.

RGB to HSV

<?php

Convert RGB to HSV

Convert RGB Colour Values to HSV and HSL with PHP

http://www.beliefmedia.com/convert-rgb-hsv-hsl-php

function beliefmedia_rgb_to_hsv($r, $g, $b) {

$r = ($r / 255);

$g = ($g / 255);

$b = ($b / 255);

$maxrgb = max($r, $g, $b);

$minrgb = min($r, $g, $b);

$chroma = $maxrgb - $minrgb;

$computedv = 100 * $maxrgb;

if ($chroma == 0)

return array(0, 0, $computedv);

$computeds = 100 * ($chroma / $maxrgb);

switch ($minrgb) {

case $r:

$h = 3 - (($g - $b) / $chroma);

break;

case $b:

$h = 1 - (($r - $g) / $chroma);

break;

default: /* $g == $minrgb */

$h = 5 - (($b - $r) / $chroma);

break;

}

$computedh = 60 * $h;

return array('h'=>$computedh, 's'=>$computeds, 'v'=>$computedv);

}

/* Usage */

$r = '254'; $g = '106'; $b = '20';

echo '

<pre>' . print_r(beliefmedia_rgb_to_hsv($r, $g, $b), true) . '</pre>

HSV to RGB

<?php

Convert HSV to RGB

Convert RGB Colour Values to HSV and HSL with PHP

http://www.beliefmedia.com/convert-rgb-hsv-hsl-php

function beliefmedia_hsv_to_rgb($hue, $sat, $val, $array = false, $format = 'rgb(%d, %d, %d)') {

if ($hue < 0) $hue = 0;

if ($hue > 360) $hue = 360;

if ($sat < 0) $sat = 0;

if ($sat > 100) $sat = 100;

if ($val < 0) $val = 0;

if ($val > 100) $val = 100;

$dS = $sat/100.0;

$dV = $val/100.0;

$dC = $dV*$dS;

$dH = $hue/60.0;

$dT = $dH;

while ($dT >= 2.0) $dT -= 2.0;

$dX = $dC*(1-abs($dT-1));

switch(floor($dH)) {

case 0:

$dR = $dC; $dG = $dX; $dB = 0.0; break;

case 1:

$dR = $dX; $dG = $dC; $dB = 0.0; break;

case 2:

$dR = 0.0; $dG = $dC; $dB = $dX; break;

case 3:

$dR = 0.0; $dG = $dX; $dB = $dC; break;

case 4:

$dR = $dX; $dG = 0.0; $dB = $dC; break;

case 5:

$dR = $dC; $dG = 0.0; $dB = $dX; break;

default:

$dR = 0.0; $dG = 0.0; $dB = 0.0; break;

}

$dM = $dV - $dC;

$dR += $dM; $dG += $dM; $dB += $dM;

$dR *= 255; $dG *= 255; $dB *= 255;

$rgb = ($array) ? array('r'=>round($dR), 'b'=>round($dG), 'g'=>round($dB)) : sprintf($format, round($dR), round($dG), round($dB));

return $rgb;

}

/* Usage */

$h = '21.9574468085'; $s = '92.1568627451'; $v = '100';

// echo beliefmedia_hsv_to_rgb($h, $s, $v);

echo '

<pre>' . print_r(beliefmedia_hsv_to_rgb($h, $s, $v, $array = true), true) . '</pre>

An array returns the RGB values with r, g and b as keys. You may optionally alter the string pattern that is returned by altering $format.

While the HSL model ("L" for lightness) is similar to HSV in terms of the conical or cylindrical model that it is based upon, the outward saturation (from the vertical middle axis) is very different. Wikipedia says it better than me: "Because HSL and HSV are simple transformations of device-dependent RGB models, the physical colors they define depend on the colors of the red, green, and blue primaries of the device or of the particular RGB space, and on the gamma correction used to represent the amounts of those primaries. Each unique RGB device therefore has unique HSL and HSV spaces to accompany it, and numerical HSL or HSV values describe a different color for each basis RGB space."

We're not sure of the original source of the HSI functions. They came to us years ago when a former partner in the business was developing web image software around 2007.

RGB to HSL

<?php

Convert RGB to HSL

Convert RGB Colour Values to HSV and HSL with PHP

http://www.beliefmedia.com/convert-rgb-hsv-hsl-php

function beliefmedia_rgb_to_hsl($r, $g, $b) {

$oldR = $r;

$oldG = $g;

$oldB = $b;

$r /= 255;

$g /= 255;

$b /= 255;

$max = max( $r, $g, $b );

$min = min( $r, $g, $b );

$h; $s;

$l = ( $max + $min ) / 2;

$d = $max - $min;

if( $d == 0 ) {

$h = $s = 0;

} else {

$s = $d / ( 1 - abs( 2 * $l - 1 ) );

switch( $max ) {

case $r:

$h = 60 * fmod( ( ( $g - $b ) / $d ), 6 );

if ($b > $g) {

$h += 360;

}

break;

case $g:

$h = 60 * ( ( $b - $r ) / $d + 2 );

break;

case $b:

$h = 60 * ( ( $r - $g ) / $d + 4 );

break;

}

return array('h' => round($h, 2), 's' => round($s, 2), 'l' => round($l, 2));

}

/* Usage */

$r = '217'; $g = '118'; $b = '33';

// $array = beliefmedia_rgb_to_hsl($r, $g, $b);

echo '

<pre>' . print_r(beliefmedia_rgb_to_hsl($r, $g, $b), true) . '</pre>

HSL to RGB

<?php

Convert HSL to RGB

Convert RGB Colour Values to HSV and HSL with PHP

http://www.internoetics.com/2016/04/13/php-convert-rgb-hsv-hsl/

function beliefmedia_hsl_to_rgb($h, $s, $l, $array = false, $format = 'rgb(%d, %d, %d)') {

$r; $g; $b;

$c = (1 - abs(2 * $l - 1)) * $s;

$x = $c * (1 - abs(fmod( ($h / 60), 2) - 1));

$m = $l - ($c / 2);

switch($h) {

case ($h < 60):

$r = $c; $g = $x; $b = 0;

break;

case ($h < 120):

$r = $x; $g = $c; $b = 0;

break;

case ($h < 180):

$r = 0; $g = $c; $b = $x;

break;

case ($h < 240):

$r = 0; $g = $x; $b = $c;

break;

case ($h < 300):

$r = $x; $g = 0; $b = $c;

break;

default:

$r = $c; $g = 0; $b = $x;

break;

}

$r = floor(($r + $m) * 255);

$g = floor(($g + $m) * 255);

$b = floor(($b + $m) * 255);

$return = ($array) ? array('r' => $r, 'g' => $g, 'b' => $b) : sprintf($format, round($r), round($g), round($b));

return $return;

}

/* Usage */

$h = '27.72'; $s = '0.74'; $l = '0.49';

// echo beliefmedia_hsl_to_rgb($h, $s, $l);

echo '

<pre>' . print_r(beliefmedia_hsl_to_rgb($h, $s, $l, $array = true), true) . '</pre>

The RGB value can be returned as an array or formatted string.

Considerations

All the examples on this page have omitted the pre tags for formatting purposes. The download includes working code.

See also this article: "Convert Colours Between their Hexadecimal and RGB Values with PHP". We have a number of color posts scheduled that'll work with data in various ways; they will all be available via the color tag.

Download

Title: Convert RGB Colour Values to HSV and HSL
Description: Convert RGB Colour Values to HSV and HSL with PHP.
Download • Version 0.2, 1.6K, zip, Category: PHP Code & Snippets

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.