Aller au contenu
TextArray
Tout en local

Convertisseur de couleurs

Convertissez les couleurs entre HEX, RVB et HSL, avec alpha et une palette de teintes.

Entrée
4
Sortie
Outils connexes
Hex au texte et retourEncodage et conversion
Générateur de hachageOutils de développement
Générateur de slugsOutils de développement
Générateur de codes QROutils de développement
Analyseur d'expressions CronOutils de développement
Formateur CSSnouveauOutils de développement
Convertisseur de couleurs
Collez une couleur dans n'importe quelle notation que CSS comprend (#3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%)) et les deux autres apparaissent instantanément. Le hex court comme #f00 est étendu, le hash au début est facultatif, et les deux la syntaxe ancienne à virgule et la syntaxe plus récente à espaces sont lues. Mettez une couleur par ligne et toute une palette se convertit à la fois, exactement ce que vous voulez quand un transfert de conception arrive sous forme de colonne de codes hexadécimaux et votre feuille de style est écrite en HSL.
Alpha traverse la conversion, quel que soit le mode d'écriture : rgba(59, 130, 246, 0.5), rgb(59 130 246 / 50%) et le hex 8 chiffres #3b82f680 décrivent tous le même bleu semi-transparent, et chacun se convertit aux autres. Désactivez "Conserver le canal alpha" quand vous voulez seulement la couleur opaque. Le menu de format de sortie rétrécit le résultat à hex, RGB ou HSL seul, pratique pour les longues listes, et le menu de syntaxe décide entre rgb(255, 0, 0) et rgb(255 0 0 / 0.5).
Avec la palette de teintes activée, chaque couleur obtient un tableau de variantes plus claires et plus sombres, mélangées uniformément vers le blanc et le noir. C'est un moyen rapide de dériver les états de survol, les bordures et les éléments désactivés à partir d'une seule couleur de marque sans ouvrir un outil de conception.
Tout s'exécute dans votre navigateur—pas d'upload, pas de serveur, pas de compte. Les couleurs de marque inédites restent sur votre machine.
FAQ
Quelles notations de couleurs lit-il ?
Hex à 3, 4, 6 et 8 chiffres, avec ou sans hachage initial ; rgb() et rgba(); hsl() et hsla(). La syntaxe des virgules et des espaces fonctionne toutes deux, et la teinte accepte deg, rad, grad et turn. Les couleurs nommées comme rebeccapurple ne sont pas prises en charge.
Comment le canal alpha est-il géré ?
Alpha est lu à partir du quatrième argument, à partir de la forme barre oblique et à partir d'un hexadécimal à 8 chiffres, puis réimprimé dans la notation que vous avez choisie. Désactivez « Conserver le canal alpha » pour obtenir la couleur opaque à la place.
Pourquoi une couleur change-t-elle d'un chiffre lorsque je la reconvertis ?
HSL est imprimé en degrés entiers et en pourcentages entiers, donc la lecture à nouveau de cette valeur arrondie peut atterrir sur la couleur 8 bits voisine : hsl(217, 91%, 60%) revient sous la forme #3c83f6, et non #3b82f6. Les navigateurs tournent de la même manière. Gardez hex comme source de vérité lorsque l'octet exact compte.
A quoi sert la palette de teintes ?
Il mélange la couleur vers le blanc et vers le noir par étapes de luminosité uniformes et répertorie chaque variante afin que vous puissiez créer des nuances de survol, de bordure et désactivées à partir d'une couleur de base. Choisissez une à huit marches par côté.
Mon texte est-il téléchargé quelque part ?
Non. La conversion s'exécute entièrement dans votre navigateur et rien de ce que vous collez ne quitte votre appareil.
Pour aller plus loin