Códigos de colores HTML
Todos los colores con nombre que admiten HTML y CSS, con su código HEX, RGB y HSL. Busca por nombre o código, filtra por familia de color, ordena por tono o luminosidad y haz clic en cualquier color para copiar su código. La paleta web segura de 216 colores está a una pestaña de distancia.
Última actualización:
Cada bloque comparte un valor de rojo (00 a FF); las filas cambian el verde y las columnas el azul. Haz clic en una celda para copiar su código HEX.
Cómo usar Códigos de colores HTML
- Explora o busca: desplázate por la cuadrícula o escribe un nombre ("blue", "sea") o un código HEX ("#ff7f50") en el cuadro de búsqueda.
- Filtra por familia de color con los botones y elige cómo ordenar la cuadrícula: por familia, nombre, tono, luminosidad o HEX.
- Elige un formato de copia: nombre, HEX, RGB o HSL.
- Haz clic en un color para copiar su código. El panel de detalle muestra todos los formatos con su propio botón de copiar y el contraste frente a texto blanco y negro.
- ¿Necesitas colores web seguros? Abre la pestaña Paleta web segura y haz clic en cualquiera de las 216 celdas para copiar su código HEX.
Cómo funcionan los códigos de colores HTML
Un código de color HEX como #FF7F50 son tres pares de dígitos hexadecimales para los canales rojo, verde y azul. Cada par va de 00 (0, nada de esa luz) a FF (255, intensidad máxima), así que #FF7F50 significa rojo 255, verde 127, azul 80, que es rgb(255, 127, 80) y el color con nombre coral. La forma abreviada de tres dígitos duplica cada dígito: #369 es #336699.
HSL describe el mismo color como tono (0 a 360 grados alrededor de la rueda de color: 0 rojo, 120 verde, 240 azul), saturación (0% gris a 100% intenso) y luminosidad (0% negro, 50% color puro, 100% blanco). Es el formato más fácil para aclarar u oscurecer un poco un color a mano.
| Formato | Ejemplo (coral) | Uso en CSS |
|---|---|---|
| Nombre del color | coral | color: coral; |
| HEX | #FF7F50 | color: #ff7f50; |
| HEX con alfa | #FF7F5080 | color: #ff7f5080; (50% de opacidad) |
| RGB | rgb(255, 127, 80) | color: rgb(255 127 80 / 50%); |
| HSL | hsl(16, 100%, 66%) | color: hsl(16 100% 66%); |
Los 16 colores HTML básicos
Estos 16 nombres se remontan a HTML 3.2 (1997) y son los que verás con más frecuencia en código y tutoriales antiguos. Los demás nombres se añadieron a partir de la lista de colores del sistema de ventanas X11.
| Nombre | HEX | RGB | Nombre | HEX | RGB |
|---|---|---|---|---|---|
| black | #000000 | 0, 0, 0 | silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 | white | #FFFFFF | 255, 255, 255 |
| maroon | #800000 | 128, 0, 0 | red | #FF0000 | 255, 0, 0 |
| purple | #800080 | 128, 0, 128 | fuchsia | #FF00FF | 255, 0, 255 |
| green | #008000 | 0, 128, 0 | lime | #00FF00 | 0, 255, 0 |
| olive | #808000 | 128, 128, 0 | yellow | #FFFF00 | 255, 255, 0 |
| navy | #000080 | 0, 0, 128 | blue | #0000FF | 0, 0, 255 |
| teal | #008080 | 0, 128, 128 | aqua | #00FFFF | 0, 255, 255 |
Ten en cuenta que el green de CSS es un verde medio (#008000); el canal verde puro de máxima intensidad se llama lime.
Cómo elegir colores de texto legibles
El panel de detalle muestra la relación de contraste WCAG 2 del color seleccionado frente a texto blanco y negro. La relación es (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son las luminancias relativas del color más claro y del más oscuro. El texto normal necesita al menos 4.5:1 para el nivel AA y 7:1 para AAA; el texto grande (unos 24 px, o 19 px en negrita) necesita 3:1. Por ejemplo, el texto blanco sobre steelblue solo alcanza unos 4.1:1, mientras que el blanco sobre navy supera con creces 7:1. Para comprobar dos colores cualesquiera, usa el Comprobador de contraste de color.
Preguntas frecuentes
¿Cuántos nombres de colores HTML hay?
Hay 140 nombres de colores HTML clásicos que admiten todos los navegadores, como red, navy, coral y lightgoldenrodyellow. CSS Color Level 4 añade rebeccapurple (#663399) y también acepta la grafía británica grey en siete nombres (grey, darkgrey, lightgrey, dimgrey, slategrey, darkslategrey, lightslategrey), lo que suma 148 palabras clave en total. Esta página muestra los 141 nombres distintos.
¿Los nombres de colores HTML distinguen mayúsculas y minúsculas?
No. Las palabras clave de color de CSS no distinguen mayúsculas y minúsculas, así que Red, RED y red significan #FF0000. La mayoría de las guías de estilo los escriben en minúsculas, que es como se copia el código desde esta página.
¿Algunos nombres de colores comparten el mismo código?
Sí. aqua y cyan son ambos #00FFFF, y fuchsia y magenta son ambos #FF00FF. Las grafías gray y grey también son idénticas.
¿Qué son los colores web seguros?
La paleta web segura son 216 colores formados por todas las combinaciones de los valores 00, 33, 66, 99, CC y FF para rojo, verde y azul. Se diseñó para las pantallas de los años 90, que solo podían mostrar 256 colores. Las pantallas modernas muestran millones de colores, así que ya no tienes que limitarte a ella, pero sus códigos cortos como #369 siguen siendo prácticos.
¿Debo usar nombres de colores o códigos HEX en CSS?
Ambos funcionan en todos los navegadores. Los nombres son más fáciles de leer en prototipos rápidos, mientras que HEX, RGB o HSL te dan el tono exacto que necesitas de un diseño y son los que usan la mayoría de las herramientas de diseño. El color mostrado es idéntico para un nombre y su valor HEX.
¿Por qué "darkgray" es más claro que "gray"?
Es una rareza histórica. Los nombres de CSS provienen de la lista de colores de X11, donde darkgray es #A9A9A9, mientras que gray se tomó del conjunto más antiguo de HTML 3.2 con #808080. Por eso darkgray acaba siendo más claro que gray.
¿Cómo escribo un código de color en HTML?
Usa CSS, por ejemplo style="color: tomato" o style="background-color: #FF6347" o color: rgb(255, 99, 71). Los tres dan el mismo rojo tomate.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.