Introducción a los colores HTML: aprende a darle color a tu sitio web

Darle color a tu sitio web puede provocar emociones, establecer un ambiente adecuado y hacer que tu diseño en general sea más coherente y cohesivo.

Si en este momento estás rediseñando tu sitio o estás eligiendo una paleta de colores por primera vez, conocer los principios de diseño relacionados con los códigos de color HTML puede ayudarte a crear una página que refleje la apariencia de tu marca de manera consistente. En esta publicación cubriremos toda la información que necesitas de manera fácil y entendible para que esta actividad sea lo más sencilla posible para ti.

El primer paso es definir qué son los códigos de color HTML en el diseño web. 

Todos los días vemos diferentes colores y tenemos nombres determinados para ellos, por ejemplo el rojo y el amarillo. Dentro de estos mismos, hay cientos de tonos diversos que también tienen su propio nombre. El rosa cuenta con diferentes tonalidades como neón, fucsia, magenta, chicle, entre otros.

Sin embargo, lo que para alguien es un color específico para otra persona puede ser algo completamente diferente. Por ejemplo, algunas personas cuando piensan en turquesa aseguran que proviene de un tono azul y otras del verde. Lo mismo pasa con el rosa neón y el fucsia. Los colores HTML ayudan a evitar este tipo de imprecisiones a la hora de diseñar un sitio web. 

Los valores se representan de la siguiente manera: de 00 (la intensidad más baja de un color primario) a FF (la intensidad más alta de un color primario). Esto significa que cada código hexadecimal consta de tres pares o seis caracteres en total. Estos pueden ser cualquier combinación de diez números (0-9) y seis letras (a-f). En total, hay 16.777.216 combinaciones posibles. Te compartimos algunos de ellos.

• El código de color hexadecimal del blanco es #FFFFFF, ya que es una mezcla de los tres colores primarios en su máxima intensidad.
• El código de color hexadecimal del negro es #000000, ya que es una falta de color primario total.
• El código hexadecimal del rojo es #FF0000, pues requiere una mayor intensidad de color rojo que del resto de los otros dos colores primarios.

En el diagrama presentado a continuación te compartimos algunas otras combinaciones:

Imagen de Smashing Magazine

Mira más ejemplos: 

Imagen de HTML Color Codes

Para familiarizarte un poco más con los códigos hexadecimales puedes encontrar algunas herramientas de diseño web en línea, como los selectores de color y ruedas.

Por ejemplo, con el selector de color que te mostramos en la siguiente imagen puedes verificar cuáles son los códigos hexadecimales de diferentes colores. Puedes ir probando tonalidades generales como el blanco o negro, hasta colores más profundos, como las gamas de verdes o los azules más brillantes.

Imagen de HTML Color Codes

Una vez que encuentres un color que te guste, toma nota del código hexadecimal. De esta manera podrás reutilizarlo en varios diseños y canales. Esto es esencial para mantener una consistencia efectiva en tu imagen.

Ahora que comprendes qué son los colores HTML y los códigos hexadecimales, te diremos cómo puedes utilizarlos con éxito.

¿Cómo utilizar códigos de color HTML?

Puedes agregar códigos hexadecimales en el HTML de tu sitio para editar el color de elementos individuales.

Por ejemplo, si deseas cambiar el color un párrafo a rojo, solo debes agregar un atributo de estilo al elemento que deseas colorear y usar la propiedad de color con el código correcto. En la siguiente imagen puedes darte una idea de cómo debe lucir:

Al utilizar este código en la introducción de una publicación de blog, logramos que el primer párrafo pudiera verse en rojo:

También puedes utilizar HTML y CSS y lograr el mismo resultado.

Aquí está el CSS que pondrías en la sección del encabezado de tu documento:

y el HTML que pondrías en la sección del cuerpo de tu documento sería simplemente el texto que quieras cambiar de color:

Con este mismo proceso puedes cambiar el color de tu fondo, texto y otros elementos dentro de tu sitio web.

Construyendo un sitio en color

El color puede ayudarte a enfatizar un elemento en tu página, crear reconocimiento de marca y hacer que tu sitio sea más memorable. Ahora que tienes un conocimiento básico de los códigos de colores HTML, puedes agregar o cambiar el color de tu sitio para crear un diseño atractivo y coherente con la imagen de tu empresa.