Stem Talent Girl
Kabel participa en el proyecto Stem Talent Girl
27 febrero, 2019
progressive-web-apps
De sitios web a Progressive Web Apps: el nacimiento de una nueva generación de aplicaciones (Parte II)
27 marzo, 2019

En el post anterior aprendimos a limpiar el fondo de una imagen para dejarla transparente con diferentes herramientas y que así luciera mejor en nuestros informes de Power BI.

En este post explicaremos cómo crear una paleta de colores adecuada a partir de una imagen -en este caso, el logo de Kabel- para posteriormente importarlos a nuestro reporte de Power BI.

kabel
 

1. Obteniendo los colores de nuestra paleta

Para obtener los colores adecuados de nuestra paleta, podemos usar multitud de herramientas. En este post vamos a estudiar diferentes herramientas online, algo que nos resultará más cómodo al no tener que instalar ningún software en nuestro equipo.

1.1. Coolors

La primera herramienta online que vamos a usar es Coolors. Esta herramienta permite la creación de paletas de colores tanto por navegador web como por app (iOS) o desde un plugin para Photoshop (de pago).

A continuación, vamos a ver los pasos que hay que seguir para crear la paleta de colores:

  1. Accedemos a coolors.co y hacemos clic en “Start the Generator”.
  2. En el menú que nos aparece arriba a la derecha, seleccionamos la opción “Pick Colors From Image” para que al crear nuestra paleta se tengan en cuenta los colores de nuestro logo. Si no queremos cargar nuestra imagen en la web para seleccionar el color, siempre podemos usar el código hexadecimal del color que queramos usar en la paleta y añadirlo manualmente.
  3. Una vez seleccionados los colores que nos interesan, volvemos a la página principal, donde se nos muestran los 5 colores que compondrán nuestra paleta. El color principal debe ser siempre el primero que se muestra, y si queremos que la paleta se componga de 2 colores principales, el segundo debe ser el último que se muestra.
  4. Tras lo anterior, debemos bloquear nuestros colores haciendo clic sobre el candado “lock” que aparece en el centro del color. De este modo, al apretar la tecla “space” de nuestro teclado, la herramienta genera el resto de colores en base a esos colores bloqueados, manteniéndolos siempre en la paleta.
  5. Por último, una vez generados los colores que nos interesan, debemos hacer clic sobre “Export” y seleccionar el formato con el que queremos guardar nuestros colores.

paleta-colores

Además de las principales opciones que acabamos de ver, Coolors nos permite ajustar la saturación, el tono, el brillo y muchos parámetros más sobre nuestra paleta antes de guardarla. Además, al registrarnos (gratuitamente) podremos guardar las diferentes paletas que vayamos creando en nuestro perfil y compartirlas con otros usuarios. La herramienta también dispone de un enorme banco de paletas ya creadas por otros usuarios, muy útil para cuando queramos ver ejemplos o referencias para nuestro diseño.

1.2. Colormind

Ahora vamos a ver las posibilidades que nos ofrece Colormind. A diferencia de Coolors, Colormind sólo nos permite trabajar vía web.

A continuación, vamos a ver los pasos a seguir para crear la paleta de colores:

  1. Accedemos a colormind.io.
  2. En el menú situado arriba a la derecha, seleccionamos “Image Upload” y cargamos la imagen sobre la que queremos crear la paleta de colores.
  3. Una vez cargada, nos aparecerá una paleta de colores, con sus correspondientes códigos, lista para usar en nuestro reporte.

Si queremos crear nuestra paleta a partir de uno o varios colores concretos en vez de a partir de una imagen, debemos seguir los siguientes pasos:

  1. Accedemos a colormind.io.
  2. En la pantalla que se nos muestra, hacemos clic sobre el primer color que aparece (si queremos usar dos colores para crear nuestra paleta, debemos añadirlos en el primer y último hueco) y añadimos el código de nuestro color.
  3. Hacemos clic en el icono “Block” del color que acabamos de añadir.
  4. Por último, utilizamos el botón “Generate” hasta obtener los colores deseados para nuestra paleta.

paleta-colores

Además de las principales opciones que acabamos de ver, tal y como sucedía con la herramienta anterior, Colormind nos permite ajustar la saturación, el tono, el brillo y más parámetros sobre nuestra paleta. De igual forma, dispone de un enorme banco de paletas ya creadas por otros usuarios.

1.3. ColorHexa

Por último, podemos utilizar ColorHexa.

Esta herramienta online es diferente de las anteriores, ya que no nos deja crear paletas partiendo de diferentes colores o de una imagen. Aún así, nos da muchísima información sobre cualquier color que vayamos a utilizar para poder combinarlo mejor con otros.

paleta-colores

Al acceder a la web, simplemente tenemos que introducir el código hexadecimal de un color y la herramienta nos devuelve información como:

  • Los diferentes códigos del color (hexadecimal, RGB, HSV, etc.)
  • Diferentes composiciones de color
  • Colores similares como alternativas
  • Una preview de cómo quedaría el color según su uso (letras, subrayado, formas, etc.)
  • Diferentes variaciones del color por sombras, tono, etc.

 

2. Comparativa

Ahora que ya conocemos las tres herramientas, vamos a comparar sus pros y sus contras en una sencilla tabla:

Herramienta Pros Contras
Coolors Creación de paletas de forma automática

Disponible para diferentes plataformas

Registro gratuito que permite ventajas notables

Banco de paletas muy amplio

ColorMind Creación de paletas de forma automática

Banco de paletas muy amplio

Sólo disponible vía web
ColorHexa Información avanzada sobre cualquier color No dispone de creación automática de paletas

Sólo disponible vía web

 

Conclusiones: ¿Qué herramienta utilizar para nuestros reportes de Power BI?

Después de emplear cada una de estas herramientas, recomiendo, en líneas generales, el uso de Coolors como herramienta para la creación de paletas de colores, a ser posible estando registrado.

Si buscamos una paleta muy específica que no podamos encontrar en Coolors, optaría por recurrir a ColorMind. No obstante, para mí Coolors es superior a ésta, sobre todo por lo fácil que es de utilizar y por la posibilidad que nos da de almacenar nuestros trabajos; de hecho, no se me ocurre nada significativo que objetar contra esta herramienta.

Por último, si lo que buscamos es información avanzada sobre un color concreto, recomiendo el uso de ColorHexa.
 
 
 
Podéis comentarnos lo que sea en info@kabel.es.

También podéis seguirnos en Twitter, LinkedIn y Facebook.
 
 


Licencia de Creative Commons
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

 

Compártelo: Share on FacebookTweet about this on TwitterShare on LinkedInPin on Pinterest

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

NEWSLETTER