• 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

Reto: #0000FF oscuro casi #000000

Publicado el 25/05/2020 por Ada 12 Comments

Azul oscuro casi negro

Azul oscuro casi negro

Programación

Cambio de bases


Acceder al reto en formato vídeo

Daniel Sánchez Arévalo, director de AzulOscuroCasiNegro, quiere hacer un remake de su película del 2006. Pero necesita darle un toque un poco más moderno y lo primero que ha pensado es cambiarle el título de la película por algo más “digital”. De ahí el nombre de este reto.

Al final se lió la manta a la cabeza y el remake no va a tener nada que ver. Trata de códigos, colores… y ahí entramos nosotros en el juego. Nos envió un mensaje que decía así:

Hola, Ada:
Necesito un programa sencillito que transforme un código en RGB en hexadecimal. La idea es que, a partir de tres variables (rojo, verde y azul) devuelva el código de color en hexadecimal.
Ejemplo de entrada: 0, 36, 255
Ejemplo de salida: #0024ff

Hay varias maneras de representar un color digital. En todas ellas necesitamos “cuánto” rojo, verde y azul (RGB) hay en la composición del color final.

Podemos hacerlo con tres números del 0 al 255, también llamado representación RGB; por ejemplo: 255, 35, 123.

También podemos transformar cada uno de esos números en su equivalente en hexadecimal (de 00 a FF); por ejemplo, #FF237B, de manera que en hexadecimal, FF es el 255, 23 es el 36 y 7B es el 123.

Y aquí tenemos al cansino de Edu preguntando…

Si las tres variables necesitan el mismo proceso, podrías crear una función, ¿no? ¿Sabes que en Javascript hay una función para transformar las bases? Tendrás que poner las letras en mayúsculas, ¿no?

“Venga, Edu, que este reto está tirao, no me líes“, le dije. Aún así, trataré de pensar alguna alternativa a lo que tengo en mi cabeza…

¿Tú cómo lo harías? ¡Deja tus ideas en los comentarios!

Y si quieres compartir código, 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: Reto Tagged With: bases, javascript, números, reto

Reader Interactions

Comments

  1. José Julio says

    26/05/2020 at 18:34

    function hexadecimal(decimal)
    {
    var resultado = “”;
    numeros_hexadecimales = {10:”A”, 11:”B”, 12:”C”, 13:”D”, 14:”E”, 15:”F”};
    cociente = Math.trunc(decimal/16);
    resto = decimal % 16;
    if (cociente > 9)
    {
    resultado += numeros_hexadecimales[cociente];
    }
    else
    {
    resultado += String(cociente);
    }
    if (resto > 9)
    {
    resultado += numeros_hexadecimales[resto];
    }
    else
    {
    resultado += String(resto);
    }
    return resultado
    }

    R = 0;
    G = 36;
    B = 255;

    alert(“#” + hexadecimal(R) + hexadecimal(G) + hexadecimal(B));

    Accede para responder
    • Juan says

      01/06/2020 at 03:59

      window.onload = cargaCompleta;

      var rojito;
      var verdecito;
      var azulito;
      var botonObtener;

      let verda;
      let verdadera;
      let verdades;
      let Rojo;
      let Verde;
      let Azul;

      const NUMEROSHEXADECIMALES = [“0″,”1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”9″,”a”,”b”,”c”,”d”,”e”,”f”];

      function cargaCompleta()
      {
      rojito = document.getElementById(“ingresoRojo”);
      verdecito = document.getElementById(“ingresoVerde”);
      azulito = document.getElementById(“ingresoAzul”);
      botonObtener = document.getElementById(“btn”).addEventListener(“click”,comprobarResultados);
      }

      function comprobarResultados()
      {
      if(rojito.value > 255)
      {
      rojito.style = “background-color: red”;
      rojito.style.color = “white”;
      alert(“El valor ingresado no es valido, es mayor a 255”);
      }
      else if(rojito.value < 0)
      {
      rojito.style = "background-color: red";
      rojito.style.color = "white";
      alert("El valor ingresado no es valido, es menor a 0 ");
      }
      else if(rojito.value === "")
      {
      rojito.value = "0";
      verdadera = true;
      }
      else if(0 <= rojito.value 255)
      {
      verdecito.style = “background-color: red”;
      verdecito.style.color = “white”;
      alert(“El valor ingresado no es valido, es mayor a 255 “);
      }
      else if(verdecito.value < 0)
      {
      verdecito.style = "background-color: red";
      verdecito.style.color = "white";
      alert("El valor ingresado no es valido, es menor a 0 ");
      }
      else if(verdecito.value === "")
      {
      verdecito.value = "0";
      verda = true;
      }
      else if(0 <= verdecito.value 255)
      {
      azulito.style = “background-color: red”;
      azulito.style.color = “white”;
      alert(“El valor ingresado no es valido, es mayor a 255”);
      }
      else if(azulito.value < 0)
      {
      azulito.style = "background-color: red";
      azulito.style.color = "white";
      alert("El valor ingresado no es valido, es menor a 0 ");
      }
      else if(azulito.value === "")
      {
      azulito.value = "0";
      verdades = true;
      }
      else if(0 <= azulito.value < 256)
      {
      azulito.style = "background-color: white"
      azulito.style,color = "black";
      verdades = true;
      }
      if(verdadera && verda && verdades)
      {
      transformar();
      }
      }

      function transformar()
      {
      let xxx = 0;
      let xx = 0;
      let i = 0;
      let ii = 0;
      let iii = 1;
      let mostrado;
      let mostrado2;
      while(i < iii)
      {
      if(xxx === 16)
      {
      xxx = 0;
      }
      while(ii <= rojito.value)
      {
      if(xx === 16)
      {
      iii++;
      xx = 0;
      i++
      xxx++;
      }
      if(ii == rojito.value)
      {
      mostrado2 = NUMEROSHEXADECIMALES[xx];
      i++;
      }
      ii++;
      xx++;
      }
      mostrado = NUMEROSHEXADECIMALES[xxx];
      }

      let nnn = 0;
      let nn = 0;
      let n = 0;
      let nb = 0;
      let nbv = 1;
      let masmostrados;
      let masmostrados2;
      while(n < nbv)
      {
      if(nnn === 16)
      {
      nnn = 0;
      }
      while(nb <= verdecito.value)
      {
      if(nn === 16)
      {
      nbv++;
      nn = 0;
      n++
      nnn++;
      }
      if(nb == verdecito.value)
      {
      masmostrados2 = NUMEROSHEXADECIMALES[nn];
      n++;
      }
      nb++;
      nn++;
      }
      masmostrados = NUMEROSHEXADECIMALES[nnn];
      }

      let mmm = 0;
      let mm = 0;
      let m = 0;
      let mn = 0;
      let mnb = 1;
      let mostrado1;
      let mostrador;
      while(m < mnb)
      {
      if(mmm === 16)
      {
      mmm = 0;
      }
      while(mn <= azulito.value)
      {
      if(mm === 16)
      {
      mnb++;
      mm = 0;
      m++
      mmm++;
      }
      if(mn == azulito.value)
      {
      mostrador = NUMEROSHEXADECIMALES[mm];
      m++;
      }
      mn++;
      mm++;
      }
      mostrado1 = NUMEROSHEXADECIMALES[mmm];
      }

      Rojo = mostrado + mostrado2;
      Verde = masmostrados + masmostrados2;
      Azul = mostrado1 + mostrador;
      rgb = Rojo + Verde + Azul;
      mostrarResultado();
      }

      function mostrarResultado()
      {
      let introducirContenido = document.getElementById("resultadoMostrado");
      let texto = document.createTextNode("Tu color en Hexadecimal es #" + Rojo + Verde + Azul);
      introducirContenido.appendChild(texto);
      let cambioColor = document.getElementById("cuerpo").style = "background-color: #" + rgb;
      }

      Accede para responder
      • José Julio says

        01/06/2020 at 18:41

        ¿En serio?

        Accede para responder
      • Ada Lovecode says

        02/06/2020 at 11:09

        ¡Hola, Juan!
        Bueno, ¡veo que te has complicado muchísimo! Hay muchas maneras de resolverlo muchísimo más sencillas, pero, en cualquier caso, hay que intentar modularizar ese código. Te he escrito en privado una serie de consejitos, por si te pueden servir, ¿vale? Y este miércoles desvelamos la solución (soluciones) 😉
        ¡Un abrazo y a seguir “currando”!

        Accede para responder
    • Ada Lovecode says

      02/06/2020 at 11:08

      ¡Buena respuesta, José Julio! Pero te adelanto que hay funciones para hacer esa transformación, jejeje. Eso sí, con tu resolución podrías utilizarlo para cualquier lenguaje de programación de alto nivel 😉

      Accede para responder
  2. Guillermo says

    31/05/2020 at 19:09

    var rojo =0;
    var verde =36;
    var azul = 255;
    var hexadecimal = “#”;

    console.log(hexadecimal + transforma(rojo) + “” + transforma(verde) + “” + transforma(azul))

    function transforma(color) {
    var resultado;
    resultado = color.toString(16);
    resultado = resultado.toUpperCase();
    return resultado;
    }

    Accede para responder
    • Ada Lovecode says

      02/06/2020 at 11:13

      ¡Ea! Ahí tenemos una solución sencillita: toString(16) trabaja por nosotros y nos pasa un número de decimal a hexadecimal (solo hay que meter la base entre paréntesis y lo transformará a octal, binario…).
      ¡Buen trabajo, Guillermo! 🙂

      Accede para responder
  3. Dani Armando says

    02/06/2020 at 22:39

    Hola, me pareció interesante el problema, lo quise resolver limitándome al usar funciones, ya que no conozco muchas funciones JavaScript, igual creo que sería una solución al problema, espero recomendaciones, ¡Saludos a todo, y a Ada también!

    ‘use strict’;

    function $(valorDecimal)
    {
    var valoresHex = [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’]
    var numeroHexadecimal = ”;
    var contador = 0;

    while( valorDecimal >= 16 )
    {
    var residuo = parseInt(valorDecimal % 16);
    valorDecimal /= 16;
    numeroHexadecimal = valoresHex[residuo] + numeroHexadecimal;
    contador++;
    }

    numeroHexadecimal = valoresHex[parseInt(valorDecimal)] + numeroHexadecimal;

    if( contador == 0 )
    {
    numeroHexadecimal = 0 + numeroHexadecimal;

    }
    return numeroHexadecimal;
    }

    var rojo = 20;
    var verde = 0;
    var azul = 19;
    console.log(‘#’ + $(rojo) + $(verde) + $(azul));

    Accede para responder
    • Dani Armando says

      03/06/2020 at 01:01

      Una ligera modificación del problema original.

      ‘use strict’;

      function $(valorDecimal)
      {
      var valoresHex = [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’]
      var numeroHexadecimal = ”;
      var unDigito = true;

      while( valorDecimal >= 16 )
      {
      var residuo = parseInt(valorDecimal % 16);
      valorDecimal /= 16;
      numeroHexadecimal = valoresHex[residuo] + numeroHexadecimal;
      unDigito = false;
      }

      numeroHexadecimal = valoresHex[parseInt(valorDecimal)] + numeroHexadecimal;

      if( unDigito )
      {
      numeroHexadecimal = 0 + numeroHexadecimal;

      }
      return numeroHexadecimal;
      }

      var rojo = 20;
      var verde = 0;
      var azul = 19;
      console.log(‘#’ + $(rojo) + $(verde) + $(azul));

      Accede para responder
      • Ada Lovecode says

        03/06/2020 at 09:50

        ¡Ole! Me gusta mucho más así, la verdad, ya no solo por el cambio de tipo sino porque creo que es más intuitivo… más “Clean Code” 😉

        Accede para responder
    • Ada Lovecode says

      03/06/2020 at 09:48

      ¡Hola, Dani!
      ¡Muy bien pensado la resolución de los valores hexadecimales! Eso es: cuando no sabemos si existe una función tenemos que “buscarnos la vida” para resolverlo de otra manera 🙂 Quizá añada algo como lo que propones para ver alternativas a usar una función.
      ¡Buen trabajo, Dani!

      Accede para responder

Trackbacks

  1. Reto resuelto: #0000FF oscuro casi #000000 dice:
    18/11/2020 a las 21:19

    […] La semana pasada el director de cine Daniel Sánchez Arévalo nos enviaba un reto en el que nos pedía que transformáramos colores en decimal a hexadecimal y que titulamos #0000FF oscuro casi #000000. […]

    Accede para responder

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

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.