Développez une couleur hex courte
Obtenez la forme longue d’une couleur CSS courte : #3a7 devient #33aa77, car chaque chiffre est répété et jamais complété par des zéros, avec aussi 33aa77 sans le dièse. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Hex
- #3a7
- Entrée
- #3a7
- Forme abrégée
- #3a7
- Développé
- #33aa77
- Développé sans #
- 33aa77
L’outil de développement des couleurs hexadécimales courtes transforme une couleur CSS compacte à trois chiffres en son équivalent complet à six chiffres. L’entrée entière est validée avant le développement : les couleurs à six chiffres, les variantes alpha, les caractères erronés et les valeurs incomplètes produisent donc une erreur claire. Le résultat est normalisé en minuscules et comporte toujours le dièse initial pour une utilisation directe en CSS.
Fonctionnement du développement hexadécimal à trois chiffres
Une couleur hexadécimale CSS décrit normalement le rouge, le vert et le bleu avec deux chiffres par canal. Dans la forme courte, chaque canal n’utilise qu’un chiffre. Le développement n’ajoute pas de zéros et n’estime pas une teinte voisine : il répète chaque chiffre d’origine.
Ainsi, #3a7 devient #33aa77 : le chiffre rouge 3 devient 33, le chiffre vert a devient aa et le chiffre bleu 7 devient 77. Cette répétition conserve exactement la couleur représentée par la notation courte selon les règles CSS. L’outil accepte les lettres hexadécimales en majuscules ou en minuscules et normalise sa réponse en minuscules, ce qui uniformise les configurations générées sans modifier la couleur.
Le dièse initial est facultatif en entrée, car les valeurs provenant d’un tableur, d’un argument de ligne de commande ou d’un formulaire omettent souvent cette ponctuation CSS. La valeur complète renvoyée comporte toujours le dièse, tandis qu’un autre champ fournit les six chiffres seuls pour les systèmes stockant du texte hexadécimal brut. Aucune conversion d’espace colorimétrique ni aucun arrondi n’intervient : il s’agit d’une transformation directe et déterministe des caractères.
Définition d’une entrée valide
Une entrée valide contient exactement trois chiffres hexadécimaux après un éventuel dièse initial. Les chiffres de 0 à 9 et les lettres de A à F sont admis, quelle que soit leur casse. Les valeurs #09f, abc et F0C sont valides, contrairement à #12, #1234, #112233, red, 0xabc et #ggg.
Cette règle stricte est essentielle, car plusieurs formats ressemblants ont des significations différentes. Quatre chiffres peuvent représenter une notation courte avec canal alpha, tandis que six chiffres constituent déjà une forme développée ; accepter silencieusement l’un de ces formats détournerait la capacité de son objectif. Les espaces extérieurs sont supprimés pour faciliter l’utilisation depuis les formulaires et le presse-papiers, mais tout espace interne reste incorrect.
L’entrée doit aussi être une chaîne, car une valeur numérique peut perdre des zéros initiaux significatifs avant d’atteindre l’outil. Les automatisations peuvent ainsi repérer les erreurs et éviter d’écrire des valeurs mal formées dans une feuille de style ou une collection de jetons.
Intégration de la couleur développée dans un flux
Utilisez la valeur développée lorsqu’un outil en aval, un schéma ou une convention d’équipe impose des couleurs à six chiffres. Un script de migration peut normaliser d’anciens jetons avant de les comparer ; un importateur de système de design peut convertir les valeurs compactes avant de stocker des jetons canoniques ; et une chaîne de validation peut refuser les noms involontaires ou les formes alpha à son entrée.
Comme le résultat est un texte stable en minuscules, plusieurs appels avec des casses différentes produisent la même valeur canonique, ce qui clarifie les diffs et les clés de cache. L’opération ne dépend pas du réseau et ne consulte aucune base de couleurs externe. Pour obtenir des canaux RGB, du HSL, des noms, des mélanges ou un contraste, choisissez une capacité de conversion dédiée.
Cas d’usage
Normaliser des jetons de design
Convertissez les valeurs compactes en couleurs cohérentes à six chiffres et en minuscules avant stockage ou comparaison.
Préparer du CSS pour une chaîne stricte
Développez les couleurs courtes pour les linters, générateurs ou schémas exigeant la notation complète #RRGGBB.
Valider des couleurs importées
Refusez les caractères incorrects et les mauvaises longueurs tout en convertissant les entrées légitimes à trois chiffres d’un flux.
Questions fréquentes
Que réalise le développement ?
Il double chaque chiffre de la forme courte. Par exemple, #3a7 devient #33aa77.
Le dièse initial est-il obligatoire ?
Non. #abc et abc sont tous deux admis, et le champ expanded comporte toujours un dièse initial.
Les lettres majuscules sont-elles acceptées ?
Oui. Les lettres hexadécimales de A à F peuvent être en majuscules ou en minuscules ; le résultat est normalisé en minuscules.
Puis-je envoyer une couleur à six ou quatre chiffres ?
Non. Cette capacité accepte exactement trois chiffres hexadécimaux. Toute autre longueur provoque une erreur d’entrée non valide.
Comment s’écrit #3a7 en entier ?
Il s’écrit #33aa77. Le chiffre rouge 3 devient 33, le vert a devient aa et le bleu 7 devient 77 : la couleur elle-même ne change pas.
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/hex-shorthand-expand \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#3a7"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-shorthand-expand", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#3a7"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-shorthand-expand",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#3a7"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-shorthand-expand", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#3a7"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#3a7"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-shorthand-expand", 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
{
"hex": "#3a7"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_shorthand_expand",
"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
Saisissez une valeur comme #3a7 et obtenez #33aa77, prête pour une feuille de style, des jetons de design, un fichier de configuration ou une API exigeant la notation longue.
Définition d’une entrée valide
En cas d’échec de validation, l’API renvoie une erreur d’entrée non valide accompagnée d’un message décrivant la forme exigée.
Intégration de la couleur développée dans un flux
L’exécuteur du navigateur emploie la même logique pure que l’API : une valeur vérifiée de façon interactive se comporte donc pareil en automatisation. Envoyez une couleur courte dans le champ hex, puis lisez expanded pour une valeur CSS ou expanded_no_hash si un autre format ajoute son propre préfixe. Chaque exécution API coûte $0.002.
Questions techniques
Quel est le coût d’une requête API ?
Chaque requête API coûte $0.002. Le même développement déterministe est aussi proposé dans l’exécuteur du navigateur.