El código de colores HTML. La paleta infinita.

El código de colores HTML es una forma de representar los colores a través de un formato que los ordenadores puedan mostrar. De esta forma, si escoges varios colores que combinen entre sí y creas una paleta de color para tu diseño web, tendrás que introducirlos en tu web a través de alguno de los códigos con los que insertarlos.

Paleta de colores HTML

En el diseño de páginas webs las tonalidades de los colores son un elemento fundamental. A fin de cuentas, los diferentes tonos y matices que escojas te permitirán dotar al diseño de personalidad y transmitir una primera impresión. Los colores son susceptibles de agruparse según una relación matemática de proporción entre colores. Para realizar la paleta se tiene en cuenta la ubicación del color dentro de la rueda cromática.

Si estás trabajando en el diseño de una web lo primero que habrás hecho será definir tu paleta de colores html. De esta forma, estarás dotando a toda la página de coherencia y unidad de marca.

Que es

Una paleta de colores es un conjunto de tonos escogidos para formar parte de un proyecto, ya sea un diseño artístico, un lienzo o una web. La paleta puede estar formada por diferentes tonos o por colores que comparten un tono similar. Sin embargo, es habitual que las paletas sean armónicas y guarden una relación entre los colores de la componen para que combinen visualmente.

Para qué sirve

Puedes consultar todos los estudios sobre la psicología del color. Estos te demostrarán que los colores que ves influyen en tu comportamiento. De esta forma, al elegir una paleta de colores para tu página web, tu marca o cualquiera de tus diseños estás condicionando el comportamiento de tus potenciales clientes e incluso podrás definir mejor la identidad de la empresa.

Código HEX

El código de color HEX es uno de los más famosos y utilizados. Se trata de un código de color hexadecimal formado por tres bytes, es decir compuesto por seis dígitos. Cada byte representa la intensidad de cada uno de los colores rojo, verde y azul, siendo 00 la intensidad más baja de todas.  El código utiliza un sistema con el que cada valor se convierte en un código alfanumérico único y de dos dígitos. Lo más importante de este sistema de color es que te permite utilizar más de 16 millones de colores totalmente únicos, más de los que se considera que el ojo humano percibe. Aunque se trata de un sistema complicado, puedes utilizar convertidores para seleccionar el color y ver directamente su código.  Además, se considera más fácil de utilizar porque son códigos más cortos.

Código RGB

El código de color RGB se basa en la mezcla aditiva de los colores rojo, verde y azul para conseguir una gama completa y amplia de colores. Con el podrás definir mucho mejor el color del fondo y la opacidad.  Al contrario que en código HEX, el código de color RGB utiliza 3 conjuntos de 3 números con un rango entre 0 y 255.

Código RGB

Rojo

En el código RGB el color rojo se mostraría como 255,0,0. Es uno de los tres colores primarios y combinándolo con los otros conseguirás el tono exacto que estas buscando.

Verde

En este caso su código sería el 0,255,0 en su máxima expresión.

Azul

Por último, el tono azul lo conseguirás con el código 0,0,255.

Código HSL

El código de color hace referencia a tres parámetros. Si tienes como referencia una rueda de color con ángulos podrás elegir el color que te interesa y encontrar su color complementario exactamente a 180º del elegido. De la misma forma, si quieres escoger tres colores tendrás que añadirle 120º. Por ejemplo, si elijo el color que esta en el 0º, los otros dos serían el 120º y el 240º.

Código HSL

Tono

El tono o “hue” en ingles hace referencia al color del espectro y corresponde al ángulo en el que se vería el color en una rueda de color. En el 0º, o en 360º si ya has dado la vuelta, se encontraría el color rojo.

 Saturación

También tendrás un valor entre 0 y 100 indicándote la intensidad del tono. En este caso el 0 equivaldría al mínimo de saturación mientras que el 100 sería el máximo.

Brillo

El último de los parámetros es la luminosidad o “lightness”. Este te muestra el color teniendo como referencia la claridad o la oscuridad que tiene un color.

Nombres de colores HTML

Aunque siempre vas a poder encontrar el color que estas buscando introduciendo el código Hex o el código RGB, además cada tono tiene un nombre concreto. Así, por ejemplo, el Dark Salmon es el #E9967A en Cogido Hex y el (233, 150, 122) en RGB. Los nombres de los colores HTML te permiten incorporarlo al estilo HTML en línea o incluso a una hoja de estilo CSS directamente con su nombre.

Diferencias entre usar códigos RGB y hexadecimales

Realmente ninguno de los códigos es mejor que otro. Simplemente son formas diferentes de comunicar el color exacto que nos interesa que se muestre. Por lo tanto, puedes elegir el código que consideres mejor según tus necesidades y las del proyecto que estes realizando, el que te resulte más práctico. La única diferencia será la forma de introducirlo y representarlo. Los hexadecimales son mucho más fáciles de copiar y pegar, por lo que puede resultarte más práctico.

 Generadores de paletas de color

Diseñar tu sitio web es mucho más sencillo gracias a las herramientas que te permiten generar tonalidades concretas para crear tu paleta de color HTML. Los generadores de paletas de color, por tanto, te ayudan a encontrar la combinación perfecta para tu empresa o imagen de marca.

Palettr

Esta plataforma te permitirá buscar esquemas de colores específicos para tu empresa. Según tus imágenes, te ofrecerá una proposición de paleta de colores diseñada específicamente para ti.

ColorHunt

En esta herramienta encontrarás cada día nuevas paletas de color para HTML creadas por diferentes usuarios. No solamente puedes ayudarte a encontrar los colores perfectos para tu marca, sino que pueden servirte a modo de inspiración.

Paletton

Si ya tienes algunos colores, pero necesitas encontrar un esquema completo para la empresa o la web que estas diseñando, esta es la herramienta que buscas. Además, también te permite crear un boceto con el que ver de forma sencilla como quedarán los colores dentro de tu sitio web.

Color Picker for HTML Codes

Es un generador muy completo con el que podrás acceder de forma rápida y eficaz al código de color de RGB, Hex o HSL. De hecho, una vez completes tu esquema podrás exportarlo en el formato que mejor te venga.

Mudcube Sphere

Este generador online te ofrece diferentes opciones de composición y podrás crear tu esquema y, sobre todo, compararlo con otros colores.

Cohesive Colors

Tal vez ya hayas creado una paleta de colores. Sin embargo, esta no te convence al 100%. En este caso, Cohesive Colors te ofrece la opción de agregar algo de tinta a tus colores para alterarla hasta que consigas lo que estas buscando.

Color Hexa

Esta herramienta no solamente es un generador de colores. En realidad, se trata de una gran enciclopedia de colores que te ofrece una gran información sobre el tono que vayas a utilizar. Entre otros datos, te indicara su composición y los colores alternativos, de forma que puedas saber cuales añadir al diseño.

CC Color HTML Wheel de Adobe

Este generador de paletas de color online te permite guardar tus colores HTML cargándolas en Adobe CC.

BrandsColors

Esta herramienta te permite conocer los esquemas de color que utilizan algunas de las empresas más populares.

ColourCode

Además de las opciones habituales que te ofrece cualquier generador de color, también te ofrece elementos analógicos y triadas. Además, una vez estes satisfecho podrás descargarlo en diferentes formatos.

ColourLovers

Muchos de los diseñadores utilizan esta herramienta para encontrar esquemas de color a través de las plantillas que ofrece. También podrás elegir la variación de sombras que quieres que aparezca.

Values: