·4 min de lecture

Sélecteur de couleurs avec Hex et RGB pour Mac

Convertir à la main entre codes hex, valeurs RGB et notation HSL est source d'erreurs et inutile quand vous le faites plusieurs fois par jour.

Un designer vous envoie une couleur en hex : #1A73E8. Votre framework CSS veut du HSL. Votre base de code iOS a besoin de valeurs RGB entre 0 et 1. Votre projet Android utilise des entiers ARGB. Une couleur, quatre formats, et vous ouvrez un onglet de navigateur pour les convertir — encore une fois.

La conversion de couleurs est un calcul trivial (hex vers RGB n'est que de la base 16 vers du décimal), mais le faire de tête pour trois canaux tout en essayant de rester concentré sur la mise en page ou le style est une distraction dont vous n'avez pas besoin.

Ce que propose macOS

macOS possède un sélecteur de couleurs intégré, accessible depuis certaines applications via le panneau de couleurs système. Il affiche des curseurs RGB et un champ hex, mais il est conçu pour choisir des couleurs visuellement, pas pour les convertir entre formats de manière programmatique. Il n'y a aucun moyen simple de coller un code hex pour obtenir l'équivalent HSL, ou de saisir des entiers RGB pour copier le résultat en hex. Et il est enfoui à l'intérieur d'applications spécifiques plutôt que disponible dans tout le système.

Convertir des couleurs instantanément entre formats

Bellows inclut un convertisseur de couleurs parmi ses 41 outils de développement. Saisissez une couleur dans n'importe quel format pris en charge — hex, RGB, HSL — et voyez les valeurs équivalentes dans tous les autres formats. Copiez la représentation dont vous avez besoin en un clic.

Bellows color picker showing hex, RGB, and HSL conversion on macOS

De la conception au code

Figma exporte les couleurs en hex. Tailwind CSS utilise des valeurs de couleur personnalisées. SwiftUI veut Color(red:green:blue:) avec des valeurs décimales. Android XML utilise #AARRGGBB. Avoir tous les formats visibles en même temps élimine le calcul mental et les allers-retours vers des sites de conversion.

Vérifier le contraste et la lisibilité

Quand vous pouvez voir la couleur rendue à côté de ses valeurs numériques, vous pouvez rapidement vérifier si une couleur de texte sera lisible sur un arrière-plan. C'est plus rapide que de basculer vers un vérificateur de contraste séparé pour chaque paire de couleurs de votre feuille de style.

Accès depuis la barre de menus

Besoin d'une conversion rapide en écrivant du CSS ? Cliquez sur l'icône Bellows dans votre barre de menus, sélectionnez l'outil couleur, collez le code hex, et copiez la valeur RGB. L'ensemble de l'interaction prend moins de cinq secondes et vous ne quittez jamais votre éditeur.

Obtenez Bellows sur le Mac App Store

Article suivant

Bellows

41 developer tools in one native Mac app — JSON, JWT, Base64, hashes, and more.

Get Bellows on the Mac App Store