Convert HEX value to HSV

• 

  • mikemikelle07

  • November 4, 2021 at 5:21 am

  Hello everyone.

  I’m using a color picker in a group field and I want to convert HEX value to HSV. I wonder if I can do that. Can somebody help me?

  Thank you.
  Mike
• 

  

  • John Huebner

  • November 4, 2021 at 12:29 pm

  https://stackoverflow.com/questions/1773698/rgb-to-hsv-in-php
• 

  • mikemikelle07

  • November 4, 2021 at 1:21 pm

  Thanks for the anwser. I have already found this, but I wonder how I can pass the attribute of RGB since I want to convert it from the HEX color value.
• 

  

  • John Huebner

  • November 4, 2021 at 1:50 pm

  Sorry, I did not notice that. I guess to use that you first need to convert from hex to RGB

  
  
  		
  	function html2rgb($color) {
  		if (substr($color, 0, 1) == '#') {
  			$color = substr($color, 1);
  		}
  		if (strlen($color) == 6) {
  			list($r, $g, $b) = array(
  				substr($color, 0, 2),
  				substr($color, 2, 2),
  				substr($color, 4, 2)
  			);
  		} elseif (strlen($color) == 6) {
  			list($r, $g, $b) = array(
  				substr($color, 0, 1).substr($color, 0, 1),
  				substr($color, 1, 1).substr($color, 1, 1),
  				substr($color, 2, 1).substr($color, 2, 1)
  			);
  		} else {
  			return false;
  		}
  		$r = hexdec($r);
  		$g = hexdec($g);
  		$b = hexdec($b);
  		return array('r' => $r, 'g' => $g, 'b' => $b);
  	}
  
• 

  • mikemikelle07

  • November 5, 2021 at 4:08 am

  No problem at all.

  I use this part of the code to convert HEX to RGB.

  function getsub_acf_rgb($field, $id) {
  	if ( function_exists('get_sub_field') ) {
  	$hexx = get_sub_field($field, $id);
  	// extra sanity check that we're dealing with the hex flatuicolorpicker
  	// in #NNNNNN format that ACF/WordPress/Iris colorpicker returns
  	if (strlen($hexx) == 7 && substr($hexx,0,1) == '#') {
  	$rr = hexdec(substr($hexx,1,2));
  	$gg = hexdec(substr($hexx,3,2));
  	$bb = hexdec(substr($hexx,5,2));
  	return $rr . ', ' . $gg . ', ' . $bb;
  	}
  	else {
  	// provide a default in an emergency
  	return "128,128,128" ;
  	}
  	}
  	}
  
  	function acsf_rgb($field, $id) {
  	echo getsub_acf_rgb($field, $id);
  	}
  
  function hex2rgb($hex) {
  	$color = str_replace('#','',$hex);
  	$rgb = array(
  	   'r' => hexdec(substr($color,0,2)),
  	   'g' => hexdec(substr($color,2,2)),
  	   'b' => hexdec(substr($color,4,2)),
  	);
  	return $rgb;
   }

  but I wonder how I can pass the value of RGB to HSV
  referral link https://stackoverflow.com/questions/1773698/rgb-to-hsv-in-php?answertab=votes#tab-top
• 

  

  • jarvis

  • November 5, 2021 at 5:13 am

  Doesn’t the colour picker allow you to return the RGBA info in an array?

  Can’t you then use those values in the instance of $R, $G and $B?
• 

  

  • jarvis

  • November 5, 2021 at 6:20 am

  Hi @mikemikelle07

  Add this to your functions:

  
  <?php
  /**
   * Licensed under the terms of the BSD License.
   * (Basically, this means you can do whatever you like with it,
   *   but if you just copy and paste my code into your app, you
   *   should give me a shout-out/credit :)
   */
  function RGBtoHSV($R, $G, $B)    // RGB values:    0-255, 0-255, 0-255
  {                                // HSV values:    0-360, 0-100, 0-100
      // Convert the RGB byte-values to percentages
      $R = ($R / 255);
      $G = ($G / 255);
      $B = ($B / 255);
  
      // Calculate a few basic values, the maximum value of R,G,B, the
      //   minimum value, and the difference of the two (chroma).
      $maxRGB = max($R, $G, $B);
      $minRGB = min($R, $G, $B);
      $chroma = $maxRGB - $minRGB;
  
      // Value (also called Brightness) is the easiest component to calculate,
      //   and is simply the highest value among the R,G,B components.
      // We multiply by 100 to turn the decimal into a readable percent value.
      $computedV = 100 * $maxRGB;
  
      // Special case if hueless (equal parts RGB make black, white, or grays)
      // Note that Hue is technically undefined when chroma is zero, as
      //   attempting to calculate it would cause division by zero (see
      //   below), so most applications simply substitute a Hue of zero.
      // Saturation will always be zero in this case, see below for details.
      if ($chroma == 0)
          return array(0, 0, $computedV);
  
      // Saturation is also simple to compute, and is simply the chroma
      //   over the Value (or Brightness)
      // Again, multiplied by 100 to get a percentage.
      $computedS = 100 * ($chroma / $maxRGB);
  
      // Calculate Hue component
      // Hue is calculated on the "chromacity plane", which is represented
      //   as a 2D hexagon, divided into six 60-degree sectors. We calculate
      //   the bisecting angle as a value 0 <= x < 6, that represents which
      //   portion of which sector the line falls on.
      if ($R == $minRGB)
          $h = 3 - (($G - $B) / $chroma);
      elseif ($B == $minRGB)
          $h = 1 - (($R - $G) / $chroma);
      else // $G == $minRGB
          $h = 5 - (($B - $R) / $chroma);
  
      // After we have the sector position, we multiply it by the size of
      //   each sector's arc (60 degrees) to obtain the angle in degrees.
      $computedH = 60 * $h;
  
      return array($computedH, $computedS, $computedV);
  }
  ?>

  Then in your template, you can use:

  <?php 
  $colour = get_field('colour');
  echo '<pre>';
  print_r($colour);
  echo '</pre>';
  
  echo '<p>Red: '.$colour['red'].' Green: '.$colour['green'].' Blue: '.$colour['blue'].'</p>';
  
  $R = $colour['red'];
  $G = $colour['green'];
  $B = $colour['blue'];
  
  $hsv = RGBtoHSV($R, $G, $B);
  
  echo '<pre>';
  print_r($hsv);
  echo '</pre>';
  
  echo '<p>Red: '.$hsv[0].' Green: '.$hsv[1].' Blue: '.$hsv[2].'</p>';
  ?>

  Code tested and working. You need the latest version of ACF Pro to get the RGBA array setting
• 

  • mikemikelle07

  • November 5, 2021 at 7:10 am

  Hello @jarvis thank you for your reply. When I add these parts of codes,then I have the following results.

  

  Basically, I want to convert HEX to HSV in a normal format, as an instance HEX = #1e73be / hsv(208,84,75)

  Thanks.
• 

  

  • jarvis

  • November 5, 2021 at 7:24 am

  Unfortunately, your image isn’t working.

  The link you supplied was to go from RGB to HSV

  I don’t know if you can go direct from HEX to HSV, you may need to convert your HEX to RGB then to HSV – may not be 100% accurate though as going from RGB to HSV.

  So you either need to adjust your output setting of the ACF field to the RGBA array (as per my example) OR you need to add the additional step.

  
  <?php
  $rgb_hex = get_field('colour');
  list($R, $G, $B) = sscanf($rgb_hex, "#%02x%02x%02x");
  
  $hsv = RGBtoHSV($R, $G, $B);
  
  echo '<pre>';
  print_r($hsv);
  echo '</pre>';
  
  echo '<p>Red: '.$hsv[0].' Green: '.$hsv[1].' Blue: '.$hsv[2].'</p>';
• 

  • mikemikelle07

  • November 5, 2021 at 7:40 am

  @jarvis good point.

  It returns me..

  Array ( [0] => 208.125 [1] => 84.210526315789 [2] => 74.509803921569 )

  I wonder how I can have the format of : hsv(208,84,75)

  Kind regards,
  Mike
• 

  

  • jarvis

  • November 5, 2021 at 7:59 am

  Output: echo "hsv({$hsv[0]},{$hsv[1]},{$hsv[2]})";

  If you don’t need the decimal, you can use the below:

  $hsv_r = (int)$hsv[0];
  $hsv_g = (int)$hsv[1];
  $hsv_b = (int)$hsv[2];
  echo "hsv({$hsv_r},{$hsv_g},{$hsv_b})";
• 

  • mikemikelle07

  • November 5, 2021 at 8:29 am

  Thank you both for the help!
• 

  

  • John Huebner

  • November 5, 2021 at 9:25 am

  I completely forgot that ACF returns RGB values now