En CSS tenemos muchas posibilidades de trabajar con imágenes sobre las que superponemos colores, degradados, etc. Se conoce como “color overlay”.
Pero hay determinadas propiedades CSS que no admiten colores en hexadecimal y necesitamos pasarlos, sí o sí, en formato RGB, es decir, con las tres componentes en decimal.
Por ejemplo, el color rojo se define como #FF0000 en hexadecimal y en RGB sería (255, 0, 0). Además, muchas de las las reglas CSS que requieren del color en RGB añaden un cuarto parámetro para la transparencia/opacidad, quedando el valor de la siguiente forma: rgb(255, 255, 255, 0.5).
Recientemente he necesitado trabajar con datos dinámicos en el lado del servidor que almacenan un valor de color que posteriormente debo pasar a una hoja de estilos CSS mediante una variable. Eso, quizá, lo dejamos para el próximo artículo.
El caso es que necesitaba una función para pasar de hexadecimal a RGB en PHP que fuera “fácil, sencilla, y para toda la familia”. ¿Se puede hacer más comprimida? ¡Claro! Pero así puedes entender en detalle cada instrucción.
He aquí la función:
$opacidad = "0.5"; //Equivale al 50%
$colorHexadecimal = "#FF0000";
$split = str_split(substr($colorHexadecimal,1), 2);
$r = hexdec($split[0]);
$g = hexdec($split[1]);
$b = hexdec($split[2]);
$colorRGB= "rgb(" . $r . ", " . $g . ", " . $b . ", $opacidad)";
¡Veamos paso a paso!
- Almacenamos en dos variables la opacidad y el color en hexadecimal.
- Con substr nos quedamos con los 6 dígitos que hay a partir de la almohadilla.
- Mediante str_split dividimos la cadena en un array de trocitos de 2 caracteres, tal y como indica el segundo parámetro.
- Pasamos el valor de cada elemento del array de hexadecimal a decimal con hexdec y lo almacenamos en una variable de color.
- Creamos una variable colorRGB a la que le pasamos literalmente el texto rgb y los paréntesis, y como parámetros las tres componentes de color y la variable opacidad.
¿Tienes una propuesta mejor? ¡Compártela! Para ello te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…
