8 minutos de lectura
La guía definitiva de colores hex
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 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/RVA (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.
¿Por qué utilizar el código hex en lugar de números? Porque si usaras números, cada valor rojo, verde o azul de 0 a 255, podría ser de uno, dos o tres dígitos. 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 hexadecimal 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 puede resultar útil si diseñas con un programador sobre la marcha.
Códigos de colores hexadecimales populares
| Color | RGB | Código de color hexadecimal |
| Negro | (0, 0, 0) | #000000 |
| Azul | (0, 0, 255) | #0000FF |
| Gris | (128, 128, 128) | #808080 |
| Verde | (0, 128, 0) | #008000 |
| Morado | (128, 0, 128) | #800080 |
| Rojo | (255, 0, 0) | #FF0000 |
| Blanco | (255, 255, 255) | #FFFFFF |
Códigos de colores hexadecimales únicos
| Color | RGB | Código de color hexadecimal | Uso |
| Azul Alicia | (240, 248, 255) | #F0F8FF | Fondo sutil para comercio electrónico o página corporativa |
| Coral | (255, 127, 80) | #FF7F50 | Color con tono apacible |
| FireBrick | (178, 34, 34) | #B22222 | Color con tono enérgico |
| HotPink | (255, 105, 180) | #FF69B4 | Color con tono lúdico |
| LemonChiffon | (255, 250, 205) | #FFFACD | Fondo romántico para una boda u otra página personal |
¿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 puede 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 16.777.216, que es más de lo que el ojo humano puede distinguir.
¿Cuál es la diferencia entre usar 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á 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 hex 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 hex que desees. De esa manera, hay menos posibilidades de que un programador 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.
Paletas de colores Color-Hex: 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 nombradas. Cada paleta tiene un nombre para darte una idea de su estilo e identifica los seis colores hexadecimales. Haz clic en el nombre del diseñador para ver otras paletas de colores que haya realizado.
Las paletas de color Color-Hex son 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 paletas 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 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 color es imprescindible. Con ImageColorPicker, puedes cargar 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 hex 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 recursos 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 se asemejen mucho al color que ingresaste.
¿Estás listo para comenzar a encontrar las imágenes ideales para tu esquema de color hexadecimal? Entra aquí para encontrar los recursos visuales que complementarán proyecto.
¿Fue útil este artículo?
Más recursos para ti
- 6 minutos de lectura
- 11 minutos de lectura