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
Esegui gratis nel browser
Esempio risolto
- Colore
- #3498db
- 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.
Casi d'uso
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.
Domande frequenti
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.
Strumenti correlati
Per sviluppatori — accesso via API
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.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/color/swatch-svg \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db"}'const res = await fetch("https://api.kit.forhosting.com/color/swatch-svg", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/swatch-svg",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/swatch-svg", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/swatch-svg", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"color": "#3498db"
}Esempio di risposta
{
"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.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
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.
Casi di integrazione
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.
Domande tecniche
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.