## Support ### Account

Home Forums Front-end Issues Convert HEX value to HSV

Solved

# Convert HEX value to HSV

• 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

•  • 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.

•  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);
}
``````
• 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

•  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?

•  ``````
<?php
/**
* (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.' Green: '.\$hsv.' Blue: '.\$hsv.'</p>';
?>``````

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

• 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.

•  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.' Green: '.\$hsv.' Blue: '.\$hsv.'</p>';``````
• @jarvis good point.

It returns me..

`Array (  => 208.125  => 84.210526315789  => 74.509803921569 )`

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

Kind regards,
Mike

•  Output: `echo "hsv({\$hsv},{\$hsv},{\$hsv})";`

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

``````\$hsv_r = (int)\$hsv;
\$hsv_g = (int)\$hsv;
\$hsv_b = (int)\$hsv;
echo "hsv({\$hsv_r},{\$hsv_g},{\$hsv_b})";``````
• Thank you both for the help!

•  I completely forgot that ACF returns RGB values now

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.