La guía definitiva de colores hexadecimales

Table of contents

Los colores hexadecimales son el lenguaje visual de la web. Cuando quieres que una página web (o aplicación web) muestre un color determinado, le dices el código hexadecimal.

¿Qué es un código de color hexadecimal?

Un código de color hexadecimal es un código de 6 símbolos formado por hasta tres elementos de 2 símbolos. Cada uno de los elementos de 2 símbolos expresa un valor de color desde 0 a 255. Un código de color hexadecimal está formado por hasta tres elementos de 2 símbolos. Cada uno de los elementos de 2 símbolos expresa un valor de color de 0 a 255.

  • Elemento 1: Valor rojo
  • Elemento 2: Valor verde
  • Elemento 3: Valor azul

El código se escribe utilizando una fórmula que convierte cada valor en un código alfanumérico único de 2 dígitos. Por ejemplo, el código RGB (224, 105, 16) es E06910 en código hexadecimal.

¿Por qué? Es complicado y tiene que ver con el sistema de numeración de base 16. Si tienes curiosidad, aquí hay una buena explicación. Si te estás preguntando qué significa todo esto para ti como diseñador, hay un par de cosas importantes que debes saber:

  • Utilizando los códigos hexadecimales, puedes mostrar más de 16 millones de colores únicos, lo que se cree que es más de lo que el ojo humano puede percibir.
  • Puedes usar selectores de color o convertidores para crear el código para ti.

¿Por qué utilizar el código hexadecimal en lugar de números? Porque si usaras números, cada valor rojo, verde o azul de 0 a 255, podría ser uno, dos o tres dígitos posibles. En total, el código podría tener desde tres dígitos hasta nueve. Esto podría causar confusión para los sistemas que leen los códigos, pero especialmente para las personas que realizan la codificación. Tener cada valor con seis símbolos reduce la posibilidad de errores.

¿Qué son los códigos de colores hexadecimales?

Los códigos de color hexadecimales son valores que le indican a la pantalla cuánto color mostrar. Los valores son un código especial que representa valores de color de 0 a 255.

Si rojo, verde y azul están todos en el mínimo de 0 (representado como “00” en el código), el color expresado es el color negro. Si rojo, verde y azul están al máximo de 255 (representado como “ff” en el código), el color expresado es el color blanco.

Los valores de color hexadecimales se pueden combinar para mostrar más de 16 millones de colores diferentes. Por lo que es obvio que la mayoría de ellos estará en algún punto intermedio. Siempre puedes usar un convertidor para transformar los valores numéricos RGB en código hexadecimal.

Eso sí, memorizar algunos de los colores hexadecimales más comunes, puede ser muy práctico. Este conocimiento podría resultar útil si estuvieras diseñando con un codificador sobre la marcha.

Códigos de colores hexadecimales populares

códigos-de-colores–hexadecimales-populares-cuadro.png

Códigos de colores hexadecimales únicos

códigos-de-colores-hexadecimales-únicos-cuadro-png

¿Cómo funcionan los colores hexadecimales?

Los colores hexadecimales se basan en el modelo de color RGB que se ha utilizado desde los primeros días de la fotografía.

La teoría detrás del modelo es que puedes crear prácticamente cualquier color que el ojo pueda ver asignando diferentes combinaciones de valores de color de rojo, verde y azul. El modelo de color RGB es utilizado por televisores, cámaras digitales y proyectores de vídeo, además de en prácticamente todas las pantallas de ordenador y teléfonos que existen.

En la web y en la mayoría de las aplicaciones digitales, se utiliza una escala de valor de color de 0 a 255. Tú (o un programador) le dices a la pantalla cuánto rojo, azul y verde mostrar. Esa combinación crea el color que ve el espectador.

Tienes mucha libertad para elegir el color que quieras. El número total posible de combinaciones es de 16 777 216, que es más de lo que el ojo humano puede distinguir.

¿Cuál es la diferencia entre los códigos RGB y hexadecimales?

Los programadores prefieren los códigos de colores hexadecimales porque son predecibles. Siempre son de seis dígitos, sin importar el color. Los valores RGB pueden tener tan solo tres dígitos y hasta un máximo de nueve.

No es necesario que utilices códigos hexadecimales en el diseño web. Si estás codificando una página en HTML, también puedes usar los valores RGB o incluso los nombres de los colores.

Así es como se vería el HTML si estuvieras codificando, digamos, un fondo aguamarina para una página web.

  • Código de color hexadecimal para aguamarina: <div style=”background‑color:#7FFFD4″></div>
  • Código de color RGB para aguamarina: <div style=”background‑color:rgb(127, 255, 212)”></div>
  • Código de nombre de color para aguamarina: <div style=”background‑color:aquamarine”></div>

Aunque puedas especificar el nombre o el código RGB, no significa que debas hacerlo. Para reducir la posibilidad de un error en tu proyecto, utiliza un selector de rueda hexadecimal de color o convertidor para generar el código hexadecimal que desees. De esa manera, hay menos posibilidades de que un codificador actual o futuro intente hacer la conversión por sí mismo y convierta tu hermosa página web en algo poco estético.

Trabajar con colores hexadecimales

Si estás acostumbrado a trabajar con colores en Adobe Illustrator o para impresión, trabajar con colores hexadecimales en la web es solo una cuestión de ajuste. Aquí hay un par de cosas que debes saber para que tu proyecto salga bien.

Ten cuidado con las bandas de color

Con 16 777 216 de colores potenciales, los códigos de color hexadecimales te permiten muchas opciones para contrastar colores. Pero debido a que cada píxel debe mostrar un color único, los colores hexadecimales no te permiten mezclar demasiado bien entre tonos de diferentes colores.

Cuando los diseñadores web intentan crear degradados con colores hexadecimales, los resultados no siempre son los esperados. Debido a que los tonos no se mezclan, la pantalla termina mostrando distintas bandas de color (bandeado o color banding).

Es más probable que se produzcan bandas de color en los dispositivos más antiguos que no pueden mostrar millones de colores. En CSS moderno, puedes programar degradados para eliminar el problema de las bandas de color. En las pantallas modernas, las bandas de color son más comunes en fotos de degradados naturales como cielos y arcoíris, donde los millones de colores visibles a simple vista se comprimen para ahorrar espacio en los archivos.

Ahorra tiempo con los recursos de la paleta de colores hexadecimales

Cuando estás desarrollando un look único sobre la marcha, seleccionar colores complementarios de los 16 millones que hay disponibles es una tarea abrumadora. Afortunadamente, otros diseñadores han hecho parte de este trabajo creando bases de datos de paletas de colores hexadecimales y selectores interactivos que te facilitan las cosas.

Color‑Hex Color Palettes: Explora y busca miles de combinaciones de colores hexadecimales creadas por la comunidad en Color‑Hex Color Palettes.

¿Quieres explorar? Ve página por página a través de las paletas con nombre. Cada paleta tiene un nombre para darte una idea de su estilo e identifica los seis caracteres hexadecimales. Haz clic en el nombre del diseñador para ver otras paletas de colores que haya realizado.

Color‑Hex Color Palettes es un recurso fantástico para la inspiración de colores hexadecimales.

Coolors: El recurso de color hexadecimal Coolors combina inspiración con funcionalidad para ayudar a acelerar el proceso de diseño.

Puedes explorar paletas de colores que son tendencia para ver qué llamó la atención de otros diseñadores. Cada paleta de tendencia se puede guardar en una sección de favoritos personales si te registras para tener una cuenta.

O usa su generador de paleta ultrarrápido para crear paletas basadas en los colores que deseas utilizar. Una característica de Coolors que ahorra tiempo es la capacidad de “fijar” un color (o colores) y luego generar colores complementarios adicionales con un toque de la barra espaciadora. De esta manera las nuevas opciones vuelan a velocidad de vértigo. Solo espera a dar con el color que te llame la atención.

Coolors también está disponible como aplicación de iOS o extensión de Adobe.

Combina colores hexadecimales con otros elementos de diseño

Si estás diseñando para un sitio que ya existe, o tiene otros elementos que deseas combinar, necesitas saber con qué colores hexadecimales estás trabajando en el sitio. Aquí es donde un buen selector de colores se vuelve fundamental, especialmente si vas a crear materiales de marketing llamativos. Con ImageColorPicker, puedes subir cualquier imagen y ver qué colores hexadecimales están representados.

Otro buen recurso es ColorPick Eyedropper, una extensión del navegador web de Google Chrome que te permite ver el color hexadecimal de cualquier elemento de una página web. Si te llama la atención un color de un sitio determinado, usa el Eyedropper para ver de qué se trata.

Si eres quien elige las imágenes y otros elementos para el sitio, necesitas tener una manera fácil de identificar los activos visuales que coincidan con tu paleta de colores hexadecimales. En iStock, puedes agregar un color hexadecimal como filtro para cualquier búsqueda. Ingresa el código, o selecciónalo de su selector de color, y luego escribe tus palabras clave de búsqueda. Los resultados te mostrarán imágenes relacionadas que coincidan bastante con el color que ingresaste.

¿Estás listo para comenzar a encontrar las imágenes ideales para tu esquema de color hexadecimal? Encuentra hoy los recursos visuales que complementarán tu proyecto.

Recommended for you

Life's a journey, enjoy the ride Derechos de autor y licencias Conceptos erróneos comunes sobre imágenes “libres de derechos de autor” Cuando estás buscando imágenes para un proyecto, es posible que hayas escuchado los términos “libre de derechos de autor” y “libre de derechos” y te hayas preguntado qué querían decir. ¿Puedo utilizar imágenes “libres de derechos de autor” para uso comercial? ¿Qué significa “libre de derechos”? ¿Qué son los derechos de autor?
Youtuber editing video on laptop for up to worldwide through Derechos de autor y licencias Vídeos de dominio público: ¿Qué son y cómo se usan? Obtén información sobre los vídeos de dominio público y cómo usarlos en tu próximo proyecto creativo. Además, mira los beneficios de utilizar secuencias de stock de pago en lugar de vídeos de dominio público.
Grandfather teaching his granddaughter to cook Marketing Cómo elegir imágenes de stock más auténticas y atractivas Las imágenes de stock poco naturales pueden distraer la atención y desenfocar tu proyecto. Utiliza estos trucos y consejos para encontrar imágenes de stock genuinas que te ayuden a conectar con tu audiencia.
Abstract wave gradient background Illustration Design Diseño Ideas de fondos que son tendencia para tu sitio web Los mejores consejos para el diseño de fondos de sitios web, incluyendo degradados, texturas, efectos líquidos y opciones de vídeo. Mira ejemplos específicos con los que puedes empezar a trabajar ya.
iStock Staff