Más allá del código hexadecimal: por qué los desarrolladores inteligentes utilizan nombres de colores CSS, clases completas y códigos gratuitos

Seamos completamente sinceros. Cuando estás concentrado en crear una interfaz de usuario compleja o diseñar la estructura de un panel adaptable, detenerte a pensar en una cadena hexadecimal poco común o abrir constantemente el selector de colores de Figma rompe por completo tu ritmo mental. Solo quieres un separador de fondo sencillo, un borde de alerta rápido o un texto de marcador de posición que se distinga.

Precisamente por eso, los nombres de colores estándar de CSS, combinados con clases de utilidad optimizadas, son uno de los secretos mejor guardados de los desarrolladores web profesionales para crear prototipos rápidamente, probar componentes de calidad de producción y mantener bases de código limpias y legibles.

Todos los navegadores web modernos reconocen de forma nativa un conjunto básico de colores con nombre, sin necesidad de tokens de diseño pesados, dependencias externas ni variables complejas de preprocesador.
Aunque los programadores veteranos quizá solo recuerden los colores primarios básicos de los años noventa, como «red», «blue» o «green», la especificación web moderna admite en realidad una paleta amplia y variada de 147 tonos específicos.

En esta guía completa, despejaremos el misterio de las palabras clave de color nativas.
Analizaremos por qué no deberías ignorar los colores con nombre,
desglosaremos las mejores prácticas de implementación y mostraremos exactamente cómo
crear un sistema de diseño robusto y reutilizable, mediante estilos en línea o clases, que use estos colores
en textos, encabezados, fondos, botones, bordes y estados complejos de la interfaz.

--------------------------------------------------------------------------------
PARTE 1: MECÁNICA Y FILOSOFÍA DE LOS COLORES CON NOMBRE EN CSS
--------------------------------------------------------------------------------

Para apreciar plenamente el poder de los colores con nombre, debemos remontarnos a sus orígenes.
La gran mayoría de los 147 nombres de colores que reconocen hoy los navegadores modernos provienen
de la especificación del sistema gráfico X11, adoptada posteriormente por los primeros estándares HTML
y unificada por completo en CSS3 y en las especificaciones modernas del módulo de color de CSS.

Como estos nombres están incorporados en los motores de renderizado de los navegadores, se procesan al instante. Cuando el navegador encuentra «LightSteelBlue», no tiene que analizar un formato numérico antes de aplicarlo al modelo de objetos del documento (DOM); lo asigna directamente a su matriz de color interna.

Pero ¿por qué usarlos en una época dominada por bibliotecas de diseño enormes, como Tailwind CSS, o configuraciones pesadas de Bootstrap? La respuesta está en la velocidad de desarrollo, la facilidad de mantenimiento y la claridad estructural.

1. Velocidad y fluidez mental
Cuando necesitas probar un bloque de diseño, crear un componente aislado o aplicar estilos a un componente de depuración, escribir «background: LightSteelBlue;» o «color: Crimson;» resulta inmediatamente intuitivo. Te permite escribir estilos a la velocidad del pensamiento. No tienes que interrumpir tu concentración para buscar una cadena arbitraria de números y letras, y puedes mantener el foco donde corresponde: en la estructura, la adaptabilidad y la lógica de la experiencia de usuario.

2. Paletas sorprendentemente modernas y listas para producción
Olvídate de los aburridos colores primarios de los primeros tiempos de Internet. La especificación estándar de colores con nombre de CSS incluye tonos hermosos y contemporáneos que encajan perfectamente en modos oscuros modernos y diseños limpios y minimalistas:
* Grises sobrios: SlateGray (#708090), LightSlateGray (#778899) y DarkSlateGray (#2F4F4F) ofrecen tonos azul grisáceos, ricos y desaturados, ideales para fondos oscuros, subtítulos accesibles y separadores estructurales neutros.
* Pasteles elegantes: Colores como AliceBlue (#F0F8FF), Honeydew (#F0FFF0), SeaShell (#FFF5EE) y GhostWhite (#F8F8FF) aportan tintes sutiles y limpios para fondos de tarjetas, secciones discretas de aplicaciones y fondos legibles que no resultan abrumadores ni cansan la vista.
* Acentos vibrantes: Tonos como Tomato (#FF6347), Coral (#FF7F50), IndianRed (#CD5C5C) y MediumAquamarine (#66CDAA) permiten añadir al instante elementos de alto contraste, indicadores de estado y bases para llamadas a la acción.

3. Arquitectura de código autodocumentada
La legibilidad del código es fundamental en los equipos. Cuando un desarrollador revisa un archivo de componente sin procesar, ver una propiedad llamada explícitamente «FireBrick» o «DarkKhaki» le da una idea mental inmediata y clara del propósito, la intensidad y el tono del elemento de la interfaz. Es intrínsecamente más descriptivo que intentar adivinar a simple vista qué aspecto tiene «#B22222». Poder leer el nombre del color directamente en el código agiliza considerablemente las revisiones y las sesiones de depuración.

--------------------------------------------------------------------------------
PARTE 2: CÓMO USAR COLORES CON NOMBRE DE CSS EN PROYECTOS REALES
--------------------------------------------------------------------------------

Veamos en detalle la implementación práctica. ¿Cómo podemos aplicar eficazmente estos 147 colores a distintos componentes de la interfaz? A continuación, presentamos un análisis técnico de cómo usar colores con nombre en tipografía, contenedores, elementos interactivos y líneas, con patrones de sintaxis semántica.

A. TIPOGRAFÍA Y ENCABEZADOS (color)
Al aplicar estilos al texto, la relación de contraste es la regla de oro de la accesibilidad web (WCAG). Siempre debes asegurarte de que el color del texto contraste claramente con el fondo.

* Texto principal: Para el texto de lectura habitual sobre fondos claros, conviene usar tonos oscuros y muy legibles. En lugar del negro puro, «Black» o «MidnightBlue» aportan un aspecto más refinado. Sobre fondos oscuros, usa «White», «WhiteSmoke» o «GhostWhite».
* Encabezados principales (H1, H2, H4): Los encabezados son ideales para usar nombres de colores intensos y representativos de la marca. Un color sofisticado y llamativo, como «Crimson», «DarkCyan» o «SaddleBrown», proporciona a la tipografía estructural un punto de referencia visual definido.
* Subtítulos y pies de foto: Los metadatos y las descripciones se ven mejor con tonos neutros ligeramente apagados. «SlateGray», «DimGray» o «RosyBrown» permiten establecer una jerarquía tipográfica clara: primero atraen la mirada al encabezado principal y mantienen los detalles secundarios discretos.

Ejemplo de sintaxis:
<h1 style="color: Crimson; font-size: 2.5em; font-weight: bold; margin-bottom: 5px;">Título principal</h1>
<p style="color: SlateGray; font-size: 1.1em; margin-bottom: 15px;">Este es un bloque de texto explicativo a modo de subtítulo.</p>
<p style="color: MidnightBlue; font-size: 1em; line-height: 1.6;">El texto habitual se ve nítido y legible.</p>

B. CONTENEDORES, TARJETAS Y FONDOS (background-color)
Los fondos establecen el lienzo de toda la aplicación. Usar colores con nombre de forma estratégica permite separar claramente las distintas áreas de contenido.

* Fondos principales de página: En los diseños modernos habituales, los espacios en blanco son esenciales. Los pasteles muy suaves, como «AliceBlue», «OldLace» o «Linen», crean un fondo agradable que guía la mirada del usuario de forma natural por los elementos de la página.
* Componentes de tarjeta y bloques de contenido: Si el fondo principal de la página tiene un ligero tinte, puedes usar «White» puro en las tarjetas de contenido para que destaquen. En un sitio con modo oscuro, «DarkSlateGray» o «DimGray» en los contenedores de las tarjetas crea una excelente superposición sobre un fondo de página negro sólido.
* Banners de alerta y estado: Los contenedores de alta visibilidad, como los cuadros de advertencia o los banners de éxito, se pueden asociar fácilmente con nombres de colores semánticos. Usa un fondo «LightCoral» o «MistyRose» para los mensajes de error, y «PaleGreen» o «MintCream» para confirmar transacciones exitosas.

Ejemplo de sintaxis:

<div style="background-color: GhostWhite; padding: 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
    <h4 style="color: DarkSlateBlue; margin-top: 0;">Bloque de contenido destacado</h4>
    <p style="color: Gray; margin-bottom: 0;">Este diseño limpio utiliza palabras clave nativas estándar del navegador.</p>
</div>

C. BOTONES Y ELEMENTOS INTERACTIVOS
Los botones son el núcleo de las acciones del usuario. Necesitan fondos diferenciados, texto con contraste claro y bordes inconfundibles.

* Acciones principales (CTA): Los botones de llamada a la acción deben usar colores con nombre de alta saturación para captar la atención de inmediato. «DodgerBlue», «OrangeRed» o «DeepPink» ayudan a los usuarios a identificar exactamente dónde se encuentra la interacción más importante de la pantalla.
* Acciones secundarias: Los botones para cancelar o elegir una opción alternativa deben ser neutros para no competir visualmente con la acción principal. «LightGray», «Gainsboro» o «Thistle» mantienen estos botones funcionales, pero visualmente subordinados.
* Contraste del texto en los botones: Si usas fondos oscuros como «Navy», «Purple» o «FireBrick», debes combinarlos con texto claro, por ejemplo, «color: White;». En cambio, los fondos brillantes como «Gold», «Yellow» o «Aqua» requieren texto oscuro, como «color: Black;», para mantener la legibilidad.

Ejemplo de sintaxis:

<button style="background-color: DodgerBlue; color: White; border: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
    Aceptar transacción
</button>
<button style="background-color: Gainsboro; color: Black; border: none; padding: 10px 20px; border-radius: 5px; margin-left: 10px; cursor: pointer;">
    Cancelar pedido
</button>

D. BORDES, SEPARADORES Y LÍNEAS ESTRUCTURALES (border / border-color)
Las líneas y los bordes definen la forma y los límites exactos de los componentes de la interfaz. Sin contornos precisos, los componentes se mezclan entre sí y se pierde la simetría del diseño.

* Separación sutil del contenido: En lugar de separadores sólidos y llamativos, un borde fino como «border: 1px solid LightGray;» o «border-bottom: 2px solid Azure;» aporta una guía estructural elegante sin añadir demasiado ruido visual al diseño.
* Bordes de estado activo: Resalta al instante los campos de formulario o los componentes enfocados cuando se seleccionan, cambiando dinámicamente su borde por un color intenso, como «border: 2px solid RoyalBlue;» o «border: 2px solid HotPink;».
* Estados destructivos: Resalta los errores de validación o los campos de formulario que no funcionan con un borde de advertencia claro, como «border: 1px solid Red;» o «border: 2px solid Crimson;».

Ejemplo de sintaxis:
<input type="text" placeholder="Introduce la dirección completa..." style="border: 2px solid LightSteelBlue; padding: 12px; border-radius: 6px; width: 100%; box-sizing: border-box; color: DarkSlateGray;" />
<hr style="border: 0; border-top: 1px solid Silver; margin: 25px 0;" />
--------------------------------------------------------------------------------
PARTE 3: ANÁLISIS ARQUITECTÓNICO EXHAUSTIVO DE CADA FAMILIA
--------------------------------------------------------------------------------

Para aprovechar profesionalmente estos 147 colores sin interrumpir tu flujo de trabajo, es esencial examinar cómo se compone cada familia, qué ambiente transmite y cómo interactúan sus valores HEX, RGB y HSL en el código.

A continuación, encontrarás un análisis arquitectónico exhaustivo de las principales familias incluidas en el sistema de referencia de colores de eBits Tech Platform.

Todos los navegadores reconocen un conjunto estándar de nombres de colores CSS. Los 147 nombres de colores CSS incluyen 16 colores básicos de HTML y 131 colores web ampliados compatibles con todos los navegadores modernos. No hace falta memorizar códigos hexadecimales. A continuación se presentan las 10 familias y los 147 colores, listos para usarse directamente con las clases de utilidad del sitio para fondos o texto. ¡Diseña más rápido!

Rosas

Rojos

Naranjas

Amarillos

Morados

Verdes

Azules / cianes

Marrones

Blancos

Grises

================================================================================
1. FAMILIA DE LOS ROSAS
================================================================================
La familia de los rosas abarca desde pasteles muy luminosos hasta fucsias intensos y llenos de energía. Son ideales para contenedores ambientales suaves, marcas distintivas dirigidas al público femenino y llamadas a la acción creativas y modernas.

* Pink (#FFC0CB / rgb(255, 192, 203) / hsl(350, 100%, 88%))
  - Sensación: Suave, amable, acogedor, tranquilizador.
  - Usos prácticos: Tarjetas de cosméticos prémium, avisos de error sutiles y fondos ambientales pastel.
* LightPink (#FFB6C1 / rgb(255, 182, 193) / hsl(351, 100%, 86%))
  - Sensación: Delicado, limpio, suave y moderno.
  - Usos prácticos: Fondos de ventanas emergentes de notificación o insignias.
* HotPink (#FF69B4 / rgb(255, 105, 180) / hsl(330, 100%, 71%))
  - Sensación: Enérgico, llamativo, juvenil y creativo.
  - Usos prácticos: Estados de desplazamiento de botones activos, destacados de redes sociales e insignias focales.
* DeepPink (#FF1493 / rgb(255, 20, 147) / hsl(328, 100%, 54%))
  - Sensación: Prémium, intenso, imponente y seguro.
  - Usos prácticos: Botones principales de alto contraste, banners dinámicos y bordes de encabezado.
* MediumVioletRed (#C71585 / rgb(199, 21, 133) / hsl(322, 81%, 43%))
  - Sensación: Sofisticado, intenso, elegante y regio.
  - Usos prácticos: Encabezados corporativos, patrones de fondo y énfasis tipográfico especializado.
* PaleVioletRed (#DB7093 / rgb(219, 112, 147) / hsl(340, 60%, 65%))
  - Sensación: Discreto, orgánico y profesional.
  - Usos prácticos: Enlaces secundarios de la interfaz, etiquetas de texto y separadores horizontales elegantes.

================================================================================
2. FAMILIA DE LOS ROJOS
================================================================================
Los rojos captan la atención de inmediato. En la psicología humana están profundamente asociados con acciones críticas, errores, procesos de parada de emergencia y concentración intensa.

* IndianRed (#CD5C5C / rgb(205, 92, 92) / hsl(0, 53%, 58%))
  - Sensación: Cálido, terroso, sobrio y profesional.
  - Usos prácticos: Alertas de advertencia discretas, banners corporativos de acento y menús laterales sólidos.
* LightCoral (#F08080 / rgb(240, 128, 128) / hsl(0, 79%, 72%))
  - Sensación: Muy visible, pero suave y legible.
  - Usos prácticos: Banners de notificación que se pueden cerrar y fondos de alertas de error.
* Salmon (#FA8072 / rgb(250, 128, 114) / hsl(6, 93%, 71%))
  - Sensación: Fresco, activo, moderno y actual.
  - Usos prácticos: Etiquetas distintivas de comercio electrónico y botones modernos de estilo orgánico.
* DarkSalmon (#E9967A / rgb(233, 150, 122) / hsl(15, 72%, 70%))
  - Sensación: Cálido, prémium y acogedor.
  - Usos prácticos: Acentos de fondo, tarjetas de diseño de estilo de vida e indicadores de texto secundarios.
* LightSalmon (#FFA07A / rgb(255, 160, 122) / hsl(17, 100%, 74%))
  - Sensación: Suave, luminoso y enérgico.
  - Usos prácticos: Contornos de bloques destacados y paneles de fondo para indicadores.
* Crimson (#DC143C / rgb(220, 20, 60) / hsl(348, 83%, 47%))
  - Sensación: Intenso, dramático, imponente y ejecutivo.
  - Usos prácticos: Encabezados principales de marca, notificaciones de errores críticos y enlaces prémium.
* Red (#FF0000 / rgb(255, 0, 0) / hsl(0, 100%, 50%))
  - Sensación: Señal universal de emergencia, atención inmediata e intensidad.
  - Usos prácticos: Botones destructivos, como «Eliminar cuenta», y errores de validación de campos.
* FireBrick (#B22222 / rgb(178, 34, 34) / hsl(0, 68%, 42%))
  - Sensación: Tradicional, estable, corporativo y profundo.
  - Usos prácticos: Filas de encabezado para errores del sistema y acentos tipográficos institucionales.
* DarkRed (#8B0000 / rgb(139, 0, 0) / hsl(0, 100%, 27%))
  - Sensación: Serio, industrial, sólido y lujoso.
  - Usos prácticos: Secciones de pie de página prémium y contenedores densos para advertencias de código.

================================================================================
3. FAMILIA DE LOS NARANJAS
================================================================================
Los naranjas transmiten calidez, rapidez, dinamismo y accesibilidad. Son excelentes como punto intermedio entre las alertas estructurales y las invitaciones amables.

* Coral (#FF7F50 / rgb(255, 127, 80) / hsl(16, 100%, 66%))
  - Sensación: Juguetón, vívido, tecnológico y optimista.
  - Usos prácticos: Encabezados de blogs tecnológicos modernos y botones activos prémium.
* Tomato (#FF6347 / rgb(255, 99, 71) / hsl(9, 100%, 64%))
  - Sensación: Enérgico, urgente pero amable, muy visible.
  - Usos prácticos: Banners de ofertas llamativos e indicadores destacados del carrito de compras.
* OrangeRed (#FF4500 / rgb(255, 69, 0) / hsl(16, 100%, 50%))
  - Sensación: Energía extrema, potencia e interacción activa.
  - Usos prácticos: Encabezados de ofertas relámpago y estados de telemetría para alertas de incendio.
* DarkOrange (#FF8C00 / rgb(255, 140, 0) / hsl(33, 100%, 50%))
  - Sensación: Seguro, rápido, laborioso y estable.
  - Usos prácticos: Tarjetas de llamada a la acción activas y destacados en asistentes de registro.
* Orange (#FFA500 / rgb(255, 165, 0) / hsl(39, 100%, 50%))
  - Sensación: Luminoso, amable, asequible y abierto.
  - Usos prácticos: Mensajes de advertencia y pestañas de navegación secundaria activas.

================================================================================
4. FAMILIA DE LOS AMARILLOS
================================================================================
Los amarillos ofrecen una luminosidad máxima. El ojo humano los percibe más rápido que cualquier otro grupo de tonos, por lo que son ideales para alertas del sistema y paneles destacados.

* Gold (#FFD700 / rgb(255, 215, 0) / hsl(51, 100%, 50%))
  - Sensación: Prémium, victorioso, intenso y distintivo.
  - Usos prácticos: Insignias de logros, banners de membresías prémium y estrellas de reseñas.
* Yellow (#FFFF00 / rgb(255, 255, 0) / hsl(60, 100%, 50%))
  - Sensación: Brillo extremo, precaución estructural y claridad.
  - Usos prácticos: Resaltado de términos de búsqueda en tiempo real y banners de advertencia del sistema.
* LightYellow (#FFFFE0 / rgb(255, 255, 224) / hsl(60, 100%, 94%))
  - Sensación: Limpio, cálido y discreto.
  - Usos prácticos: Fondos ambientales para notas de ayuda activas.
* LemonChiffon (#FFFACD / rgb(255, 250, 205) / hsl(54, 100%, 90%))
  - Sensación: Cremoso, suave, apetecible y tranquilo.
  - Usos prácticos: Fondos de avisos especializados y bloques de citas educativas.
* LightGoldenrodYellow (#FAFAD2 / rgb(250, 250, 210) / hsl(60, 80%, 90%))
  - Sensación: Amarillo grisáceo cálido, aspecto de papel prémium.
  - Usos prácticos: Fondos minimalistas para blogs y acentos estructurales de paneles.
* PapayaWhip (#FFEFD5 / rgb(255, 239, 213) / hsl(37, 100%, 92%))
  - Sensación: Crema pastel cálida, elegante y acogedora.
  - Usos prácticos: Contenedores elegantes para secciones de estilo de vida y fondos minimalistas.
* Moccasin (#FFE4B5 / rgb(255, 228, 181) / hsl(38, 100%, 85%))
  - Sensación: Ámbar arenoso suave y relajado.
  - Usos prácticos: Fondos de categorías de productos de comercio electrónico.
* PeachPuff (#FFDAB9 / rgb(255, 218, 185) / hsl(28, 100%, 86%))
  - Sensación: Pastel orgánico luminoso y alegre.
  - Usos prácticos: Subrayados de encabezados de estilo de vida y pestañas de perfil en paneles de usuario.
* PaleGoldenrod (#EEE8AA / rgb(238, 232, 170) / hsl(55, 67%, 80%))
  - Sensación: Dorado orgánico apagado, histórico y corporativo.
  - Usos prácticos: Bordes sofisticados para documentos y fondos para métricas de paneles.
* Khaki (#F0E68C / rgb(240, 230, 140) / hsl(54, 77%, 75%))
  - Sensación: Arena militar limpia, neutra y profesional.
  - Usos prácticos: Contadores de notificación discretos y bordes secundarios de diseño.
* DarkKhaki (#BDB76B / rgb(189, 183, 107) / hsl(56, 38%, 58%))
  - Sensación: Arena oliva densa, vintage y sólida.
  - Usos prácticos: Subtítulos de texto discretos y patrones de fondo terrosos.

================================================================================
5. FAMILIA DE LOS MORADOS
================================================================================
Los morados evocan lujo, inteligencia avanzada, escala tecnológica y arquitectura moderna de alta gama. Son predominantes en interfaces modernas de criptomonedas, software como servicio (SaaS) y diseño creativo.

* Lavender (#E6E6FA / rgb(230, 230, 250) / hsl(240, 67%, 94%))
  - Sensación: Sereno, cristalino y pastel tecnológico de alta gama.
  - Usos prácticos: Tarjetas modernas para modo oscuro y fondos claros para paneles tecnológicos.
* Thistle (#D8BFD8 / rgb(216, 191, 216) / hsl(300, 24%, 80%))
  - Sensación: Lila apagado, tono creativo neutro.
  - Usos prácticos: Insignias de categoría, contenedores de etiquetas secundarias y separadores suaves.
* Plum (#DDA0DD / rgb(221, 160, 221) / hsl(300, 47%, 75%))
  - Sensación: Violeta creativo y vívido, intenso y atractivo.
  - Usos prácticos: Enlaces de encabezado, bordes de logros de perfil e iconos modernos.
* Violet (#EE82EE / rgb(238, 130, 238) / hsl(300, 76%, 72%))
  - Sensación: Luminoso, tecnológico, enérgico y rosa violáceo.
  - Usos prácticos: Paneles destacados, puntos de transición de degradados y botones activos.
* Orchid (#DA70D6 / rgb(218, 112, 214) / hsl(302, 59%, 65%))
  - Sensación: Púrpura floral sofisticado y profesional.
  - Usos prácticos: Encabezados de agencias creativas y elementos de navegación por categorías.
* Fuchsia y Magenta (#FF00FF / rgb(255, 0, 255) / hsl(300, 100%, 50%))
  - Sensación: Acento cibernético ultramoderno y luminosidad intensa.
  - Usos prácticos: Diseños ciberpunk, resaltado de sintaxis en plataformas de programación y acciones principales.
* MediumOrchid (#BA55D3 / rgb(186, 85, 211) / hsl(288, 59%, 58%))
  - Sensación: Violeta equilibrado e intenso, estable y creativo.
  - Usos prácticos: Indicadores de asistentes interactivos y tarjetas de paneles de arquitectura en la nube.
* MediumPurple (#9370DB / rgb(147, 112, 219) / hsl(260, 60%, 65%))
  - Sensación: Púrpura tecnológico suave, fiable y escalable.
  - Usos prácticos: Subtítulos de consolas para desarrolladores y estados activos de interruptores.
* BlueViolet (#8A2BE2 / rgb(138, 43, 226) / hsl(271, 76%, 53%))
  - Sensación: Violeta neón intenso y profundo, con gran fuerza de marca.
  - Usos prácticos: Botones principales de inicio de sesión en SaaS y títulos destacados de navegación lateral.
* DarkViolet (#9400D3 / rgb(148, 0, 211) / hsl(282, 100%, 41%))
  - Sensación: Tecnológico, regio, profundo y misterioso.
  - Usos prácticos: Resaltado de cadenas de código y tarjetas interactivas prémium.
* DarkOrchid (#9932CC / rgb(153, 50, 204) / hsl(280, 61%, 50%))
  - Sensación: Púrpura aterciopelado, sólido y profesional.
  - Usos prácticos: Recursos institucionales para desarrolladores y estados activos de menús desplegables.
* DarkMagenta (#8B008B / rgb(139, 0, 139) / hsl(300, 100%, 27%))
  - Sensación: Púrpura granate profundo y lujoso, de carácter industrial.
  - Usos prácticos: Encabezados de sistemas complejos de telemetría y fondos de terminales de código.
* Purple (#800080 / rgb(128, 0, 128) / hsl(300, 100%, 25%))
  - Sensación: Tono regio clásico e institucional.
  - Usos prácticos: Enlaces visitados y fondos de pasarelas seguras de comercio electrónico.
* RebeccaPurple (#663399 / rgb(102, 51, 153) / hsl(270, 50%, 40%))
  - Sensación: Púrpura técnico profundo y distintivo del estándar web.
  - Usos prácticos: Encabezados de productos principales y componentes centrales de páginas comunitarias de CSS.
* Indigo (#4B0082 / rgb(75, 0, 130) / hsl(275, 100%, 25%))
  - Sensación: Azul violáceo profundo y misterioso, como el anochecer.
  - Usos prácticos: Filas globales de pie de página y fondos base de contenedores.
* MediumSlateBlue (#7B68EE / rgb(123, 104, 238) / hsl(249, 80%, 67%))
  - Sensación: Pastel índigo luminoso, nítido y prémium.
  - Usos prácticos: Paneles de título de tablas de precios modernas y guías interactivas para usuarios.
* SlateBlue (#6A5ACD / rgb(106, 90, 205) / hsl(248, 53%, 58%))
  - Sensación: Mezcla profesional de azul marino e índigo, muy segura.
  - Usos prácticos: Controles de interfaces corporativas de bases de datos y encabezados limpios de paneles.
* DarkSlateBlue (#483D8B / rgb(72, 61, 139) / hsl(248, 39%, 39%))
  - Sensación: Violeta pizarra sólido e intenso, estructurado.
  - Usos prácticos: Diseños de navegación de paneles de administración y contenedores estructurales para bloques de código.

================================================================================
6. FAMILIA DE LOS VERDES
================================================================================
Los verdes se relacionan directamente con el crecimiento, los estados exitosos del sistema, las finanzas equilibradas y los parámetros intuitivos de un ecosistema.

* GreenYellow (#ADFF2F / rgb(173, 255, 47) / hsl(84, 100%, 59%))
  - Sensación: Verde amarillento neón, enérgico y muy visible.
  - Usos prácticos: Acentos de terminal activa y paneles de depuración de código.
* Chartreuse y LawnGreen (#7FFF00 / #7CFC00)
  - Sensación: Verde de follaje luminoso, asociado a un crecimiento intenso.
  - Usos prácticos: Contadores de promociones y destacados de portafolios creativos.
* Lime (#00FF00 / rgb(0, 255, 0) / hsl(120, 100%, 50%))
  - Sensación: Indicador de éxito del sistema, eléctrico y neón.
  - Usos prácticos: Insignias de disponibilidad del sistema en tiempo real e indicadores de cadenas de código en consolas.
* LimeGreen (#32CD32 / rgb(50, 205, 50) / hsl(120, 61%, 50%))
  - Sensación: Verde natural vibrante, pero profesional.
  - Usos prácticos: Alertas de transacciones completadas y barras de progreso de descargas finalizadas.
* PaleGreen y LightGreen (#98FB98 / #90EE90)
  - Sensación: Pasteles menta suaves y modernos, asociados a las finanzas.
  - Usos prácticos: Contenedores de alertas de éxito y fondos para cuentas verificadas.
* MediumSpringGreen y SpringGreen (#00FA9A / #00FF7F)
  - Sensación: Verdes técnicos luminosos y refrescantes.
  - Usos prácticos: Contadores de aumento en analíticas y líneas activas en gráficos.
* MediumSeaGreen y SeaGreen (#3CB371 / #2E8B57)
  - Sensación: Verdes empresariales profesionales, equilibrados y estables.
  - Usos prácticos: Barras de navegación principales para software financiero y fondos de botones para enviar pedidos.
* ForestGreen y Green (#228B22 / #008000)
  - Sensación: Orgánico, profundo, confiable y seguro.
  - Usos prácticos: Plataformas medioambientales y enlaces de transacciones verificadas.
* DarkGreen (#006400 / rgb(0, 100, 0) / hsl(120, 100%, 20%))
  - Sensación: Industrial, asociado a la riqueza y tradicional.
  - Usos prácticos: Pies de página de sitios bancarios y encabezados de clasificación de tablas con muchos datos.
* YellowGreen y OliveDrab (#9ACD32 / #6B8E23)
  - Sensación: Tonos oliva terrosos y técnicos, estructurados.
  - Usos prácticos: Encabezados de documentación compleja y contornos de tarjetas con datos históricos.
* Olive y DarkOliveGreen (#808000 / #556B2F)
  - Sensación: Valores corporativos profundos e históricos, estables.
  - Usos prácticos: Bloques de texto discretos y temas personalizados para sitios industriales.
* MediumAquamarine y DarkSeaGreen (#66CDAA / #8FBC8F)
  - Sensación: Pasteles verde espuma de mar, limpios y muy relajantes.
  - Usos prácticos: Fondos de diseño para portales médicos y tarjetas de preferencias de usuario.
* LightSeaGreen y DarkCyan (#20B2AA / #008B8B)
  - Sensación: Azules marinos modernos, sofisticados y prémium.
  - Usos prácticos: Barras laterales de plataformas para desarrolladores y agrupaciones nítidas de etiquetas.
* Teal (#008080 / rgb(0, 128, 128) / hsl(180, 100%, 25%))
  - Sensación: Tecnología corporativa equilibrada y moderna.
  - Usos prácticos: Menús de productos SaaS y bloques de énfasis en columnas de diseño.

================================================================================
7. FAMILIA DE LOS AZULES Y CÍANES
================================================================================
Los azules son la base indiscutible del diseño web mundial. Transmiten estabilidad, confianza, escala y legibilidad óptima.

* Aqua y Cyan (#00FFFF / rgb(0, 255, 255) / hsl(180, 100%, 50%))
  - Sensación: Brillo técnico eléctrico y énfasis en la comunicación en la nube.
  - Usos prácticos: Resaltado de código en terminales activas y alertas de estado de la nube.
* LightCyan y PaleTurquoise (#E0FFFF / #AFEEEE)
  - Sensación: Pasteles celestes luminosos y muy relajantes.
  - Usos prácticos: Fondos de celdas de datos adaptables y contenedores de texto de soporte.
* Aquamarine y Turquoise (#7FFFD4 / #40E0D0)
  - Sensación: Gemas marinas brillantes, creativas y atractivas.
  - Usos prácticos: Etiquetas destacadas de agencias creativas y burbujas de chat con clientes.
* MediumTurquoise y DarkTurquoise (#48D1CC / #00CED1)
  - Sensación: Tonos cian técnicos, vibrantes y estables.
  - Usos prácticos: Medidores de diagnóstico de red y mapas de infraestructura en la nube.
* CadetBlue y SteelBlue (#5F9EA0 / #4682B4)
  - Sensación: Azules grisáceos metálicos e industriales, muy seguros.
  - Usos prácticos: Árboles de archivos en consolas de desarrollo y gráficos de administración de sistemas.
* LightSteelBlue y PowderBlue (#B0C4DE / #B0E0E6)
  - Sensación: Pasteles prémium para diseños y separación estructural limpia.
  - Usos prácticos: Subencabezados de columnas en tablas y bordes principales de campos de formulario.
* LightBlue y SkyBlue (#ADD8E6 / #87CEEB)
  - Sensación: Abierto, limpio, aireado y comunicativo.
  - Usos prácticos: Información sobre herramientas, módulos meteorológicos y filtros secundarios.
* LightSkyBlue y DeepSkyBlue (#87CEFA / #00BFFF)
  - Sensación: Gran alcance visual, nítido y moderno.
  - Usos prácticos: Botones para compartir en redes sociales y barras dinámicas de carga de archivos.
* DodgerBlue y CornflowerBlue (#1E90FF / #6495ED)
  - Sensación: Azules tecnológicos de marca, el estándar por excelencia.
  - Usos prácticos: Enlaces de acciones principales y encabezados centrales de autorización de usuarios.
* RoyalBlue y Blue (#4169E1 / #0000FF)
  - Sensación: Gran autoridad, base de red segura e intensidad pura.
  - Usos prácticos: Enlaces globales del diseño y bordes de enfoque para tablas seguras.
* MediumBlue y DarkBlue (#0000CD / #00008B)
  - Sensación: Confianza profunda y tradicional, de alcance global.
  - Usos prácticos: Títulos principales de instituciones financieras y raíces de comandos en terminales.
* Navy y MidnightBlue (#000080 / #191970)
  - Sensación: Estabilidad profesional absoluta, lujo profundo y lienzo para modo oscuro.
  - Usos prácticos: Fondos de contenedores principales en modo oscuro y encabezados de facturación segura.

================================================================================
8. FAMILIA DE LOS MARRONES
================================================================================
Los marrones y los neutros terrosos aportan autenticidad orgánica, calidez acogedora y fiabilidad tradicional a las interfaces modernas.

* Cornsilk y BlanchedAlmond (#FFF8DC / #FFEBCD)
  - Sensación: Crema muy suave, con aspecto de papel prémium.
  - Usos prácticos: Lienzos para blogs con textos extensos y tarjetas de contenido prémium.
* Bisque y NavajoWhite (#FFE4C4 / #FFDEAD)
  - Sensación: Pasteles de arcilla cálidos y suaves, de aspecto orgánico.
  - Usos prácticos: Paneles de fondo para tiendas de moda y destacados sutiles de perfil.
* Wheat y BurlyWood (#F5DEB3 / #DEB887)
  - Sensación: Neutros de cosecha, sobrios y artesanales.
  - Usos prácticos: Campos secundarios de interfaz y descripciones de productos artesanales.
* Tan y RosyBrown (#D2B48C / #BC8F8F)
  - Sensación: Tonos desérticos equilibrados y apagados, de aspecto prémium.
  - Usos prácticos: Indicadores de contorno de diseño y bloques de menús laterales de estilo de vida.
* SandyBrown y Goldenrod (#F4A460 / #DAA520)
  - Sensación: Tonos ámbar orgánicos, intensos y muy activos.
  - Usos prácticos: Paneles de advertencia y tarjetas con características destacadas de productos.
* DarkGoldenrod y Peru (#B8860B / #CD853F)
  - Sensación: Tonos de cuero históricos y sofisticados.
  - Usos prácticos: Menús de sitios de arquitectura y encabezados de texto prémium especializados.
* Chocolate y SaddleBrown (#D2691E / #8B4513)
  - Sensación: Tonos orgánicos de alto contraste y gran profundidad.
  - Usos prácticos: Acentos tipográficos destacados de marca y campos personalizados de precios de productos.
* Sienna, Brown y Maroon (#A0522D / #A52A2A / #800000)
  - Sensación: Estructuras tradicionales profundas, intensas y muy estables.
  - Usos prácticos: Columnas editoriales y diseños de aplicaciones inmobiliarias de alta gama.

================================================================================
9. FAMILIA DE LOS BLANCOS
================================================================================
Los blancos definen la pureza espacial de los diseños web modernos. Son esenciales para lograr una separación limpia y posicionar productos prémium.

* White (#FFFFFF / rgb(255, 255, 255) / hsl(0, 0%, 100%))
  - Sensación: Pureza absoluta, libertad espacial moderna y claridad.
  - Usos prácticos: Bloques de tarjetas limpios y diseños principales de documentos en aplicaciones.
* Snow, Honeydew y MintCream (#FFFAFA / #F0FFF0 / #F5FFFA)
  - Sensación: Blancos teñidos muy sutilmente para crear capas avanzadas.
  - Usos prácticos: Patrones de filas alternas en cuadrículas y marcos suaves de interfaz.
* Azure, AliceBlue y GhostWhite (#F0FFFF / #F0F8FF / #F8F8FF)
  - Sensación: Blancos fríos y nítidos de carácter técnico, equilibrados para pantallas digitales.
  - Usos prácticos: Fondos globales para aplicaciones en modo claro y paneles de módulos de código.
* WhiteSmoke, Seashell y Beige (#F5F5F5 / #FFF5EE / #F5F5DC)
  - Sensación: Tonos blancos neutros, suaves y orgánicos.
  - Usos prácticos: Paneles de aplicaciones en escala de grises y cuadros cálidos para separar contenido.
* OldLace, FloralWhite e Ivory (#FDF5E6 / #FFFAF0 / #FFFFF0)
  - Sensación: Tonos cálidos de fondo, clásicos y prémium.
  - Usos prácticos: Diseños de documentación extensa en línea y tarjetas de productos de lujo.
* AntiqueWhite, Linen, LavenderBlush y MistyRose (#FAEBD7 / #FAF0E6 / #FFF0F5 / #FFE4E1)
  - Sensación: Tonos sofisticados de diseño de interiores de lujo.
  - Usos prácticos: Banners elegantes de aplicaciones y fondos para paneles de alerta que se pueden cerrar.

================================================================================
10. FAMILIA DE LOS GRISES
================================================================================
Los grises representan el armazón matemático de los diseños adaptables modernos. Controlan líneas, texto alternativo, sombras, contenedores neutros y bloques de código.

* Gainsboro y LightGray (#DCDCDC / #D3D3D3)
  - Sensación: Líneas divisorias estructurales neutras, separación sencilla.
  - Usos prácticos: Bordes de tarjetas de contenido y fondos para botones desactivados.
* Silver y DarkGray (#C0C0C0 / #A9A9A9)
  - Sensación: Separadores equilibrados de interfaz y subtítulos muy legibles.
  - Usos prácticos: Pies de foto globales para metadatos y estructuras de contorno para tablas.
* Gray y DimGray (#808080 / #696969)
  - Sensación: Equilibrio neutro intenso y densidad estable para diseños de lectura.
  - Usos prácticos: Descripciones de texto secundarias y estados de marcadores de posición en campos.
* LightSlateGray y SlateGray (#778899 / #708090)
  - Sensación: Grises azulados técnicos contemporáneos y de alta gama.
  - Usos prácticos: Tipografía limpia para consolas de desarrollo y etiquetas de navegación lateral.
* DarkSlateGray y Black (#2F4F4F / #000000)
  - Sensación: Capas estructurales de gran autoridad y base prémium de alto contraste.
  - Usos prácticos: Bases principales para aplicaciones en modo oscuro y cuadros principales de terminales de código.
--------------------------------------------------------------------------------
PARTE 4: CREAR UNA ARQUITECTURA REUTILIZABLE DE CLASES DE UTILIDAD EN JOOMLA
--------------------------------------------------------------------------------

Como tu plataforma funciona con Joomla, gestionar estilos en línea individuales en decenas de artículos técnicos puede volverse tedioso con el tiempo. La mejor solución es agrupar estos diseños de colores con nombre de CSS en un conjunto ordenado de clases de utilidad globales dentro de la hoja de estilos principal de tu plantilla, como custom.css.

Esto te permite escribir marcado limpio y rápido directamente en el editor de artículos, sin recargar los campos de contenido ni arriesgarte a que el editor elimine etiquetas.

A continuación se muestra el esquema CSS global definitivo para asignar el sistema de colores a utilidades ligeras de fondo, texto y botones:

================================================================================
ESQUEMA TÉCNICO GLOBAL DE CSS (Añádelo a custom.css de tu plantilla Joomla)
================================================================================

/* ==========================================================================
   Sistema personalizado de colores con nombre de eBits: utilidades básicas
   ========================================================================== */

/* --- CLASES DE UTILIDAD PARA FONDOS --- */
.eb-bg-pink { background-color: Pink !important; color: #000000 !important; }
.eb-bg-lightpink { background-color: LightPink !important; color: #000000 !important; }
.eb-bg-hotpink { background-color: HotPink !important; color: #000000 !important; }
.eb-bg-deeppink { background-color: DeepPink !important; color: #ffffff !important; }
.eb-bg-mediumvioletred { background-color: MediumVioletRed !important; color: #ffffff !important; }
.eb-bg-palevioletred { background-color: PaleVioletRed !important; color: #000000 !important; }

.eb-bg-indianred { background-color: IndianRed !important; color: #ffffff !important; }
.eb-bg-lightcoral { background-color: LightCoral !important; color: #000000 !important; }
.eb-bg-salmon { background-color: Salmon !important; color: #000000 !important; }
.eb-bg-darksalmon { background-color: DarkSalmon !important; color: #000000 !important; }
.eb-bg-lightsalmon { background-color: LightSalmon !important; color: #000000 !important; }
.eb-bg-crimson { background-color: Crimson !important; color: #ffffff !important; }
.eb-bg-red { background-color: Red !important; color: #ffffff !important; }
.eb-bg-firebrick { background-color: FireBrick !important; color: #ffffff !important; }
.eb-bg-darkred { background-color: DarkRed !important; color: #ffffff !important; }

.eb-bg-coral { background-color: Coral !important; color: #000000 !important; }
.eb-bg-tomato { background-color: Tomato !important; color: #000000 !important; }
.eb-bg-orangered { background-color: OrangeRed !important; color: #ffffff !important; }
.eb-bg-darkorange { background-color: DarkOrange !important; color: #000000 !important; }
.eb-bg-orange { background-color: Orange !important; color: #000000 !important; }

.eb-bg-gold { background-color: Gold !important; color: #000000 !important; }
.eb-bg-yellow { background-color: Yellow !important; color: #000000 !important; }
.eb-bg-lightyellow { background-color: LightYellow !important; color: #000000 !important; border: 1px solid #ddd; }
.eb-bg-lemonchiffon { background-color: LemonChiffon !important; color: #000000 !important; }
.eb-bg-moccasin { background-color: Moccasin !important; color: #000000 !important; }
.eb-bg-peachpuff { background-color: PeachPuff !important; color: #000000 !important; }

.eb-bg-lavender { background-color: Lavender !important; color: #000000 !important; }
.eb-bg-thistle { background-color: Thistle !important; color: #000000 !important; }
.eb-bg-plum { background-color: Plum !important; color: #000000 !important; }
.eb-bg-violet { background-color: Violet !important; color: #000000 !important; }
.eb-bg-fuchsia { background-color: Fuchsia !important; color: #ffffff !important; }
.eb-bg-magenta { background-color: Magenta !important; color: #ffffff !important; }
.eb-bg-rebeccapurple { background-color: RebeccaPurple !important; color: #ffffff !important; }
.eb-bg-indigo { background-color: Indigo !important; color: #ffffff !important; }

.eb-bg-lime { background-color: Lime !important; color: #000000 !important; }
.eb-bg-limegreen { background-color: LimeGreen !important; color: #000000 !important; }
.eb-bg-palegreen { background-color: PaleGreen !important; color: #000000 !important; }
.eb-bg-mediumseagreen { background-color: MediumSeaGreen !important; color: #ffffff !important; }
.eb-bg-seagreen { background-color: SeaGreen !important; color: #ffffff !important; }
.eb-bg-forestgreen { background-color: ForestGreen !important; color: #ffffff !important; }
.eb-bg-green { background-color: Green !important; color: #ffffff !important; }
.eb-bg-darkgreen { background-color: DarkGreen !important; color: #ffffff !important; }
.eb-bg-teal { background-color: Teal !important; color: #ffffff !important; }

.eb-bg-darkcyan { background-color: DarkCyan !important; color: #ffffff !important; }
.eb-bg-aqua { background-color: Aqua !important; color: #000000 !important; }
.eb-bg-cyan { background-color: Cyan !important; color: #000000 !important; }
.eb-bg-aquamarine { background-color: Aquamarine !important; color: #000000 !important; }
.eb-bg-turquoise { background-color: Turquoise !important; color: #000000 !important; }
.eb-bg-steelblue { background-color: SteelBlue !important; color: #ffffff !important; }
.eb-bg-powderblue { background-color: PowderBlue !important; color: #000000 !important; }
.eb-bg-lightblue { background-color: LightBlue !important; color: #000000 !important; }
.eb-bg-skyblue { background-color: SkyBlue !important; color: #000000 !important; }
.eb-bg-deepskyblue { background-color: DeepSkyBlue !important; color: #000000 !important; }
.eb-bg-dodgerblue { background-color: DodgerBlue !important; color: #ffffff !important; }
.eb-bg-cornflowerblue { background-color: CornflowerBlue !important; color: #ffffff !important; }
.eb-bg-royalblue { background-color: RoyalBlue !important; color: #ffffff !important; }
.eb-bg-blue { background-color: Blue !important; color: #ffffff !important; }
.eb-bg-darkblue { background-color: DarkBlue !important; color: #ffffff !important; }
.eb-bg-navy { background-color: Navy !important; color: #ffffff !important; }
.eb-bg-midnightblue { background-color: MidnightBlue !important; color: #ffffff !important; }

.eb-bg-cornsilk { background-color: Cornsilk !important; color: #000000 !important; }
.eb-bg-wheat { background-color: Wheat !important; color: #000000 !important; }
.eb-bg-tan { background-color: Tan !important; color: #000000 !important; }
.eb-bg-saddlebrown { background-color: SaddleBrown !important; color: #ffffff !important; }
.eb-bg-sienna { background-color: Sienna !important; color: #ffffff !important; }
.eb-bg-brown { background-color: Brown !important; color: #ffffff !important; }
.eb-bg-maroon { background-color: Maroon !important; color: #ffffff !important; }

.eb-bg-white { background-color: White !important; color: #000000 !important; }
.eb-bg-whitesmoke { background-color: WhiteSmoke !important; color: #000000 !important; }
.eb-bg-gainsboro { background-color: Gainsboro !important; color: #000000 !important; }
.eb-bg-lightgray { background-color: LightGray !important; color: #000000 !important; }
.eb-bg-silver { background-color: Silver !important; color: #000000 !important; }
.eb-bg-darkgray { background-color: DarkGray !important; color: #000000 !important; }
.eb-bg-gray { background-color: Gray !important; color: #ffffff !important; }
.eb-bg-dimgray { background-color: DimGray !important; color: #ffffff !important; }
.eb-bg-darkslategray { background-color: DarkSlateGray !important; color: #ffffff !important; }
.eb-bg-black { background-color: Black !important; color: #ffffff !important; }

/* --- CLASES DE UTILIDAD PARA EL COLOR DEL TEXTO --- */
.eb-text-pink { color: Pink !important; }
.eb-text-lightpink { color: LightPink !important; }
.eb-text-hotpink { color: HotPink !important; }
.eb-text-deeppink { color: DeepPink !important; }
.eb-text-crimson { color: Crimson !important; }
.eb-text-red { color: Red !important; }
.eb-text-firebrick { color: FireBrick !important; }
.eb-text-darkred { color: DarkRed !important; }
.eb-text-coral { color: Coral !important; }
.eb-text-tomato { color: Tomato !important; }
.eb-text-orangered { color: OrangeRed !important; }
.eb-text-darkorange { color: DarkOrange !important; }
.eb-text-orange { color: Orange !important; }
.eb-text-gold { color: Gold !important; }
.eb-text-yellow { color: Yellow !important; }
.eb-text-rebeccapurple { color: RebeccaPurple !important; }
.eb-text-indigo { color: Indigo !important; }
.eb-text-lime { color: Lime !important; }
.eb-text-limegreen { color: LimeGreen !important; }
.eb-text-seagreen { color: SeaGreen !important; }
.eb-text-forestgreen { color: ForestGreen !important; }
.eb-text-green { color: Green !important; }
.eb-text-darkgreen { color: DarkGreen !important; }
.eb-text-teal { color: Teal !important; }
.eb-text-darkcyan { color: DarkCyan !important; }
.eb-text-aqua { color: Aqua !important; }
.eb-text-cyan { color: Cyan !important; }
.eb-text-dodgerblue { color: DodgerBlue !important; }
.eb-text-royalblue { color: RoyalBlue !important; }
.eb-text-blue { color: Blue !important; }
.eb-text-darkblue { color: DarkBlue !important; }
.eb-text-navy { color: Navy !important; }
.eb-text-midnightblue { color: MidnightBlue !important; }
.eb-text-saddlebrown { color: SaddleBrown !important; }
.eb-text-sienna { color: Sienna !important; }
.eb-text-brown { color: Brown !important; }
.eb-text-maroon { color: Maroon !important; }
.eb-text-silver { color: Silver !important; }
.eb-text-gray { color: Gray !important; }
.eb-text-dimgray { color: DimGray !important; }
.eb-text-darkslategray { color: DarkSlateGray !important; }

/* --- CLASES DE UTILIDAD PARA EL COLOR DEL BORDE --- */
.eb-border-gainsboro { border: 1px solid Gainsboro !important; }
.eb-border-lightgray { border: 1px solid LightGray !important; }
.eb-border-silver { border: 1px solid Silver !important; }
.eb-border-darkgray { border: 1px solid DarkGray !important; }
.eb-border-gray { border: 1px solid Gray !important; }
.eb-border-darkslategray { border: 1px solid DarkSlateGray !important; }
.eb-border-crimson { border: 2px solid Crimson !important; }
.eb-border-red { border: 2px solid Red !important; }
.eb-border-dodgerblue { border: 2px solid DodgerBlue !important; }
.eb-border-royalblue { border: 2px solid RoyalBlue !important; }
.eb-border-gold { border: 2px solid Gold !important; }

/* --- ACENTOS PARA ACCIONES INTERACTIVAS --- */
.eb-btn-action {
    display: inline-block;
    padding: 12px 24px;
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    border: none;
}
.eb-btn-dodgerblue { background-color: DodgerBlue !important; color: #ffffff !important; }
.eb-btn-dodgerblue:hover { background-color: RoyalBlue !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.eb-btn-crimson { background-color: Crimson !important; color: #ffffff !important; }
.eb-btn-crimson:hover { background-color: DarkRed !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.eb-btn-mediumseagreen { background-color: MediumSeaGreen !important; color: #ffffff !important; }
.eb-btn-mediumseagreen:hover { background-color: SeaGreen !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* --- CONTENEDOR DE CUADRÍCULA ADAPTABLE PARA LA APLICACIÓN --- */
.eb-color-grid-system {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.eb-color-card {
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.85em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}
.eb-color-card:hover {
    transform: translateY(-3px);
}

================================================================================
EJEMPLO DE MARCADO REAL EN EL EDITOR DE ARTÍCULOS DE JOOMLA
================================================================================

Una vez que guardes el CSS anterior en tu plantilla Joomla, crear contenido técnico elegante, de alto contraste y con estilo resulta muy sencillo. Puedes escribir componentes HTML limpios como este y Joomla no alterará el diseño:

<!-- Fila de tarjetas de resumen estructural para un panel avanzado -->
<div class="eb-color-grid-system">
    
    <div class="eb-color-card eb-bg-aliceblue eb-border-lightgray">
        <h4 class="eb-text-midnightblue" style="margin: 0 0 5px 0;">Usuarios totales</h4>
        <span style="font-size: 1.8em; font-weight: bold; color: Crimson;">1,470</span>
    </div>

    <div class="eb-color-card eb-bg-mintcream eb-border-silver">
        <h4 class="eb-text-darkgreen" style="margin: 0 0 5px 0;">Estado del sistema</h4>
        <span class="eb-text-limegreen" style="font-size: 1.1em; font-weight: bold;">OPERATIVO</span>
    </div>

    <div class="eb-color-card eb-bg-lightyellow eb-border-gold">
        <h4 class="eb-text-saddlebrown" style="margin: 0 0 5px 0;">Carga del servidor</h4>
        <span style="font-size: 1.5em; font-weight: bold; color: DarkOrange;">24%</span>
    </div>

</div>

<!-- Fila de botones de llamada a la acción -->
<div style="margin-top: 20px; text-align: left;">
    <a href="#" class="eb-btn-action eb-btn-dodgerblue">Abrir consola principal</a>
    <a href="#" class="eb-btn-action eb-btn-crimson" style="margin-left: 10px;">Terminar instancia</a>
</div>

--------------------------------------------------------------------------------
CONCLUSIÓN: DEJA DE CONVERTIR CANALES Y DISEÑA A LA VELOCIDAD DEL PENSAMIENTO
--------------------------------------------------------------------------------

Deja de perder tiempo valioso de desarrollo convirtiendo canales de color digital en sitios externos lentos o buscando en bibliotecas enormes de tokens para realizar tareas básicas de prototipado. El navegador ya tiene todo lo necesario para crear interfaces de alta fidelidad al instante.

Guarda ahora en tus favoritos la guía completa de nombres de colores CSS de eBits, mantenla abierta en un panel de desarrollo adyacente, utiliza estas clases de utilidad personalizadas en los archivos de plantilla y empieza hoy mismo a crear estructuras web legibles y de alto rendimiento.

Claire Jones

Ingeniera de la nube / Redactora técnica
Plataforma tecnológica eBits @ ebits.icu