Générateur échantillon couleur SVG
Obtenez une pastille de couleur prête pour vos documents et légendes : #3498db devient un carré SVG de 24 sur 24 rempli de cette couleur et étiqueté pour les lecteurs d’écran. Réglez la taille et l’arrondi des coins si besoin. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Couleur
- #3498db
- Hex
- #3498db
- Hex brut
- #3498db
- Résistance (Ω)
- 52
- G
- 152
Les design systems, guides de style et documents techniques ont constamment besoin d'un petit rectangle coloré à côté d'un code hex pour que le lecteur voie le bleu de marque, le rouge d'état ou les couleurs d'une série de graphique sans ouvrir un autre outil de palette. Écrire le SVG à la main invite aux fautes sur l'attribut fill, aux dimensions incohérentes dans une légende et aux hex invalides qui ne cassent que plus tard dans le navigateur. Ce générateur d'échantillon couleur SVG accepte une couleur hex, une largeur et une hauteur optionnelles ainsi qu'un rayon d'angle optionnel, valide les entrées et renvoie un balisage SVG inline déterministe que vous pouvez coller dans Markdown, HTML ou des storybooks de composants.
Qu'est-ce qu'un échantillon couleur SVG et quand en avez-vous besoin
Un échantillon de couleur est un petit rectangle rempli qui représente un seul jeton de couleur : marque primaire, état de danger, série A d'un graphique ou étape de palette dans un design system. Sur le web, la représentation la plus portable est un élément SVG inline avec un unique rect dont le fill correspond à un hex normalisé. Contrairement à une pastille PNG raster, le SVG s'affiche net sur écrans retina, s'imprime proprement et s'intègre aux moteurs Markdown qui autorisent le HTML ou le SVG brut.
Contrairement à un fond CSS sur un span, le balisage est autonome : vous pouvez copier une seule chaîne dans un README, une page Confluence, un modèle d'e-mail acceptant le SVG ou une note Storybook sans livrer de feuille de style.
Les équipes qui publient des bibliothèques de composants ont souvent besoin de dizaines de pastilles identiques ne différant que par le remplissage et le libellé ; les générer à la main est long et source d'erreurs, surtout lorsque l'on mélange l'abréviation à trois chiffres, les majuscules et l'absence de dièse. Le rayon d'angle optionnel prend en charge les pastilles d'interface modernes sans vous obliger à éditer des path à la main.
Où une pastille de couleur prête à l’emploi aide
Les générateurs de documentation qui transforment des jetons de design en pages lisibles peuvent appeler ce point de terminaison une fois par jeton et injecter le balisage renvoyé à côté du nom du jeton, de la valeur hex et de la note d'usage sans inventer de modèles SVG par framework. Les robots de QA design peuvent régénérer chaque échantillon depuis un fichier de jetons en CI et faire échouer le build lorsque le balisage dérive, capturant majuscules accidentelles ou dièses manquants avant la publication des notes de version.
Gardez les requêtes petites, figez le champ svg dans les goldens, et vous obtenez des pastilles reproductibles pour README, guides de style, blocs CMS et pages marketing en edge sans monter un pipeline d'images ni rasteriser les couleurs en PNG à chaque changement de jeton.
Cas d’usage
Pastilles de documentation des jetons de design
Générez un échantillon SVG cohérent pour chaque couleur de marque ou d'état dans un guide de style afin que les lecteurs voient le remplissage à côté du code hex.
Légendes de graphiques et de cartes
Construisez des pastilles de couleur de taille fixe pour légendes de séries et clés choroplèthes avec des remplissages hex validés et des coins arrondis optionnels.
Questions fréquentes
Quels formats hex le générateur d'échantillon couleur SVG accepte-t-il ?
Couleurs hexadécimales à trois ou six chiffres, avec ou sans # initial, insensibles à la casse. L'abréviation telle que #abc s'étend en #aabbcc.
Quelles sont les dimensions par défaut de l'échantillon ?
Vous pouvez fixer l'un ou les deux à tout entier de 1 à 512 pour des pastilles plus denses ou plus grandes.
Comment obtenir un échantillon arrondi ?
Il ne doit pas dépasser la moitié du plus petit côté. Lorsque rx vaut 0 ou est omis, le rect a des coins nets et aucun attribut rx.
Les lecteurs d’écran savent-ils quelle couleur montre la pastille ?
Oui. Chaque pastille est déclarée comme image et porte une étiquette avec son code, par exemple Color swatch #3498db : le lecteur d’écran annonce la couleur au lieu de l’ignorer.
Puis-je coller la pastille dans un README ou une page Markdown ?
Oui, dès que l’afficheur accepte le HTML ou le SVG brut. La pastille forme un seul bloc autonome, sans feuille de style, et reste nette sur les écrans haute densité comme à l’impression.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre 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)Exemple de requête
{
"color": "#3498db"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.swatch_svg",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Une validation échouée est signalée comme invalid_input et n'est pas facturée, ce qui protège les constructeurs automatiques de légendes lorsqu'un champ CMS contient encore un nom de couleur en brouillon au lieu d'un code hex.
Qu'est-ce qu'un échantillon couleur SVG et quand en avez-vous besoin
Cette capacité standardise cette pastille : vous envoyez une chaîne de couleur et recevez un SVG fixe avec width, height, viewBox, role et un aria-label accessible, plus l'hex à six chiffres développé et les canaux RGB pour les tableaux à côté du graphique.
Contrat d'entrée, règles de validation et champs de réponse
L'abréviation à trois chiffres telle que #abc s'étend en #aabbcc et est mise en minuscules pour un contrat stable. Largeur et hauteur optionnelles sont des entiers de un à cinq cent douze inclus ; en les omettant vous obtenez la pastille par défaut de vingt-quatre sur vingt-quatre utilisée dans les légendes denses. Le rx optionnel définit un rayon d'angle ; il doit être un nombre fini supérieur ou égal à zéro et ne pas dépasser la moitié du plus petit côté, avec zéro par défaut pour des coins nets. L'ordre des attributs est fixe pour que la comparaison octet à octet des tests reste stable entre moteurs JavaScript. Envoyez en POST un objet JSON avec un champ color obligatoire : une chaîne hex de trois ou six chiffres hexadécimaux, avec ou sans dièse initial. Les alias hex, fill, value, text et input sont acceptés pour le même champ afin que widgets de formulaire et scripts réutilisent des noms courants. Longueurs invalides, caractères non hex, préfixes 0x, nombres nus et chaînes vides échouent avec invalid_input en nommant le problème. En cas de succès le corps renvoie la couleur normalisée comme color et hex, le hex_raw d'origine tronqué, les canaux entiers r, g et b, le width, height et rx résolus, une chaîne view_box, un indicateur shorthand, un court message et la chaîne SVG deux fois comme svg et markup pour que les clients qui attendent l'un ou l'autre nom se lient sans mapping. La racine SVG inclut toujours l'espace de noms SVG, des attributs width et height assortis, un viewBox de zéro zéro width height, role égal à img et un aria-label qui inclut l'hex normalisé pour les lecteurs d'écran. L'unique rect utilise le même width et height avec fill à l'hex normalisé, et n'inclut rx que lorsque le rayon est strictement positif afin que les goldens à coins nets restent minimaux.
Où une API d'échantillon couleur SVG trouve sa place
Les constructeurs de légendes pour graphiques et cartes ont besoin de pastilles de même taille avec des remplissages différents ; fixer width et height tout en ne variant que la couleur maintient un alignement prévisible dans tables et rangées flex. Comme l'implémentation est pure parse de niveau A, chaque appel réussi coûte le prix de base publié $0.002 sans jetons de modèle ni réseau sortant, et une validation échouée ne consomme pas le solde.
Cas d'intégration
README et notes Storybook vérifiés en CI
Régénérez des échantillons SVG inline depuis un fichier JSON de jetons en intégration continue et faites échouer le build lorsque le balisage ou les couleurs dérivent.
Questions techniques
Que contient la réponse outre le balisage SVG ?
Couleur #rrggbb normalisée, hex_raw d'origine, canaux RGB, width, height, rx, view_box, un indicateur shorthand, un court message et le même balisage sous les clés svg et markup.
Combien coûte le générateur d'échantillon couleur SVG ?
L'outil navigateur est gratuit. Les requêtes API utilisent le solde KIT prépayé à $0.002 par appel réussi ; une entrée invalide n'est pas facturée.