Aller au contenu
Tutorial

Convertissez les couleurs entre hexadécimal, RVB et HSL avec un seul appel API

| 5 min read

Envoyez une couleur au format HEX, RVB ou HSL et récupérez les trois représentations en un seul POST. Créez des jetons de conception, normalisez l'entrée CMS et générez des échelles de thème sans bibliothèque de couleurs.

Code editor generating color design tokens from a brand color
Photo by Safar Safarov on Unsplash

Les mathématiques de conversion des couleurs sont le genre de code que vous écrivez une seule fois, que vous vous trompez subtilement et que vous copiez entre des projets pour toujours. Hex vers RVB est simple ; RVB vers HSL est l'endroit où se trouvent les bugs d'un degré vivre. Ce point de terminaison prend une couleur dans l'un des trois formats et renvoie les trois à la fois. vous arrêtez de transporter des fonctions de conversion.

La demande

La réponse vous donne la chaîne hexadécimale, un {`{ r, g, b }`} objet, et un {`{ h, s, l }`} objet ensemble :

Le format d'entrée n'a pas d'importance. Passer rgb(62, 201, 151) ou une chaîne HSL et vous obtenez le trois mêmes représentations en arrière. Hex fonctionne avec ou sans le #:

Générez une échelle de jeton de conception à partir d'une couleur de marque

HSL est le format sur lequel il vaut la peine de s'appuyer. Parce qu'il sépare la teinte de la luminosité, vous pouvez produire un échelle complète de teinte et de nuance en maintenant la teinte et la saturation stables et en augmentant la valeur de luminosité. Convertissez une fois l'hexagone de votre marque en HSL, puis parcourez la légèreté pour générer l'échelle de 50 à 900. besoins du système de conception :

Exécutez-le dans une étape de construction et écrivez la sortie dans un fichier de variables CSS. Vous obtenez une coordination palette à partir d'une couleur source unique, et changer la couleur de la marque régénère toute l'échelle :

Besoin d’une palette complète plutôt que d’une seule conversion ? Le /v1/color/palette le point final prend une couleur de base et renvoie un ensemble coordonné de nuances et de couleurs complémentaires, vous pouvez donc créer un thème autour d'une couleur de marque sans choisir chaque échantillon à la main.

Normaliser les couleurs collées dans un CMS

Les éditeurs de contenu collent les couleurs dans le format exporté par leur outil de conception : un hexadécimal de Figma, un rgb() à partir d'un outil de capture d'écran, un HSL à partir d'un extrait CSS. Exécutez chaque valeur collée via le point final lors de la sauvegarde et du stockage de l'hexagone normalisé. Votre code de rendu en traite alors un format, et l'éditeur continue de coller ce qui lui convient.

Où ça correspond

Pour les mathématiques interactives de l'interface utilisateur dans le navigateur, une fonction locale convient. L'API gagne sa place dans le build étapes, backends et tout langage sans package de couleur unie : un seul appel HTTP remplace un dépendance. La conversion des couleurs est l'un des quelque 200 points de terminaison à usage unique sur botoi, tous derrière une clé avec 5 req/min gratuites.

Essayez la conversion dans le aire de jeux interactive, parcourir le documentation complète sur l'API, ou connectez le Serveur MCP pour convertir les couleurs directement à partir de Claude ou du curseur.

FAQ

Quels formats de couleurs l'API accepte-t-elle et renvoie-t-elle ?
Envoyez une couleur au format HEX, RVB ou HSL et la réponse renvoie les trois représentations à la fois. Les chaînes hexadécimales fonctionnent avec ou sans le préfixe # initial. Un appel vous donne la chaîne hexadécimale, un objet {r, g, b} et un objet {h, s, l}, vous n'écrivez donc jamais de calcul de conversion à la main.
Pourquoi convertir les couleurs via une API plutôt que dans le navigateur ?
Pour des calculs ponctuels sur l'interface utilisateur, effectuez-le dans le navigateur. L'API gagne sa place dans les étapes de construction et les backends : génération de jetons de conception au moment de la construction, normalisation des couleurs collées dans un CMS ou production d'actifs thématiques côté serveur là où vous ne souhaitez pas expédier une bibliothèque de couleurs. Il s'agit d'un appel HTTP unique depuis n'importe quelle langue, y compris celles sans bon package de couleurs.
Puis-je générer une palette complète, pas seulement convertir une couleur ?
Oui. Le point final couleur/palette prend une couleur de base et renvoie un ensemble coordonné de nuances et de couleurs complémentaires. Utilisez color/convert lorsque vous avez une couleur connue et avez besoin de ses autres représentations, et color/palette lorsque vous avez une couleur de marque et avez besoin d'une échelle pour construire un thème autour d'elle.
Comment les valeurs HSL aident-elles à créer des thèmes ?
HSL sépare la teinte de la saturation et de la luminosité, de sorte que vous pouvez créer une échelle de teinte et de nuance en maintenant la teinte et la saturation stables et en augmentant la luminosité. C'est beaucoup plus facile à raisonner que de pousser trois canaux RVB. Convertissez une fois l'hexagone de votre marque en HSL, puis générez l'échelle de 50 à 900 en parcourant la valeur de légèreté.
L'utilisation de l'API de couleur est-elle gratuite ?
Oui. La conversion des couleurs se situe derrière le même niveau gratuit que le reste de Botoi : 5 requêtes par minute sans clé API requise et des limites plus élevées sur les forfaits payants. Il s’agit de l’un des quelque 200 points de terminaison à usage unique sous une seule clé.

Commencez a construire avec botoi

150+ endpoints API pour la recherche, le traitement de texte, la generation d'images et les utilitaires pour developpeurs. Offre gratuite, sans carte bancaire.