Comment utiliser : Sélecteur de couleur
- Faites glisser dans le carré de couleur et déplacez le curseur de teinte, saisissez une valeur HEX, ou utilisez la pipette pour prélever une couleur sur votre écran.
- Cliquez sur une ligne pour copier la couleur au format HEX, RGB, HSL ou OKLCH.
- Utilisez les nuances et les harmonies pour composer une palette, puis vérifiez le contraste du texte.
- Pour placer le sélecteur sur votre site, réglez ses options sous Intégrer ce sélecteur et copiez le code.
Quel format de couleur dois-je utiliser ?
- HEX est la forme abrégée utilisée dans le CSS et les outils de design.
- RGB donne les canaux rouge, vert et bleu, pratiques lorsqu’un outil demande des valeurs numériques.
- HSL est plus simple à ajuster à la main : modifiez la luminosité pour obtenir une teinte claire ou foncée.
- OKLCH est perceptuellement uniforme, si bien que des paliers de luminosité égaux paraissent identiques. Tous les grands navigateurs actuels le prennent en charge.
Intégrer le sélecteur
Le code d’intégration est un élément personnalisé autonome, sans bibliothèque et sans requête externe. Collez-le dans n’importe quelle page, écoutez l’événement input et lisez event.detail.value. Ses styles sont isolés dans un shadow root : ils ne peuvent pas entrer en conflit avec votre site. Dans Webflow, Copier vers Webflow le colle sous forme d’élément Embed.
Besoin de plus ? Convertissez des valeurs avec le Convertisseur de couleurs, mélangez deux couleurs avec le Mélangeur de couleurs, extrayez une palette d’une photo avec la Palette de couleurs d’image, ou vérifiez la lisibilité avec le Vérificateur de contraste.
Aussi recherché comme : sélecteur de couleur html, sélecteur de couleur hex, sélecteur de couleur rgb, sélecteur de couleur en ligne, pipette couleur écran, intégrer sélecteur de couleur, color picker javascript.
Outils complémentaires : Sélecteur de couleur
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
- Convertisseur HEX vers RGBA — Collez un code HEX, faites glisser le curseur d'opacité et copiez le CSS exact dont vous avez besoin : rgba() classique, rgb( / alpha) moderne ou HEX à 8 chiffres.
- Variables CSS vers Tailwind — Transformez vos variables de couleur :root en thème Tailwind en un seul collage : configuration Tailwind v3 tailwind.config.js ou @theme de la v4, avec des valeurs littérales ou des références var().
Questions fréquentes
Comment prélever une couleur sur mon écran ?
Appuyez sur le bouton pipette du sélecteur, puis cliquez n’importe où sur votre écran. Cela fonctionne sur ordinateur avec Chrome et Edge. Les autres navigateurs ouvrent leur propre boîte de dialogue de couleur, qui peut inclure un outil de prélèvement à l’écran.
Puis-je utiliser le sélecteur intégré sur un site commercial ?
Oui. Le code est gratuit pour les projets personnels et commerciaux, sans obligation de mention d’auteur.
Comment lire la couleur choisie depuis l’intégration ?
Ajoutez un écouteur d’événement input à l’élément et lisez event.detail.value, ou consultez à tout moment sa propriété value.
L’intégration charge-t-elle quoi que ce soit depuis devpack ?
Non. Tout se trouve dans l’extrait que vous collez, il continue donc de fonctionner même hors connexion.
Puis-je installer Sélecteur de couleur en tant qu’application web et l’utiliser hors ligne ?
Oui. Sélecteur de couleur est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.