Paleta de Colores - Sistema KreaDTE

Paleta ColorBonito (Actualizada)

Paleta de colores basada en la imagen proporcionada por el usuario.

Rosa Brillante
Rosa Brillante

Color: #E91E63

Variable: --color-bonito-primary

Badge
Azul Brillante
Azul Brillante

Color: #9C27B0

Variable: --color-bonito-secondary

Badge
Amarillo Brillante
Amarillo Brillante

Color: #FFEB3B

Variable: --color-bonito-accent

Badge
Rojo Brillante
Rojo Brillante

Color: #F44336

Variable: --color-bonito-danger

Badge
Gradientes Disponibles:
  • --color-bonito-gradient-primary (Rosa brillante)
  • --color-bonito-gradient-secondary (Azul brillante)
  • --color-bonito-gradient-accent (Amarillo brillante)
  • --color-bonito-gradient-danger (Rojo brillante)
Clases CSS:
  • .btn-bonito-primary, .btn-bonito-secondary, etc.
  • .badge-bonito-primary, .badge-bonito-secondary, etc.
  • .card-bonito, .card-header-bonito-primary
  • .form-control-bonito, .form-select-bonito
Paleta Mensual 2025
Enero
Enero

Color: #D4A574

Descripción: Marrón claro

Badge
Febrero
Febrero

Color: #8B9467

Descripción: Verde oliva

Badge
Marzo
Marzo

Color: #F4A460

Descripción: Amarillo-naranja

Badge
Abril
Abril

Color: #DAA520

Descripción: Amarillo más oscuro

Badge
Mayo
Mayo

Color: #CD853F

Descripción: Naranja-marrón

Badge
Junio
Junio

Color: #8B7355

Descripción: Verde-marrón

Badge
Julio
Julio

Color: #D4AF37

Descripción: Dorado-marrón

Badge
Agosto
Agosto

Color: #696969

Descripción: Gris oscuro-marrón

Badge

Colores Estadísticas (Tierra)

Fondo Inicio
Fondo Inicio

Var: --color-stats-card-bg-start

Color: #efebe9

Fondo Fin
Fondo Fin / Borde

Var: --color-stats-card-bg-end

Color: #d7ccc8

Título / Texto
Título / Texto

Var: --color-stats-title

Color: #5D4037

Ejemplo Tarjeta
Ejemplo visual

Botón: --color-piedra

Color: #8D6E63 (Piedra)

Ejemplo: Tarjeta con Header (Degradado Piedra)

Este es el degradado que usas en "Ejemplo Tarjeta" aplicado a un header de card:

Header con Degradado Piedra

Degradado usado:

background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 100%);

Colores:

  • #efebe9 (Inicio - Tierra claro)
  • #d7ccc8 (Fin - Tierra medio)

Color del texto:

#5D4037 (Café oscuro)
Ejemplo Completo
Columna 1 Columna 2
Dato 1 Dato 2
Uso de las Paletas
Paleta ColorBonito (Nueva):
  • Variables CSS: --color-bonito-primary, --color-bonito-secondary, etc.
  • Clases: .btn-bonito-primary, .badge-bonito-primary, .card-bonito
  • Gradientes: --color-bonito-gradient-primary, etc.
Paleta Mensual (Original):
  • --color-enero hasta --color-agosto
  • --color-primary (Julio - Dorado-marrón)
  • --color-secondary (Marzo - Amarillo-naranja)
  • --color-success (Febrero - Verde oliva)
  • --color-warning (Abril - Amarillo oscuro)
  • --color-danger (Mayo - Naranja-marrón)
  • --color-info (Junio - Verde-marrón)
Clases disponibles:
  • .bg-enero, .bg-febrero, etc. (fondos)
  • .color-enero, .color-febrero, etc. (texto)
  • .btn-enero, .btn-febrero, etc. (botones)
  • .badge-enero, .badge-febrero, etc. (badges)
  • .gradient-enero, .gradient-febrero, etc. (gradientes)