Códigos y valores de colores RGB

28/7/05 - Hola amigos, haciendo una de mis aplicaciones me surgió una necesidad ¿Como obtener el código de un color partiendo de los valores ( ROJO, VERDE, AZUL), y también lo contrario, ¿ Cómo obtener de un código RGB los valores ( ROJO, VERDE, AZUL)?.

Por ejemplo:

Caso 1

Si tengo: Rojo: 20, Verde: 74 y Azul: 216; como hacer para imprimir #144AD8, que es su código Hexadecimal.

Caso 2

Si tengo #D8B014, como hacer para imprimir: Rojo: 216, Verde: 176, Azul: 20

Haciendo varias pruebas con la paleta de colores, desarrolle una función que soluciona este problema.

¿Cual es la utilidad?

Por ejemplo si queremos obtener los matices o tonos de un color especifico, utilizando la función y unos bucles (con condiciones obviamente) esta todo solucionado.

Así que a partir de unos 3 colores, podemos crear todo un estilo (CSS) para nuestra página web, utilizando todos los tonos instruidos por nosotros.

También si generamos graficas dinámicamente por php.

Teoría

Recordemos que el código de un color RGB se constituye de 6 CARATERES (Numéricos de 0 a 9 ó letras de (A) a (F), y el esquema es el siguiente: (RR-VV-AA)

RR= Rojo
VV= Verde
AA= Azul

De donde precisamente viene el termino (RGB) en Ingles claro esta.

¿Que quiere decir esto?

Los códigos de colores son Hexadecimales; es decir con base 16 entonces:

0= 1
1= 1
2= 2
3= 3
4= 4
5= 5
6= 6
7= 7
8= 8
9= 9
A= 10
B= 11
C= 12
D= 13
E= 14
F= 15

LA FORMULA SERIA LA SIGUIENTE:

Sí rojo vale FF (máximo valor)

Entonces la primera “F” Valeria 15*16 donde 16 es constante y 15 el valor de su posición con respecto a 0 (El máximo)
El resultado seria: 240, luego le sumamos la posición con respecto a 0 del segundo carácter (NUEVAMENTE F, por tanto el valor seria 15)
240+15 = 255 (color máximo)

El proceso se repetiría en cada uno de los pares (Rojo – Verde – Azul)

De acuerdo con esto, entonces los valores del color: #4AF121 serían:

Rojo: (4A) 4*16+4= 68. El valor en la paleta es equivalente a 68
Verde: (F1) 15*16+1= 241. El valor en la paleta es equivalente a 241
Azul: (21) 2*16+1= 33. El valor en la paleta es equivalente a 33

Basándonos en la teoría anterior, podemos desarrollar la función:

Código Fuente:

<?
function color_formt($COLOR,$tipo){
for ($i=0; $i<=9; $i++){
  $codigo_part[$i]=$i;
  $fac_mult[$i]=$i; }
for ($is='a'; $is<='f'; $is++){
  $codigo_part[$i]=$is;
  $fac_mult[$is]=$i;
  $i++;
}

if($tipo==1){
  $COLOR=strtolower($COLOR);
  /* de código a valores FORMATO VALIDO : #RRVVAA */
  $COLOR= ereg_replace ('#','',$COLOR);
  $col[rojo][1]= substr($COLOR,0,1);
  $col[rojo][2]= substr($COLOR,1,1);
  $col[verde][1]= substr($COLOR,2,1);
  $col[verde][2]= substr($COLOR,3,1);
  $col[azul][1] = substr($COLOR,4,1);
  $col[azul][2] = substr($COLOR,5,1);
  $color_[rojo]=($fac_mult[$col[rojo][1]]*16)+$fac_mult[$col[rojo][2]];
  $color_[verde]=($fac_mult[$col[verde][1]]*16)+$fac_mult[$col[verde][2]];
  $color_[azul]=($fac_mult[$col[azul][1]]*16)+$fac_mult[$col[azul][2]];
}
elseif($tipo==2){ /* de valores a código FORMATO VALIDO : RRR|VVV|AAA */
  $rojo=$COLOR[0];
  $verde=$COLOR[1];
  $azul=$COLOR[2];
  $color_=strtoupper('#'.$codigo_part[floor($rojo/16)].$codigo_part[$rojo%16]. /*rojo */
    $codigo_part[floor($verde/16)].$codigo_part[$verde%16]. /*verde*/
    $codigo_part[floor($azul/16)].$codigo_part[$azul%16]); /*azul*/
}
else{
  $color_='N/a';
}
return $color_;
}

/*APLICAMOS LA FUNCIÓN de las dos formas*/

echo '<strong>de código a valores ( Rojo, Verde, Azul)</strong><HR>';
/* uso color_formt('#RRVVAA',1)*/
foreach(color_formt('#4AF121',1) as $color=>$valor) {
$VALOR[$color]=$valor;
echo $color.'->'.$valor.'<BR>';
}
echo '<strong>de valores a codigo #RRVVAA </strong><HR>';

/* uso color_formt(array(ROJO,AZUL,VERDE),2)*/
echo color_formt(array($VALOR[rojo],$VALOR[verde],$VALOR[azul]),2);

// OBTENER LOS TONOS DE UN COLOR
echo '<HR><strong> Obtener los tonos de un color </strong>';

for ($i=1; $i<=255 ; $i++){
  echo '<div style="background-color:'.color_formt(array($i,$i,$i),2).'; width:50px"><img width="1" height="1"></div>';
}
?>

Explicando:

Definimos una función bajo el nombre de color_formt(ARG 1, ARG 2)

Donde ARG 1: es el código del color o los datos del color, tomando como punto de referencia ARG 2, cuyo valor puede ser 1 ó 2.

Sí ARG 2 es 1, entonces transformaríamos de código a valores) y ARG 1 debe ser un código de color válido

Sí ARG 2 es 2, entonces transformaríamos de valores a códigos) y ARG 1 debe estar conformado por los 3 parámetros que constituyen el color, asociados a una matriz.

Posteriormente realizaremos varias iteraciones con el búcle FOR, a fin de recolectar los números de 0 a 9 y las letras de (A) á (F) y asociarlos a una matriz escalar, para su posterior utilización en las condiciones subsiguientes.

SI $tipo==1
Primero que nada pasamos a minúscula el color, para no tener problemas a posterior con la función de cadenas strtolower();

Remplazamos el valor (#) del código de color por nada (Si lo contiene) mediante la función ereg_replace(), de expresiones regulares.

Luego extraeremos carácter por separado de $codigo, utilizando la función de cadenas substr();

Aplicamos la formula para obtener cada valor y los almacenamos en un array asociado $color_ ;

SI $tipo==2
Realizamos el proceso contrario a lo anterior, antes multiplicábamos ahora dividiremos y redondeamos el valor hacia abajo con la función matemática floor(), esto para el primer caracteres del conjunto, con el segundo obtenemos el residuo de la división entre el nombre del color y 16 , repetimos el mismo proceso los 3 grupos. Pasamos todo el resultado a mayúscula con strtoupper()

De lo contrario a si $tipo==1 ó $tipo==2
Asignamos de valor a la variable $color_='N/a';

Finalmente sin importar la rutina retornamos la variable $color_.

Y aplicamos la función.

Nota:Como el objetivo en blasten.com siempre es y será propiciar la creación de funciones donde muchas de las cuales ya existen desde hace años en php, con la finalidad de poner en práctica una serie de conocimientos de gran envergadura y desarrollar destrezas como la lógica de programación tan importante para la construcción de cualquier algoritmo.

¿Porque digo lo anterior?

Porque pudiésemos resumir el código anterior a mínimo 3 líneas con un par de funciones ya existentes en php.

Una de ellas: La función de cadenas sscanf(), que nos permite analizar y Dividir ó fraccionar (Trocear) una cadena antes de arrojar su salida al navegador a partir de un formato especifico.

Es decir pudiésemos obtener el valor hexadecimal de un numero sin necesidad de aplicar esa formula y realizar ese par de bucles.

Por ejemplo:

<?
scanf('33FFCC', "%2x%2x%2x", $rojo, $verde, $azul);
echo 'Rojo: '.$rojo;
echo '<br> Verde: '.$verde;
echo '<br> Azul: '.$azul;
?>

Produciría la salida:

Rojo: 51
Verde: 255
Azul: 204

¿Que tal ? y si ha eso le agregamos:

<?
$hexadecimales='0123456789ABCDEF';
echo $hexadecimales[15];
?>

Algo sumamente básico en php, Entonces entenderíamos que “ilógico fue realizar los bucles y tantas otras cosas” que aumenta a “ nivel micro” en ese caso el procesamiento del script ósea en generar un resultado o salida al navegador.

Autoría, licencia y acciones sobre este artículo

Informe de Emmanuel García De Caro* Webmaster de Blasten.com URL: http://www.blasten.com Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba