Palette colori¶

Fonte ufficiale¶

La palette è estratta dalla sezione 7 «Colori» del Manuale Immagine Coordinata AGESCI 2011. I valori HEX usati nel tema corrispondono ai codici Pantone riportati nel manuale, con un’eccezione documentata per il rosso R/S.

Colori istituzionali¶

Colore	Pantone	HEX	Variabile Sass	Uso
Viola	527C	`#7A1E99`	`$agesci-viola`	Branca Capi, colore istituzionale
Viola scuro	072C	`#622599`	`$agesci-viola-scuro`	Variante scura del viola
Giallo oro	123C	`#FFCC1E`	`$agesci-giallo-oro`	Accenti, dettagli dorati
Azzurro	279C	`#6689CC`	`$agesci-azzurro`	Colore generico/zona

Colori di branca¶

Colore	Pantone	HEX	Variabile Sass	Branca
Giallo L/C	109C	`#F9D616`	`$agesci-giallo-lc`	Lupetti / Coccinelle
Verde E/G	363C	`#3D8E33`	`$agesci-verde-eg`	Esploratori / Guide
Rosso R/S	032C	`#EF3340`	`$agesci-rosso-rs`	Rover / Scolte

Nota

Il Manuale 2011 riporta per il rosso R/S (Pantone 032C) un valore RGB 80/15/17 che corrisponde a un marrone scuro: si tratta di un refuso di stampa del PDF (confermato). Il tema usa il valore standard Pantone 032C (#EF3340), coerente con l’uso associativo.

Neutri di supporto¶

Colore	HEX	Variabile Sass	Uso
Nero	`#1A1A1A`	`$agesci-nero`	Testo su sfondi chiari
Grigio scuro	`#343A40`	`$agesci-grigio-scuro`	Sfondo footer, testo secondario
Grigio	`#6C757D`	`$agesci-grigio`	Testo placeholder, elementi disabilitati
Grigio chiaro	`#F4F4F6`	`$agesci-grigio-chiaro`	Sfondi sezioni, card alt
Bianco	`#FFFFFF`	`$agesci-bianco`	Testo su sfondi scuri

Classi utility¶

Le classi utility permettono di applicare direttamente i colori della palette a qualsiasi elemento HTML senza scrivere CSS custom.

Classi di sfondo¶

Classe	Colore di sfondo	Testo automatico
`bg-ag-viola`	`#7A1E99` (viola)	bianco
`bg-ag-azzurro`	`#6689CC` (azzurro)	bianco
`bg-ag-giallo-lc`	`#F9D616` (giallo L/C)	nero
`bg-ag-verde-eg`	`#3D8E33` (verde E/G)	bianco
`bg-ag-rosso-rs`	`#EF3340` (rosso R/S)	bianco
`bg-ag-giallo-oro`	`#FFCC1E` (giallo oro)	nero

Classi di testo¶

Classe	Colore del testo
`text-ag-viola`	`#7A1E99`
`text-ag-azzurro`	`#6689CC`
`text-ag-verde-eg`	`#3D8E33`
`text-ag-rosso-rs`	`#EF3340`

Esempi d’uso¶

{# Banner di branca #}
<div class="bg-ag-verde-eg p-3 rounded">
  <h3 class="mb-0">Esploratori e Guide</h3>
</div>

{# Badge colorato #}
<span class="badge bg-ag-rosso-rs">Rover/Scolte</span>

{# Testo colorato #}
<p class="text-ag-viola fw-bold">Nota importante</p>

{# Card con intestazione di branca #}
<div class="card">
  <div class="card-header bg-ag-giallo-lc">
    <strong>Attività L/C</strong>
  </div>
  <div class="card-body">
    Contenuto della card
  </div>
</div>

Uso nelle view e nei template dinamici¶

Il template tag branca_bg restituisce la classe di sfondo corrispondente alla branca attiva, senza hardcodare il valore:

{% load agesci_tags %}
<span class="badge {% branca_bg %}">Etichetta branca</span>

Per applicare colori fissi (non dipendenti dalla branca) usa le classi bg-ag-* direttamente.