¿Qué es un código de color hexadecimal y cómo se lee #2F6FED?

Un diseñador, un manual de identidad corporativa o el panel de ajustes de un sitio le ha pasado algo parecido a #2F6FED. Empieza con una almohadilla, siguen seis letras y cifras mezcladas, y de ahí sale un color. Esta guía explica qué están diciendo esos seis caracteres.

Aprender a leerlos tiene una utilidad concreta: ponga dos códigos uno al lado del otro y sabrá cuál es más oscuro y cuál tira más al azul sin mirar ninguna muestra. Además podrá aclarar u oscurecer un color a mano, con criterio.

Por qué un color se describe con un número

Cada punto de su pantalla está hecho de tres lucecitas: roja, verde y azul. Ajustando por separado la intensidad de cada una se consiguen millones de colores. «Azul marino» significa algo ligeramente distinto para cada persona, pero indique la intensidad de las tres luces en números y todas las pantallas producirán el mismo color.

Un código hexadecimal comprime esos tres números en una sola escritura. La almohadilla del principio solo anuncia que a continuación viene un código de color; no aporta ningún valor por sí misma. Los seis caracteres que siguen se parten en tres parejas, y cada pareja da la intensidad de una luz, en este orden: rojo, verde, azul.

Dicho de otro modo, #2F6FED no es un nombre sino una instrucción: sube el rojo hasta aquí, el verde hasta aquí, el azul hasta aquí. Por eso el mismo código significa el mismo color en cualquier programa y en cualquier pantalla.

Desarmar #2F6FED

Parta el código en tres trozos: 2F, 6F y ED. Cada uno representa una intensidad entre 0 y 255, donde 0 significa que esa luz está apagada del todo y 255 que está subida al máximo.

Escrito de la otra manera habitual, el mismo color queda como rgb(47, 111, 237): exactamente la misma instrucción con otra ropa. El rojo está bajo, el verde a media altura y el azul casi al tope, así que el resultado es un azul vivo. Esa es también la forma rápida de juzgar un código de un vistazo, viendo qué pareja es la mayor.

¿Por qué hay letras? Contar de dieciséis en dieciséis

En la vida diaria contamos con diez cifras: del 0 al 9 y luego cambiamos de columna. Los códigos hexadecimales cuentan con dieciséis símbolos; después del 9, en vez de cambiar de columna, siguen con la A. Así, A vale diez, B once, C doce, D trece, E catorce y F quince.

El primer carácter de una pareja cuenta las dieciseisenas y el segundo cuenta las unidades. Desarmemos ED: la E vale catorce, y catorce veces dieciséis son 224; sume los 13 que representa la D y llega a 237. Nunca tendrá que hacer esta cuenta a mano: pegue el código en el Convertidor de código de color y los tres canales salen ya calculados.

El valor más pequeño que puede llevar una pareja es 00 y el mayor FF, lo que deja 256 escalones entre ambos. La tabla de abajo relee algunos colores conocidos con esa misma lógica.

Códigos de tres caracteres y transparencia de ocho

A veces se encontrará códigos de tres caracteres como #F00. Es una abreviatura en la que cada carácter se duplica a sí mismo, de modo que #F00 es realmente #FF0000. Por la misma regla, #2F6 significa #22FF66; fíjese en que ese es un color completamente distinto de #2F6FED, no una versión corta de él.

Los códigos de ocho caracteres añaden una pareja más al final, y esa pareja fija cuánta transparencia tiene el color: 00 es del todo invisible y FF del todo opaco. Un valor intermedio deja asomar parte de lo que haya debajo.

Mayúsculas o minúsculas dan igual: #2f6fed y #2F6FED son el mismo color. Algunos programas no quieren la almohadilla delante y otros la añaden por usted.

¿Cómo averiguo el código de un color que estoy viendo?

Lo más habitual es no tener el código en absoluto: el color que le interesa está en una fotografía, en un logotipo o en cualquier parte de la pantalla. El camino no es adivinarlo a ojo, sino dejar que lo mida una herramienta que no se equivoca.

Si el color está en pantalla, empiece por una captura. En Windows, mantenga la tecla Windows junto con Mayús y S para recortar una zona; en un Mac, use Comando, Mayús y 4. En el teléfono, la captura va directa a su galería. Después abra la imagen en un programa de dibujo: en Paint, la herramienta cuentagotas toma el color de un punto y el botón «Editar colores» muestra sus tres valores de Rojo, Verde y Azul. En un Mac, la utilidad que viene con el sistema y se llama Medidor de Color Digital hace lo mismo sin instalar nada: está en la carpeta Aplicaciones, dentro de Utilidades.

Con eso acaba teniendo tres números en lugar de un código. Esa es justamente la entrada del Convertidor de código de color: dele rgb(47, 111, 237) y le devuelve #2F6FED, listo para pegar en un manual de marca o en un formulario.

Una advertencia: en una fotografía el color de una superficie nunca es un valor único, porque la luz y la sombra lo desplazan. Tome varios puntos de la misma zona y quédese con el intermedio, o recorte la imagen a la mancha que le interesa antes de medir.

Ya tiene el código, ¿y ahora qué?

Un solo color rara vez basta. La versión más oscura que adopta un botón al pasar el cursor, el fondo pálido de una tarjeta, la línea desvaída de un borde: todos son miembros de la misma familia. Para fabricarlos a mano, use la escritura HSL, que el Convertidor de código de color muestra junto al hexadecimal: los dos primeros números fijan el tono y la saturación, y el tercero la luminosidad. Deje los dos primeros quietos, suba o baje el tercero de diez en diez y obtendrá una escala coherente en vez de ir tanteando seis caracteres.

El segundo asunto es la legibilidad, y ese no se resuelve a ojo. La distancia entre el color del texto y el del fondo se mide con un único número, la relación de contraste; las reglas de accesibilidad WCAG piden como mínimo 4,5:1 para el texto de tamaño normal y como mínimo 3:1 para los títulos grandes. Una señal de alarma mientras no puede medirlo: si sus dos colores tienen luminosidades HSL parecidas, la relación será mala por muy distintos que sean sus tonos.

El tercer asunto es traducir entre notaciones. Un sitio pide hexadecimal, otro RGB y un tercero HSL; el convertidor entrega los tres a la vez. Sirve mucho más allá de la web: las hojas de cálculo, los procesadores de texto y los programas de presentaciones suelen pedir los valores R, V y A por separado, mientras que el manual de marca que le enviaron solo trae códigos hexadecimales.

Reglas WCAG 2.2 sobre contraste (W3C, texto de referencia) →

Preguntas frecuentes

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

Es una escritura de seis caracteres que expresa en base dieciséis las partes de rojo, verde y azul de un color. Tras la almohadilla, los dos primeros caracteres corresponden al rojo, los dos del medio al verde y los dos últimos al azul; cada pareja equivale a una intensidad entre 0 y 255.

¿Cómo obtengo el código hexadecimal de un color que veo en pantalla?

Haga una captura de pantalla, ábrala en un programa de dibujo y tome el punto que le interesa con el cuentagotas: la ventana de colores mostrará sus tres valores de Rojo, Verde y Azul. Entregue esos tres números al Convertidor de código de color y obtendrá el código hexadecimal correspondiente.

¿Son #2F6 y #2F6FED el mismo color?

No. En la abreviatura de tres caracteres cada carácter se duplica a sí mismo, así que #2F6 significa en realidad #22FF66. La abreviatura solo funciona con códigos cuyas parejas ya son iguales: #F00 sí es #FF0000.

¿Los códigos se escriben en mayúsculas o en minúsculas?

Da lo mismo: #2f6fed y #2F6FED definen el mismo color. Mantener un criterio uniforme dentro de un mismo documento solo sirve para facilitar la lectura.

¿Cómo sé si mi color se lee bien como texto?

Mida la relación de contraste entre el color del texto y el del fondo; las reglas WCAG piden al menos 4,5:1 para texto de tamaño normal y 3:1 para títulos grandes. Juzgar a ojo engaña: el brillo de su pantalla basta para cambiarle el veredicto.

Última actualización: 27 de agosto de 2026