Générateur de points de couleur pour dégradés

Le générateur de points de couleur pour dégradés transforme deux couleurs d’extrémité en une séquence complète et prévisible destinée au CSS, aux jetons de conception, aux graphiques, au canevas et aux créations programmatiques. Indiquez une couleur de départ, une couleur d’arrivée et le nombre total de points. Le résultat comprend les deux extrémités et toutes les couleurs intermédiaires, chacune associée à sa position en pourcentage.

Créez une liste complète à partir de deux extrémités

Un dégradé part souvent d’une consigne graphique simple : passer d’une couleur de marque à une autre en un nombre précis d’étapes. Transformer cette consigne en données réutilisables devient fastidieux dès qu’il faut calculer uniformément chaque couleur intermédiaire et chaque position. Ce générateur reçoit une couleur hexadécimale de départ, une couleur d’arrivée et le nombre total de points souhaité.

Il place le départ à zéro pour cent et l’arrivée à cent pour cent, puis répartit tous les autres points selon des intervalles égaux. Chaque résultat est normalisé en notation hexadécimale majuscule à six chiffres ; une saisie abrégée comme #f00 donne donc la valeur stable #FF0000. Le tableau obtenu peut alimenter directement des dégradés CSS, des définitions SVG, du code de canevas, une configuration graphique ou une chaîne de création de jetons.

Puisque le nombre comprend les deux extrémités, demander cinq points produit les positions 0, 25, 50, 75 et 100 pour cent. Cette convention rend la taille de la réponse évidente et évite les ajouts implicites susceptibles de décaler les indices utilisés ensuite.

Comprenez la méthode d’interpolation déterministe

Les couleurs sont interpolées séparément sur les canaux rouge, vert et bleu. À chaque position, le générateur calcule la distance proportionnelle entre la valeur initiale et la valeur finale de chaque canal, puis arrondit le résultat à l’entier valide le plus proche, entre 0 et 255. Cette méthode est couramment appelée interpolation RGB linéaire.

Elle est volontairement directe et reproductible : elle ne dépend ni du hasard, ni d’un profil colorimétrique, ni du rendu d’un navigateur, ni d’un service externe. Les positions en pourcentage proviennent de l’indice du point divisé par le nombre d’intervalles ; les décimales périodiques sont arrondies à six chiffres. Avec quatre points, par exemple, les positions centrales deviennent 33.333333 et 66.666667 pour cent sans artefacts gênants liés aux nombres flottants.

Le RGB linéaire n’est pas présenté comme un espace perceptuellement uniforme : des écarts numériques égaux peuvent sembler de luminosité différente.

Validez les données et intégrez les points obtenus

Les deux champs d’extrémité acceptent trois ou six chiffres hexadécimaux, avec ou sans dièse initial. Les espaces entourant la valeur sont supprimés, mais les espaces internes, les canaux alpha, les noms de couleurs et les caractères non hexadécimaux sont refusés. Le nombre de points doit être un véritable entier compris entre 2 et 256.

Le minimum de deux garantit une position significative pour chaque extrémité, tandis que la limite supérieure maintient une taille de sortie et un temps d’exécution prévisibles. Une réponse réussie répète les extrémités normalisées, indique le nombre validé et fournit un tableau stops dont chaque enregistrement contient les champs color et percentage. Vous pouvez réunir ces enregistrements dans une valeur CSS linear-gradient, les conserver comme jetons de conception, les insérer dans une liste de points SVG ou employer les pourcentages comme repères normalisés dans un autre moteur de rendu.

Le même algorithme borné calcule les extrémités et les valeurs intermédiaires, et l’arithmétique entière du numérateur de canal limite les dérives flottantes inutiles.