Qué es un color hexadecimal y cómo se interpreta un código HEX

Hay una frase que aparece mucho cuando se prepara una web, se revisa un logotipo o se intenta recuperar el color corporativo de una empresa:

“Ese no es exactamente nuestro azul.”

El problema llega cuando preguntamos cuál es el azul correcto y la única referencia disponible es una captura de pantalla, una tarjeta impresa hace años o un archivo de Word donde el tono cambia según el ordenador que lo abra.

Para evitar ese pequeño juego de adivinanzas existen los códigos de color hexadecimal. Un valor como #F28C28 no dice que el naranja sea cálido, alegre, intenso o “un poco tostado”. Describe una combinación concreta de rojo, verde y azul que el navegador puede interpretar.

Eso no significa que vaya a verse idéntico en cualquier pantalla ni que combine bien con el resto de la web. Pero, al menos, dejamos de definir los colores con palabras que podrían servir tanto para una pared como para una puesta de sol.

Qué es un color hexadecimal

Un color hexadecimal es una manera de escribir un color utilizando el sistema numérico de base 16.

En diseño web suele aparecer con esta estructura:

#RRGGBB

Las tres parejas representan los canales que forman un color RGB:

• RR: rojo.
• GG: verde.
• BB: azul.

Al modificar la intensidad de esos tres canales se pueden obtener millones de tonos diferentes.

Por ejemplo:

#FF0000

En este código, el rojo está al máximo y tanto el verde como el azul están a cero. El resultado es rojo puro.

Otro ejemplo:

#0000FF

Aquí el canal azul está al máximo y los otros dos están apagados. El resultado es azul puro.

Por qué aparecen letras dentro del código

El sistema decimal utiliza diez símbolos:

0 1 2 3 4 5 6 7 8 9

El hexadecimal necesita dieciséis, por eso añade las letras de la A a la F:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Las equivalencias son sencillas:

Hexadecimal	Decimal
A	10
B	11
C	12
D	13
E	14
F	15

Cada pareja hexadecimal puede ir desde 00 hasta FF. Traducido a decimal, eso equivale a una intensidad comprendida entre 0 y 255.

Cómo se lee un código hexadecimal

Vamos a utilizar como ejemplo este naranja:

#F28C28

Al separarlo por canales queda así:

# F2 8C 28
  RR GG BB

• F2 corresponde al rojo.
• 8C corresponde al verde.
• 28 corresponde al azul.

Convertido a RGB, el mismo color se escribiría así:

rgb(242 140 40)

Hay una cantidad alta de rojo, una presencia intermedia de verde y poco azul. Esa combinación produce el naranja.

Cómo se forma el blanco

#FFFFFF

Los tres canales están al máximo:

rgb(255 255 255)

El resultado es blanco.

Cómo se forma el negro

#000000

Los tres canales están a cero:

rgb(0 0 0)

El resultado es negro.

Cómo se forman los grises

Cuando los tres canales tienen el mismo valor, obtenemos un tono neutro.

Por ejemplo:

#808080

Equivale a:

rgb(128 128 128)

Si aumentamos los tres valores, el gris será más claro. Si los reducimos, será más oscuro.

Tabla de colores hexadecimales habituales

No existe un único rojo, un único azul o un único verde. Cada uno de esos nombres puede esconder miles de variaciones.

Aun así, esta tabla resulta útil como referencia rápida para algunos colores básicos:

Color	Código HEX	Equivalencia RGB
Negro	#000000	rgb(0 0 0)
Blanco	#FFFFFF	rgb(255 255 255)
Rojo	#FF0000	rgb(255 0 0)
Verde intenso	#00FF00	rgb(0 255 0)
Azul	#0000FF	rgb(0 0 255)
Amarillo	#FFFF00	rgb(255 255 0)
Cian	#00FFFF	rgb(0 255 255)
Magenta	#FF00FF	rgb(255 0 255)
Gris	#808080	rgb(128 128 128)
Gris claro	#D3D3D3	rgb(211 211 211)
Naranja	#FFA500	rgb(255 165 0)
Morado	#800080	rgb(128 0 128)
Rosa	#FFC0CB	rgb(255 192 203)
Marrón	#A52A2A	rgb(165 42 42)

Formatos de color hexadecimal que admite CSS

El formato de seis dígitos es el más conocido, pero no es el único. CSS también admite versiones abreviadas y códigos con transparencia.

Formato de seis dígitos: #RRGGBB

#F28C28

Utiliza dos caracteres para cada canal: rojo, verde y azul.

Formato abreviado de tres dígitos: #RGB

#FFF

Equivale a:

#FFFFFF

Cada carácter se repite:

• #000 equivale a #000000.
• #F63 equivale a #FF6633.
• #09C equivale a #0099CC.

No todos los códigos pueden abreviarse.

Por ejemplo, #F28C28 no puede reducirse correctamente a tres caracteres, porque sus parejas no están formadas por valores repetidos.

Formato de ocho dígitos: #RRGGBBAA

Los dos últimos caracteres representan la transparencia:

#RRGGBBAA

Por ejemplo:

#FF000080

Es rojo con una opacidad aproximada del 50 %.

• 00 significa completamente transparente.
• FF significa completamente opaco.
• 80 se aproxima a la mitad de opacidad.

Formato abreviado de cuatro dígitos: #RGBA

#F008

Equivale a:

#FF000088

Los tres primeros caracteres representan rojo, verde y azul. El cuarto controla la transparencia.

Cómo utilizar un color hexadecimal en CSS

Los códigos HEX pueden aplicarse a textos, fondos, bordes, iconos y muchos otros elementos.

Color de texto

p {
  color: #222222;
}

Color de fondo

body {
  background-color: #FFFFFF;
}

Un botón

.boton {
  background-color: #F28C28;
  color: #FFFFFF;
  border: 1px solid #D97706;
}

Una capa con transparencia

.capa-oscura {
  background-color: #00000080;
}

En este caso se aplica un negro semitransparente, algo habitual cuando se coloca texto sobre una fotografía.

¿Son colores HTML o colores CSS?

Durante años se ha hablado de “colores HTML”, y esa expresión sigue apareciendo en muchas búsquedas y herramientas. Pero el color de una página se define normalmente mediante CSS.

Puede escribirse dentro de una etiqueta:

<p style="color: #F28C28;">Texto naranja</p>

Aun así, la parte color: #F28C28; sigue siendo CSS colocado dentro del HTML.

Lo habitual es separar el contenido del estilo:

<p class="texto-destacado">Texto naranja</p>

.texto-destacado {
  color: #F28C28;
}

Esto facilita reutilizar los estilos y mantener la web sin tener que corregir el mismo color en veinte páginas distintas.

Diferencias entre HEX, RGB y HSL

HEX, RGB y HSL no son tres colores diferentes. Son tres formas de describirlos.

HEX

#F28C28

Es compacto, muy habitual en diseño y fácil de copiar entre programas.

RGB

rgb(242 140 40)

Muestra directamente la intensidad de rojo, verde y azul mediante valores entre 0 y 255.

HSL

hsl(31 89% 55%)

Describe el color mediante:

• Tono: su posición dentro del círculo cromático.
• Saturación: su intensidad.
• Luminosidad: lo claro u oscuro que resulta.

Formato	Ejemplo	Resulta cómodo para
HEX	#F28C28	Guardar, documentar y compartir colores.
RGB	rgb(242 140 40)	Leer directamente la intensidad de cada canal.
HSL	hsl(31 89% 55%)	Aclarar, oscurecer o modificar un tono con más lógica visual.

No hay un ganador universal. Muchas veces se utiliza HEX para guardar la paleta y HSL para crear variaciones del mismo color.

Cómo convertir un color RGB a hexadecimal

Para pasar de RGB a HEX hay que convertir cada canal decimal en una pareja hexadecimal.

Tomemos el rojo puro:

rgb(255 0 0)

La conversión queda así:

• 255 equivale a FF.
• 0 equivale a 00.
• 0 equivale a 00.

Al unir los tres valores:

#FF0000

Otro ejemplo:

rgb(242 140 40)

• 242 equivale a F2.
• 140 equivale a 8C.
• 40 equivale a 28.

El resultado es:

#F28C28

En el trabajo diario no hace falta realizar estas cuentas a mano. Los navegadores y las herramientas de diseño suelen mostrar ambas notaciones.

Cómo averiguar el código HEX de un color

La forma más sencilla depende de dónde aparezca el color.

En una página web

Las herramientas de desarrollo del navegador permiten inspeccionar un elemento y consultar los estilos que se le aplican.

En Figma, Photoshop, Illustrator o programas similares

El selector de color muestra normalmente el valor HEX, RGB y otras equivalencias.

En una imagen

Puede utilizarse un cuentagotas para seleccionar un píxel.

Pero aquí aparece una trampa habitual: una fotografía o una captura puede tener sombras, compresión, reflejos y variaciones de iluminación. Elegir un píxel no siempre permite recuperar el color original de la marca.

En el código CSS

Las hojas de estilo pueden contener directamente el código o guardarlo dentro de una variable:

:root {
  --color-principal: #F28C28;
  --color-texto: #222222;
  --color-fondo: #FFFFFF;
}

Las variables facilitan cambiar una paleta completa desde un único lugar.

Qué es una paleta de colores hexadecimales

Una paleta hexadecimal es un conjunto de colores identificados mediante sus códigos HEX.

En una web no basta con elegir dos tonos que se vean bien juntos. Conviene decidir para qué se utilizará cada uno:

• Color principal.
• Color secundario.
• Color de acento.
• Color del texto.
• Fondos claros y oscuros.
• Bordes.
• Mensajes de error.
• Estados de confirmación.

Una paleta básica podría documentarse así:

Uso	Código HEX
Color principal	#F28C28
Versión oscura	#B45309
Versión clara	#FED7AA
Texto	#1F2937
Fondo claro	#FFF7ED

Asignar una función evita que cada página termine utilizando un naranja ligeramente distinto porque alguien lo eligió de nuevo a ojo.

Qué fue la paleta web safe

La paleta web safe reunía 216 colores pensados para equipos capaces de mostrar una cantidad muy limitada de tonos.

En los primeros años de la web ayudaba a evitar que algunos colores se sustituyeran o se representaran mediante tramados.

Los dispositivos actuales pueden mostrar millones de colores, por lo que una web moderna no necesita limitarse a aquellos 216 valores.

¿Un código HEX se ve igual en todas las pantallas?

El código representa el mismo valor, pero el aspecto que percibimos puede cambiar.

Influyen factores como:

• La calidad de la pantalla.
• La calibración.
• El brillo.
• El modo nocturno.
• El perfil de color.
• La iluminación de la habitación.
• Los ajustes del sistema.

Por eso dos dispositivos pueden mostrar diferencias aunque estén leyendo exactamente el mismo código.

El HEX aporta una referencia técnica común. No convierte todas las pantallas del mundo en el mismo monitor calibrado.

Colores hexadecimales y accesibilidad web

Dos códigos pueden formar una combinación atractiva y seguir siendo difíciles de leer.

Hay que comprobar el contraste entre:

• Texto y fondo.
• Botones y superficie.
• Enlaces y texto corriente.
• Iconos y fondos.
• Mensajes de error y confirmación.

Como referencia general, suele trabajarse con un contraste mínimo de:

• 4,5:1 para texto normal.
• 3:1 para texto grande.

Hay excepciones y condiciones específicas, pero estos valores sirven como punto de partida.

En nuestra página sobre diseño web accesible con WordPress explicamos otros aspectos que deben revisarse para que una web pueda utilizarse con más facilidad.

HEX no es lo mismo que CMYK o Pantone

Los códigos HEX están pensados principalmente para pantalla.

Cuando una identidad visual también va a imprimirse, pueden hacer falta otras referencias:

• CMYK.
• Pantone.
• Perfiles de color.
• Pruebas impresas.

Una pantalla emite luz. Una impresión utiliza tintas sobre papel, cartón, vinilo u otros soportes. Son sistemas diferentes y no siempre pueden reproducir exactamente los mismos tonos.

El resultado también cambia según:

• El tipo de papel.
• La tinta.
• La máquina.
• El acabado.
• El perfil utilizado.

Por eso un manual de identidad no debería limitarse a indicar un único código HEX y dar el trabajo por terminado.

En nuestro servicio de diseño de logo profesional preparamos las versiones y referencias necesarias para utilizar la marca tanto en medios digitales como en soportes impresos.

Errores frecuentes con los colores hexadecimales

Olvidar el símbolo #

La notación debe comenzar con una almohadilla:

#F28C28

Utilizar letras que no existen en hexadecimal

Solo pueden utilizarse:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Un código como #GG5500 no es válido.

Escribir una cantidad incorrecta de caracteres

CSS admite códigos de 3, 4, 6 u 8 dígitos. Un valor de cinco o siete caracteres no representa un color HEX válido.

Abreviar un código que no puede reducirse

#FF6633 puede escribirse como #F63.

#F28C28 no puede convertirse en #F82, porque se perdería información y aparecería otro color.

Confundir transparencia con luminosidad

Reducir la opacidad no aclara realmente el tono. Hace que se mezcle con el fondo.

No comprobar el contraste

Que dos colores pertenezcan a la misma paleta no significa que un texto sea legible sobre el otro.

Extraer el color de una imagen comprimida

El píxel elegido puede haber cambiado respecto al original.

Utilizar demasiadas variaciones casi iguales

Una web con doce grises, seis azules y cuatro naranjas apenas distintos termina siendo difícil de mantener.

Usar HEX como única referencia de impresión

El código sirve para medios digitales. La impresión necesita otras especificaciones.

Pensar que las mayúsculas cambian el color

Estas dos formas son equivalentes:

#F28C28
#f28c28

Cómo preparar una paleta que funcione de verdad

Elegir colores bonitos es la parte sencilla. Lo complicado empieza cuando hay que utilizarlos.

Una paleta debe comprobarse en situaciones reales:

• Botones normales y al pasar el cursor.
• Fondos claros y oscuros.
• Títulos y párrafos.
• Formularios.
• Mensajes de error.
• Fotografías.
• Pantallas pequeñas.
• Documentos impresos.

También conviene centralizar los valores mediante variables CSS:

:root {
  --color-principal: #F28C28;
  --color-principal-oscuro: #B45309;
  --color-texto: #1F2937;
  --color-fondo: #FFFFFF;
  --color-borde: #E5E7EB;
}

Después pueden utilizarse en toda la web:

.boton {
  background-color: var(--color-principal);
  color: var(--color-fondo);
}

Así, si el color corporativo cambia, no hay que perseguir el código por decenas de hojas de estilo.

Qué debes recordar sobre los códigos HEX

La idea principal es bastante más sencilla de lo que parece cuando uno ve por primera vez una mezcla de números y letras:

• El formato habitual es #RRGGBB.
• Cada pareja representa rojo, verde y azul.
• Los valores van desde 00 hasta FF.
• CSS también admite formatos de 3, 4 y 8 dígitos.
• Los códigos de 4 y 8 dígitos incluyen transparencia.
• HEX y RGB pueden describir el mismo color.
• El código no garantiza que una combinación sea accesible.
• HEX no sustituye las referencias necesarias para impresión.

Preguntas frecuentes sobre colores hexadecimales

¿Qué es un color hexadecimal?

Es una forma de representar un color RGB mediante un código precedido por #. El formato más habitual utiliza dos caracteres para el rojo, dos para el verde y dos para el azul.

¿Qué significa HEX?

Es la abreviatura de hexadecimal, un sistema numérico de base 16 que utiliza los números del 0 al 9 y las letras de la A a la F.

¿Qué significa #RRGGBB?

RR representa rojo, GG representa verde y BB representa azul.

¿Cuál es el código hexadecimal del blanco?

El blanco es #FFFFFF. También puede escribirse como #FFF.

¿Cuál es el código hexadecimal del negro?

El negro es #000000. Su versión abreviada es #000.

¿Cuál es el código HEX del rojo?

El rojo puro es #FF0000.

¿HEX y RGB son lo mismo?

Son dos notaciones diferentes que pueden representar el mismo color. Por ejemplo, #FF0000 equivale a rgb(255 0 0).

¿Qué códigos HEX admiten transparencia?

Los formatos #RGBA y #RRGGBBAA incluyen un canal alfa que controla la opacidad.

¿Qué significa FF en hexadecimal?

FF equivale a 255 en decimal y representa la intensidad máxima de un canal.

¿Se puede escribir un código HEX en minúsculas?

Sí. #FFFFFF y #ffffff representan exactamente el mismo color.

¿Cómo puedo obtener el HEX de una imagen?

Puedes utilizar el cuentagotas de una herramienta de diseño o edición, aunque una captura o una fotografía puede no conservar exactamente el color original.

¿Qué es una paleta hexadecimal?

Es un conjunto de colores identificados mediante sus códigos HEX y seleccionados para utilizarse de forma coherente dentro de un diseño.

¿Los colores HEX sirven para imprimir?

Son una referencia digital. Para impresión suelen necesitarse valores CMYK, Pantone, perfiles de color y, en algunos casos, pruebas impresas.

¿Qué es la paleta web safe?

Es una antigua selección de 216 colores creada para pantallas con capacidades limitadas. Ya no supone una restricción general para las webs actuales.

¿Un código HEX garantiza que el color se verá igual en todos los dispositivos?

No. El valor es el mismo, pero la apariencia puede cambiar según la pantalla, la calibración, el brillo y las condiciones de visualización.