Le sélecteur de couleur de Morph vous permet de choisir n'importe quelle couleur visuellement et de lire instantanément son code dans les formats que vous utilisez vraiment : HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) et HSL (`hsl(214, 64%, 53%)`). Faites glisser dans le champ de couleur, ajustez avec le curseur de teinte, et copiez la valeur directement dans votre CSS, votre fichier de design, ou où que vous en ayez besoin.
Les trois codes décrivent la même couleur — ce sont juste des façons différentes de l'écrire, et chacune a son rôle :
Changez la couleur comme vous voulez et les trois codes restent synchronisés, pour que vous puissiez récupérer celui dont votre projet a besoin.
Les designers l'utilisent pour fixer une palette et copier des valeurs exactes dans un fichier de design ou une charte graphique. Les développeurs front-end s'en servent pour récupérer un HEX pour un bouton ou convertir le RGB d'un designer en HSL afin de construire un état au survol. Toute personne qui ajuste un thème, la couleur d'un graphique ou un modèle d'email peut trouver la teinte précise et la copier en un clic. Comme HSL est juste à côté de HEX, construire des variantes plus claires et plus sombres d'une couleur de base devient bien plus simple qu'à l'œil avec des chiffres hexadécimaux.
Le sélecteur de couleur est du code pur navigateur — les calculs de couleur et l'interface tournent tous les deux sur votre appareil. Pas d'envoi de fichier, pas de compte, rien n'est transmis à un serveur. Il se charge vite et continue de fonctionner hors ligne une fois la page ouverte, car choisir une couleur et calculer ses codes ne nécessite jamais de connexion réseau.
Quand vous copiez une valeur HEX, elle est prête à coller telle quelle dans votre CSS. Si vous avez besoin d'une couleur avec transparence, convertissez en RGB et ajoutez un canal alpha (`rgba(...)`) dans votre code. Pour construire une palette cohérente, choisissez une couleur de base et utilisez la valeur de luminosité HSL pour générer des tons et nuances en augmentant ou réduisant la luminosité tout en gardant la teinte et la saturation fixes — cela garde un ensemble de couleurs qui ressemble à une famille plutôt qu'à un assortiment au hasard.
Il affiche HEX, RGB et HSL pour chaque couleur choisie, tous synchronisés, pour que vous puissiez copier le format dont votre projet a besoin.
HSL permet d'ajuster une couleur de façon intuitive — augmenter la luminosité pour un ton plus clair, la baisser pour un ton plus sombre, ou déplacer la teinte — sans deviner des chiffres hexadécimaux.
Choisissez votre couleur, copiez les valeurs RGB, et ajoutez un canal alpha dans votre code sous la forme rgba(...) pour régler le niveau de transparence voulu.
Non. Le sélecteur fonctionne entièrement dans votre navigateur. Rien n'est envoyé, aucune donnée ne part vers un serveur — il fonctionne même hors ligne une fois chargé.
Choisissez une couleur de base et utilisez sa valeur HSL, puis ajustez la luminosité vers le haut ou le bas en gardant la teinte et la saturation fixes pour créer des tons et nuances qui forment un ensemble cohérent.
Ouvrir Sélecteur de couleur : codes HEX, RGB et HSL | Morph →