Risposta diretta
Un builder di sistemi colore converte i colori del brand immutabili in scale primitive 50–950 e mappature semantiche chiaro/scuro modificabili nel browser locale senza alcun invio di dati su server.
Come usare questo strumento
Inserisci i colori sorgente
Incolla valori HEX, oklch() o color(display-p3 …) e assegna ciascun colore a Primary, Neutral o a un'altra famiglia con un'ancora 400/500/600.
Crea il progetto
Genera le scale obbligatorie Primary e Neutral, le scale di stato e le associazioni semantiche senza alterare le ancore bloccate.
Modifica e visualizza anteprima
Regola i passaggi della scala o le associazioni semantiche e controlla pulsanti, schede, moduli e stati in modalità chiara e scura.
Ancore immutabili e livelli semantici
I colori sorgente rimangono ancore esatte allo step di scala designato. Le scale primitive comprendono livelli da 50 a 950 per famiglia. I ruoli semantici (sfondo, superficie, testo, primario, testo su primario, bordo, focus e stato) fanno riferimento alle primitive separatamente per i temi chiari e scuri, separando il significato logico dai campioni grezzi.
- Valori var() non risolti, sintassi colore relativa e color-mix() vengono rifiutati con messaggi di errore chiari.
- Le scale Primary e Neutral sono obbligatorie; Secondary e Accent facoltative; Success, Warning e Destructive sono sempre presenti.
- Tutte le elaborazioni avvengono lato client con salvataggio automatico locale, senza account né upload.
Esempi pratici
Sistema primario blu brand
Input: Sorgente: #2563eb come Primary @ 500
Output: Scala Primary 50–950 + ruoli chiaro/scuro (primary, on-primary, focus) pronti per il controllo
Crea una documentazione di consegna completa da un singolo colore senza ricorrere a convertitori sparsi.
Limitazioni
- Non deduce valori per variabili CSS non risolte o color-mix(); inserisci valori conformi a CSS Color 4.
- I suggerimenti estetici di scala sono indicazioni euristiche, non una certificazione legale di conformità.
Domande frequenti
Posso proseguire al verificatore senza prima esportare?
Sì. Il Tool Island condiviso mantiene lo stesso documento in memoria, permettendo di passare da una fase all'altra senza ricaricare la pagina.
Il builder invia i miei colori a un server esterno?
No. Colori, scale e file di progetto rimangono nella memoria e nello storage locale del browser. Nessun dato viene trasmesso all'esterno.
Come funziona la navigazione da tastiera tra le fasi?
Usa le schede di fase per spostarti tra builder, verificatore e generatore di token. Il focus resta ben visibile e l'URL canonico non cambia.
Riferimenti autorevoli e standard
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.