<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Colores y Estilos en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .paleta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-top: 15px; }
    .color-card {
      border-radius: 8px;
      padding: 16px;
      color: white;
      font-weight: bold;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

  <!-- Título con estilo inline -->
  <h2 style="color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px;">
    Muestrario de Modelos de Color
  </h2>

  <div class="paleta-grid">
    <!-- Nombre estándar -->
    <div class="color-card" style="background-color: Tomato;">
      Tomato<br><small>Palabra Clave</small>
    </div>

    <!-- Hexadecimal -->
    <div class="color-card" style="background-color: #3b82f6;">
      #3B82F6<br><small>Hexadecimal</small>
    </div>

    <!-- RGB -->
    <div class="color-card" style="background-color: rgb(16, 185, 129);">
      rgb(16, 185, 129)<br><small>RGB Nativo</small>
    </div>

    <!-- RGBA con transparencia -->
    <div class="color-card" style="background-color: rgba(139, 92, 246, 0.85);">
      rgba(...)<br><small>Con Alfa (85%)</small>
    </div>

    <!-- HSL -->
    <div class="color-card" style="background-color: hsl(25, 95%, 53%);">
      hsl(25, 95%, 53%)<br><small>HSL Armónico</small>
    </div>
  </div>

</body>
</html>