Generatore di tavolozza monocromatica

Un generatore di tavolozza monocromatica riceve un colore hex CSS e un conteggio intero di passi, poi restituisce N campioni che condividono la stessa tinta e la stessa saturazione mentre la luminosità avanza a incrementi uguali dal nero al bianco. Lo strumento converte l'hex in HSL, mantiene fissi H e S e colloca la luminosità a i volte cento diviso N meno uno, così cinque passi cadono a zero, venticinque, cinquanta, settantacinque e cento per cento.

Come una tavolozza monocromatica scala la luminosità

Parta da un colore hex CSS come #3366cc o la forma breve #36c. Il parser rimuove gli spazi, porta le cifre in minuscolo, espande i codici a tre cifre con la regola CSS di raddoppio e converte ogni coppia in interi di rosso, verde e blu da zero a duecentocinquantacinque.

Quei canali si mappano a tinta, saturazione e luminosità con le formule abituali di CSS e W3C: la luminosità è la media delle frazioni massima e minima del canale, la saturazione dipende da quella luminosità e la tinta si misura in gradi intorno alla ruota dei colori, con i grigi acromatici che riportano tinta zero.

Per l'indice di passo i da zero a N meno uno, la luminosità è i volte cento diviso N meno uno, così il primo campione è sempre nero puro con luminosità zero, l'ultimo è sempre bianco puro con luminosità cento, e le fermate intermedie sono ugualmente spaziate nella luminosità HSL. Dopo ogni nuova luminosità nota, lo stesso percorso CSS da tinta a RGB riconverte HSL in canali interi e in un codice hex a sei cifre in minuscolo.

Cinque passi su un blu di luminosità media producono quindi nero, un navy profondo, un tono medio vicino all'originale, un cielo pallido e bianco — tutti ancora con la tinta e la saturazione originali. Non ci sono semi casuali, timestamp di orologio né chiamate di rete, così gli stessi input producono sempre la stessa tavolozza ordinata. Le forme hex alpha a quattro o otto cifre vengono rifiutate perché questo contratto è solo RGB opaco.

Passi non interi o valori fuori da due a ventuno falliscono la convalida affinché i client non superino in silenzio l'intervallo consentito.

Che cosa invia e che cosa riceve in risposta

Invii due campi: color come stringa hex e steps come intero tra due e ventuno inclusi. Ogni campione della tavolozza include index, hex, interi r g b, numeri di tinta saturazione luminosità e stringhe stampabili rgb e hsl. Il colore originale è sempre restituito come base così i client possono mostrare il seme accanto alla rampa; quel seme compare dentro swatches solo quando la sua luminosità cade esattamente su una fermata pari, per esempio luminosità cinquanta con cinque passi.

I controlli tipici includono cinque passi su #3366cc, tre passi sul rosso breve #f00 e la conferma che una stringa non hex fallisce la convalida. Colleghi il modulo gratuito del browser per revisioni di design e rampe rapide, poi chiami il contratto identico dagli script quando serve generazione in massa di scale di token. Conservi steps nell'intervallo documentato invece di affidarsi a ritagli silenziosi — questo strumento fallisce in modo esplicito così i sistemi di design restano prevedibili.

Dove le tavolozze monocromatiche compaiono nel lavoro reale

I designer di prodotto costruiscono rampe di IU a una sola tinta così un primario di marca copre testo, superfici, chip e stati disabilitati senza introdurre una seconda tinta che lotti contro l'identità. I revisori di accessibilità esplorano compagni di un colore di testo o icona lungo una scala di luminosità e consegnano i candidati a un verificatore di contrasto invece di indovinare i mezzitoni a occhio.

I team di marketing producono pastelli di campagna e accenti profondi da un logo saturo per banner social e intestazioni e-mail, preservando l'identità di tinta del marchio. Gli ingegneri frontend programmano rampe monocromatiche in integrazione continua così un solo colore di marca produce una scala documentata per grafici, badge e pulsanti secondari.

Se in seguito Le serve un opposto complementare, una coppia di vicini analoghi, una triade a centoventi gradi o un solo passo di schiaritura, li tratti come intenzioni di ricerca e pagine distinte invece di sovraccaricare questa pagina monocromatica. I colori CSS con nome come tomato sono fuori ambito; li risolva prima in hex.