Calculatrice HEX vers HSL

• Conversion bidirectionnelle instantanée : la calculatrice met à jour tous les équivalents de format à chaque frappe - sans bouton à presser. Modifiez n'importe quelle saisie (HEX, RVB ou HSL) et toutes les autres valeurs se mettent à jour instantanément. Un sélecteur de couleur natif est également disponible pour la sélection visuelle.
• Tous les formats au même endroit : la calculatrice affiche HEX, HEX3 (abrégé), RVB, RVBA, HSL, HSLA et les valeurs individuelles des canaux H/S/L/V - tout ce dont un développeur a besoin en une seule vue. Copiez n'importe quelle valeur individuelle ou toutes les valeurs d'un coup.
• 100 % privé - aucun envoi : toute la conversion se fait localement dans votre navigateur. Vos valeurs de couleur ne quittent jamais votre appareil et ne sont jamais envoyées à un serveur - sûr pour les projets clients et les systèmes de design propriétaires.
• Gratuit et sans limite : convertissez un nombre illimité de couleurs sans inscription, sans abonnement et sans plafond d'utilisation. La calculatrice HEX vers HSL est totalement gratuite pour toujours, sans publicité qui bloque l'interface.

• Développement CSS : les développeurs frontend utilisent la calculatrice pour convertir des tokens de design de HEX en HSL pour les propriétés personnalisées CSS. HSL est préféré en CSS car il est facile d'ajuster la luminosité et la saturation par programme.
• Configuration de Tailwind CSS : les développeurs utilisent la calculatrice pour convertir les couleurs de marque de HEX en HSL pour la configuration de Tailwind CSS. Tailwind v3+ utilise des variables CSS basées sur HSL pour son système de couleurs.
• Passation de design : les développeurs utilisent la calculatrice pour convertir les valeurs HEX des maquettes Figma au format RVB ou HSL requis par leur framework CSS ou leur système de tokens de design.
• Accessibilité et contraste : les spécialistes de l'accessibilité utilisent la calculatrice pour comprendre la valeur de luminosité (L) d'une couleur, un facteur clé dans les calculs de ratio de contraste et l'adaptation au mode sombre.
• Ajustement de la palette de couleurs : les designers utilisent la calculatrice pour trouver les valeurs HSL des couleurs de marque existantes afin de créer des nuances et des ombres cohérentes en ajustant uniquement le canal de luminosité.
• Développement multiplateforme : les développeurs mobiles et multiplateformes utilisent la calculatrice pour convertir les couleurs HEX du web en valeurs RVB pour React Native, Flutter et d'autres frameworks qui utilisent des modèles de couleur RVB.

La calculatrice HEX vers HSL convertit les valeurs de couleur entre les trois formats de couleur CSS les plus courants - HEX, RVB et HSL - instantanément et de façon bidirectionnelle. Saisissez une couleur dans n'importe quel format et obtenez immédiatement toutes les valeurs équivalentes. L'outil affiche aussi les valeurs individuelles de chaque canal (H, S, L, R, V, B) et les valeurs HSV, ce qui en fait une référence complète des formats de couleur pour les développeurs et les designers.

1. Saisissez une couleur dans n'importe quel format : tapez une valeur HEX (par ex. #ff6b6b), une valeur RVB (par ex. 255, 107, 107) ou une valeur HSL (par ex. 0, 100%, 71%). Vous pouvez aussi utiliser l'échantillon du sélecteur de couleur natif. Tout le traitement s'exécute localement dans votre navigateur - vos valeurs de couleur ne quittent jamais votre appareil.
2. Tous les formats se mettent à jour instantanément : au fur et à mesure de la saisie, tous les autres champs de format se mettent à jour en temps réel. L'échantillon de couleur affiche un aperçu en direct de la couleur. Changez le mode de saisie actif pour modifier un autre format.
3. Copiez n'importe quelle valeur : cliquez sur le bouton Copier à côté de n'importe quelle ligne de sortie pour copier cette valeur précise, ou utilisez « Copier toutes les valeurs » pour copier HEX, RVB et HSL ensemble.

• HEX : le format le plus courant pour les couleurs web. Compact et universellement pris en charge. Utilisez HEX lorsque vous copiez des couleurs depuis des outils de design comme Figma ou lorsque vous spécifiez des couleurs dans des attributs HTML.
• RVB : spécifie les canaux rouge, vert et bleu (0-255). Utilisez le RVB avec les API canvas, React Native, Flutter ou toute plateforme nécessitant des valeurs numériques de canal.
• HSL : spécifie la teinte (0-360°), la saturation (0-100 %) et la luminosité (0-100 %). HSL est le format le plus intuitif pour les designers - ajuster uniquement la luminosité crée des nuances et des ombres cohérentes. Préféré pour les propriétés personnalisées CSS et les systèmes de tokens de design.
• HSV : similaire à HSL mais utilise la valeur/luminance au lieu de la luminosité. HSV est utilisé dans Photoshop, le sélecteur de couleur de Figma et la plupart des applications de design. La calculatrice HEX vers HSL affiche aussi les valeurs HSV pour la compatibilité entre outils.

HSL est de plus en plus préféré pour les systèmes de design CSS car il rend la manipulation des couleurs prévisible. Pour créer une version plus claire d'une couleur, il suffit d'augmenter la valeur L. Pour créer une version plus foncée, diminuez-la. Cela rend HSL idéal pour générer des échelles de nuances, des variantes de mode sombre et des états de survol par programme. Tailwind CSS v3+ utilise des variables CSS basées sur HSL exactement pour cette raison. Notre calculatrice HEX vers HSL facilite la conversion de toute couleur HEX existante en HSL pour votre système de tokens de design.