ForHosting KIT · Immagini e foto

Generatore campione colore SVG

Ottenga un campione di colore pronto per documenti e legende: #3498db diventa un quadrato SVG di 24 per 24 riempito con quel colore ed etichettato per i lettori di schermo. Regoli dimensioni e angoli arrotondati quando serve. Gratis nel suo browser.

  • Gratis
  • Funziona nel suo browser
  • Senza registrazione
  • I suoi dati restano sul dispositivo
Usalo da WebAPIEmailTelegramApp presto
Se inserisce
Colore
#3498db
Ottiene
Hex
#3498db
Hex grezzo
#3498db
Resistenza (Ω)
52
G
152

I design system, le guide di stile e la documentazione tecnica hanno spesso bisogno di un piccolo rettangolo colorato accanto al codice hex affinché il lettore veda il blu del brand, il rosso di stato o i colori di una serie di grafico senza aprire un altro strumento di palette. Scrivere l'SVG a mano invita a errori sull'attributo fill, a dimensioni disallineate nella stessa legenda e a hex non validi che falliscono solo più tardi nel browser. Questo generatore di campione colore SVG accetta un colore hex, larghezza e altezza opzionali e un raggio d'angolo opzionale, convalida gli input e restituisce un markup SVG inline deterministico che Lei può incollare in Markdown, HTML o storybook di componenti.

Che cos'è un campione colore SVG e quando serve

Un campione di colore è un piccolo rettangolo riempito che rappresenta un singolo token di colore: brand primario, stato di pericolo, serie A di un grafico o un gradino di palette in un design system. Sul web la rappresentazione più portabile è un elemento SVG inline con un unico rect il cui fill corrisponde a un hex normalizzato. A differenza di un chip PNG raster, l'SVG scala nitido su schermi retina, stampa in modo pulito e si incorpora nei renderer Markdown che consentono HTML o SVG grezzo.

A differenza di uno sfondo CSS su uno span, il markup è autonomo: Lei può copiare una sola stringa in un README, una pagina Confluence, un modello e-mail che accetta SVG o una nota Storybook senza distribuire un foglio di stile. I team che pubblicano librerie di componenti spesso necessitano di decine di chip identici che differiscono solo per riempimento ed etichetta; generarli a mano è noioso e soggetto a errori, soprattutto quando si mescolano la forma abbreviata a tre cifre, le maiuscole e l'hash assente.

Il raggio d'angolo opzionale supporta chip di UI moderni senza costringere a modificare path a mano.

Chip di documentazione dei token di design

Generi un campione SVG coerente per ogni colore di brand o di stato in una guida di stile, così i lettori vedono il riempimento accanto al codice hex.

Legende di grafici e mappe

Costruisca chip di colore a dimensione fissa per legende di serie e chiavi coropletiche con riempimenti hex convalidati e angoli arrotondati opzionali.

Quali formati hex accetta il generatore di campione colore SVG?

Colori esadecimali a tre o sei cifre, con o senza # iniziale, senza distinzione di maiuscole. La forma abbreviata come #abc si espande in #aabbcc.

Quali sono le dimensioni predefinite del campione?

Lei può impostare uno o entrambi a qualsiasi intero da 1 a 512 per chip più densi o più grandi.

Come si ottiene un campione arrotondato?

Non deve superare la metà del lato minore. Quando rx è 0 o omesso, il rect ha angoli vivi e nessun attributo rx.

I lettori di schermo capiscono quale colore mostra il campione?

Sì. Ogni campione è dichiarato come immagine e porta un’etichetta con il suo codice, per esempio Color swatch #3498db, così il lettore di schermo annuncia il colore invece di saltarlo.

Posso incollare il campione in un README o in una pagina Markdown?

Sì, ovunque il visualizzatore accetti HTML o SVG diretti. Il campione è un unico blocco autonomo che non richiede fogli di stile e resta nitido su schermi ad alta densità e in stampa.

Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.

POSThttps://api.kit.forhosting.com/color/swatch-svg

Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.

curl -X POST https://api.kit.forhosting.com/color/swatch-svg \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#3498db"}'
{
  "color": "#3498db"
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.swatch_svg",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.

per richiesta$0.002

Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.

HTTPCodiceSignificato
401unauthorizedChiave API mancante o non valida: controlla l'header Authorization.
402insufficient_balanceCredito esaurito: ricarica per continuare a eseguire attività.
404unknown_typeTipo di attività sconosciuto: controlla il campo type della richiesta.
429rate_limitedTroppe richieste in poco tempo: rallenta e riprova tra qualche secondo.

La convalida fallita è segnalata come invalid_input e non viene fatturata, il che mantiene sicuri i generatori automatici di legende quando un campo CMS conserva ancora un nome colore in bozza invece di un codice hex.

Che cos'è un campione colore SVG e quando serve

Questa capacità standardizza quel chip: Lei invia una stringa colore e riceve un SVG fisso con width, height, viewBox, role e un aria-label accessibile, più l'hex a sei cifre espanso e i canali RGB per tabelle accanto al grafico.

Contratto di input, regole di convalida e campi di risposta

La forma abbreviata a tre cifre come #abc si espande in #aabbcc e viene portata in minuscolo per un contratto stabile. Larghezza e altezza opzionali sono interi da uno a cinquecentododici inclusi; se li omette ottiene il chip predefinito ventiquattro per ventiquattro usato nelle legende dense. Il rx opzionale imposta un raggio d'angolo; deve essere un numero finito maggiore o uguale a zero e non superiore alla metà del lato minore, con predefinito zero per angoli vivi. L'ordine degli attributi è fisso, così il confronto byte per byte nei test resta stabile tra motori JavaScript. Invii con POST un oggetto JSON con un campo color obbligatorio: una stringa hex di tre o sei cifre esadecimali, con o senza cancelletto iniziale. Lunghezze non valide, caratteri non hex, prefissi 0x, numeri nudi e stringhe vuote falliscono con invalid_input indicando il problema. In caso di successo il corpo ripete il colore normalizzato come color e hex, l'hex_raw originale trimmato, i canali interi r, g e b, width, height e rx risolti, una stringa view_box, un flag shorthand, un breve messaggio e la stringa SVG due volte come svg e markup affinché i client che si aspettano l'uno o l'altro nome possano legare senza mappare. La radice SVG include sempre il namespace SVG, attributi width e height coincidenti, un viewBox di zero zero width height, role uguale a img e un aria-label che include l'hex normalizzato per i lettori di schermo.

Dove un'API di campione colore SVG conviene

I bot di QA design possono rigenerare ogni campione da un file di token in CI e far fallire la build quando il markup diverge, intercettando maiuscole accidentali o hash mancanti prima delle note di rilascio. I generatori di documentazione che trasformano token di design in pagine leggibili possono chiamare questo endpoint una volta per token e iniettare il markup restituito accanto al nome del token, al valore hex e alla nota d'uso senza inventare template SVG per framework. I costruttori di legende per grafici e mappe necessitano di chip della stessa dimensione con riempimenti diversi; fissare width e height e variare solo il colore mantiene l'allineamento prevedibile in tabelle e righe flex. Poiché l'implementazione è parse puro di livello A, ogni chiamata riuscita costa il prezzo base pubblicato $0.002 senza token di modello né rete in uscita, e la convalida fallita non consuma saldo.

README e note Storybook verificati in CI

Rigeneri campioni SVG inline da un file JSON di token nell'integrazione continua e fallisca quando markup o colori divergono.

Cosa include la risposta oltre al markup SVG?

Colore #rrggbb normalizzato, hex_raw originale, canali RGB, width, height, rx, view_box, un flag shorthand, un breve messaggio e lo stesso markup sotto le chiavi svg e markup.

Quanto costa il generatore di campione colore SVG?

Lo strumento nel browser è gratuito. Le richieste API usano saldo KIT prepagato a $0.002 per chiamata riuscita; l'input non valido non viene fatturato.

Leggi la documentazione completa del KIT →