Colores con nombre en CSS: lista completa de 148 colores
Lista completa de colores con nombre en CSS con hex y RGB. Buscable, copiable y adaptada a móvil.
¿Qué son los colores con nombre en CSS?
CSS incluye 148 colores con nombre que puedes usar en lugar de códigos hex o valores RGB. Palabras como "tomato", "rebeccapurple" y "lightseagreen" son valores de color CSS válidos, definidos por el W3C y soportados en todos los navegadores modernos. Los colores con nombre hacen que tus hojas de estilo sean más legibles y memorizables.
Cubren todo el círculo cromático: primarios, secundarios, terciarios, grises y algunos tonos especiales. Cada nombre se asigna a un valor sRGB preciso. Algunos nombres son evidentes ("red", "blue", "green"), mientras que otros son encantadoramente específicos ("papayawhip", "lemonchiffon", "mediumvioletred").
Casos de uso comunes
- Prototipado rápido: escribe un nombre de color para fijar un placeholder
- CSS legible: reemplaza `#ff6347` con `tomato` para mayor claridad
- Theming: usa nombres semánticos (--brand-primary: rebeccapurple) en variables CSS
- Plantillas de email: algunos clientes limitan los hex; los nombres tienen mayor soporte
- Enseñanza: los nombres son ideales para introducir CSS a principiantes
Método 1: Usa la lista de colores con nombre de CSS de UtilBoxx (Recomendado)
Nuestra lista de colores con nombre de CSS muestra cada color con su equivalente hex y RGB, permite buscar y copiar cualquier nombre o valor con un clic. Así se usa:
- Ve a utilboxx.com/es/tools/color/named
- Navega o busca en la lista (prueba "purple" o "gray")
- Haz clic en cualquier muestra para copiar su nombre
- Haz clic en el valor hex para copiar el código exacto
- Usa el botón de favoritos para marcar los colores que más usas
Por qué funciona este método:
- Lista agrupada por color y con búsqueda
- Copia con un clic de nombre, hex y RGB
- Muestra una muestra visual para cada color
- Diseño adaptado a móvil
- Gratis, sin registro, sin anuncios
Método 2: Memoriza los básicos
Un pequeño conjunto de colores con nombre cubre el 80% del trabajo CSS cotidiano:
- red, green, blue (primarios)
- yellow, cyan, magenta (secundarios)
- black, white, gray
- orange, pink, purple, brown
- Variantes claras/oscuras: lightgray, darkblue, etc.
Para elecciones más exóticas, ten a mano una lista de referencia.
Método 3: Usa variables CSS en tu hoja de estilos
Define tu paleta como propiedades personalizadas y usa los nombres en tu código:
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
Esto combina la legibilidad de los nombres con la potencia de un sistema de diseño centralizado.
Preguntas frecuentes
¿Cuántos colores con nombre hay en CSS?
Hay 148 colores con nombre en la especificación CSS Color Module Level 4. La lista incluye todos los colores históricos más adiciones modernas como rebeccapurple (añadido en 2014 en memoria de la hija de Eric Meyer).
¿Los nombres de color distinguen mayúsculas y minúsculas?
No. Los nombres de color CSS no distinguen mayúsculas, por lo que "Tomato", "tomato" y "TOMATO" se refieren al mismo color. La convención es minúscula.
¿Qué es rebeccapurple?
Es `#663399`, añadido a la especificación CSS en 2014 en honor a Rebecca Alison Meyer, hija del pionero de CSS Eric Meyer. Es el único color con nombre añadido a CSS por un motivo no técnico.
¿Puedo usar colores con nombre en SVG y canvas?
Sí. Tanto SVG como la API de canvas de HTML5 aceptan colores con nombre de CSS, siendo universalmente compatibles con los mismos nombres y valores.
Conclusión
Los colores con nombre de CSS son una joya infrautilizada. Para una referencia rápida y buscable, la lista de colores con nombre de UtilBoxx es la forma más fácil de encontrarlos, compararlos y copiarlos.