• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

rgb

Snippet: pasar un color de hexadecimal a RGB en PHP

Publicado el 12/11/2022 por Ada Leave a Comment

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!

  1. Almacenamos en dos variables la opacidad y el color en hexadecimal.
  2. Con substr nos quedamos con los 6 dígitos que hay a partir de la almohadilla.
  3. Mediante str_split dividimos la cadena en un array de trocitos de 2 caracteres, tal y como indica el segundo parámetro.
  4. Pasamos el valor de cada elemento del array de hexadecimal a decimal con hexdec y lo almacenamos en una variable de color.
  5. 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…

Filed Under: Tips & Tricks Tagged With: colores, css, php, rgb, snippet

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2023

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.