Nombres de Colores y Códigos Hex

Encuentra el valor hex, RGB y HSL de cualquier nombre de color, o el color con nombre más cercano a un código. Con tonos, matices y contraste WCAG de 148 colores.


Escribe un nombre de color o pega un valor hex, RGB o HSL. Los cuatro formatos funcionan.
Limpiar

Todos los colores con nombre de CSS

Los 148 nombres de color incorporados en CSS, con sus valores hex y RGB. Pulsa cualquier fila para abrirla arriba.

Cómo funcionan los códigos hex

Un código hex son sencillamente tres números escritos en base 16: cuánto rojo, cuánto verde y cuánto azul, cada uno de 00 a FF. Así, #FFD700 significa rojo a plena intensidad, verde a 215 sobre 255 y nada de azul, lo que el ojo interpreta como dorado. Lo único que importa son los pares de dos dígitos, y por eso #FFF y #FFFFFF son ambos blanco.

Hex, RGB y HSL comparados

Los tres describen los mismos colores, solo que transmiten información distinta. El hex es compacto y la opción habitual en CSS. El RGB son esos mismos números en decimal, más cómodos para hacer cálculos. El HSL separa el tono de la saturación y la luminosidad, de modo que resulta mucho más fácil construir una paleta a mano: mantén el tono, cambia la luminosidad y ya tienes una variante que combina.

Por qué importa el contraste

El texto tiene que destacar lo suficiente sobre su fondo para que puedan leerlo personas con baja visión o en una pantalla poco luminosa. Las pautas de accesibilidad fijan una relación de 4,5 a 1 para el texto normal (AA) y de 7 a 1 para el nivel más estricto AAA. Al texto grande se le permite 3 a 1. Esta herramienta calcula la relación frente al blanco y al negro para que veas de inmediato cuál poner encima.

Conviene saber

  • CSS tiene 148 colores con nombre, y varios están duplicados: grey y gray, o aqua y cyan, son idénticos.
  • La forma abreviada del hex solo funciona cuando cada par se repite, así que #FFCC00 puede escribirse #FC0, pero #FFD700 no se puede acortar.
  • Añadir dos dígitos hex más define la transparencia, de modo que #FFD70080 es dorado a aproximadamente la mitad de opacidad.
  • Para construir una paleta, mantén el tono en HSL y varía solo la luminosidad. Los colores siempre parecerán emparentados.

Preguntas frecuentes

El color de CSS llamado gold es #FFD700, es decir rgb(255, 215, 0). Es un amarillo dorado luminoso más que un tono metálico, ya que un color plano no puede reproducir el brillo del oro real. Para un aspecto más metálico, los diseñadores suelen combinarlo con dorados más oscuros como #B8860B, que en CSS se llama darkgoldenrod.

Escribe el nombre en el cuadro de arriba y obtendrás juntos los valores hex, RGB y HSL. Funciona con los 148 colores con nombre de CSS, y también a la inversa: pega un código hex y te indicará el color con nombre más cercano junto con su distancia exacta.

Contienen exactamente la misma información en notaciones distintas. El hex escribe cada uno de los tres canales con dos dígitos en base 16, de modo que #FF7F50 es rojo 255, verde 127, azul 80. El RGB escribe esos mismos números en decimal como rgb(255, 127, 80). Ninguno es más preciso; el hex simplemente es más corto de teclear en CSS.

Tono, saturación y luminosidad. El tono es la posición en la rueda cromática de 0 a 360 grados, la saturación indica lo vivo que es el color y la luminosidad va del negro al 0% al blanco al 100%. Es el formato más práctico para diseñar, porque mantener el tono y cambiar solo la luminosidad produce un conjunto de variantes que evidentemente pertenecen al mismo grupo.

La especificación de CSS incluye 148 colores con nombre, transparent entre ellos. Varios nombres remiten a valores idénticos, en particular grey y gray, aqua y cyan, y magenta y fuchsia. La lista completa con valores hex y RGB está en esta página.

Las pautas de accesibilidad piden al menos 4,5 a 1 para el texto normal y 3 a 1 para el texto grande, lo que corresponde al nivel AA. El nivel más estricto AAA exige 7 a 1. Esta herramienta calcula la relación de tu color frente al blanco y al negro y te dice cuál cumple, para que elijas la opción legible de inmediato.

Sí. Un código hex de ocho dígitos añade dos dígitos de alfa al final, donde 00 es totalmente transparente y FF totalmente opaco. Así, #FF000080 es rojo a aproximadamente el 50% de opacidad. Todos los navegadores actuales lo admiten, aunque la notación más antigua rgba() sigue siendo muy común.

Porque los 148 colores con nombre son una muestra minúscula de los aproximadamente 16,7 millones que puede mostrar una pantalla. Si tu valor no coincide con uno de esos puntos exactos, esta herramienta busca el color con nombre más próximo midiendo la distancia entre ambos en el espacio RGB, y te avisa de que se trata de una aproximación y no de una coincidencia.

¿Cuál es el código hex de un color?

Escribe un nombre de color y obtén de una vez sus valores hex, RGB y HSL, o pega cualquier código para encontrar el color de CSS con nombre más cercano. Gold es #FFD700, coral es #FF7F50 y teal es #008080. Cada resultado muestra además sombras, matices y la relación de contraste frente al negro y al blanco.