Sélecteur de couleur en ligne — HEX, RGB, HSL gratuit
Choisir la bonne couleur est au cœur de tout projet de design ou de développement web. Que vous cherchiez à reproduire une couleur de marque, à construire une palette accessible ou à convertir un code HEX Figma en variables CSS HSL, le Sélecteur de Couleur de WikiPlus vous donne tous les formats en un clic. HEX, RGB, HSL, HSB, CMYK et même la couleur nommée CSS la plus proche — tout est disponible en temps réel, entièrement dans votre navigateur.
Formats de couleurs et quand les utiliser
Chaque format de couleur a son domaine d'application optimal. Les codes HEX comme `#0011ff` sont le meilleur choix par défaut pour les couleurs statiques définies une fois dans un système de design — compacts, universellement compris, copiables directement dans Figma et les fichiers de configuration Tailwind. Le format `rgb()` ou `rgba()` est préférable quand vous avez besoin d'un canal alpha pour des superpositions semi-transparentes, ou quand vous construisez une valeur de couleur dynamiquement en JavaScript avec des variables. Le format `hsl()` ou `hsla()` est idéal pour ajuster programmatiquement la luminosité ou la saturation — les canaux L et S correspondent directement à l'intuition humaine sur comment rendre une couleur plus claire ou plus vive. Le format `oklch()` est recommandé dans les systèmes de design modernes ciblant les affichages à large gamme comme P3 ou Rec2020.
Échantillonner des couleurs depuis une image
Importez une image dans le sélecteur de couleur via le bouton d'upload ou en faisant glisser le fichier sur l'outil. Une fois l'image rendue dans le panneau de prévisualisation, cliquez sur n'importe quel pixel pour échantillonner sa couleur. L'outil lit le pixel via l'API HTML5 Canvas `getImageData`, qui retourne les valeurs exactes des octets rouge, vert et bleu. Pour les logos sauvegardés en JPEG, échantillonnez plusieurs pixels voisins depuis une zone de couleur plate, car la compression DCT du JPEG introduit des artefacts chromatiques aux bords. Les fichiers PNG et WebP n'ont pas ce problème. Toutes les données d'image restent sur votre appareil — le calcul canvas s'exécute localement et le fichier n'est jamais uploadé vers les serveurs WikiPlus.
Vérifier le contraste pour l'accessibilité
Les directives WCAG 2.1 définissent trois seuils de contraste. Pour le texte normal — tout texte sous 18 pt régulier ou 14 pt gras — le minimum de niveau AA est de 4,5:1 entre les couleurs de premier plan et d'arrière-plan. Pour le grand texte à ces tailles ou au-dessus, le minimum descend à 3:1. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Le sélecteur de couleur WikiPlus affiche le ratio de contraste calculé contre le blanc pur et le noir pur en temps réel pendant que vous ajustez les curseurs de teinte, saturation ou luminosité. Un problème courant : les couleurs de marque saturées comme le bleu ou l'orange semblent visuellement accessibles mais mesurent seulement 2,8:1 ou 3,2:1 contre le blanc. La solution est d'assombrir la couleur de texte de 15 à 25 points de luminosité dans l'espace HSL ou oklch.
Fonctionnement hors ligne
Chaque calcul effectué par le sélecteur de couleur — conversion RGB-vers-HSL, HSL-vers-oklch, approximation CMYK, encodage hexadécimal, calcul du ratio de contraste, échantillonnage des pixels depuis des images importées — s'exécute en JavaScript sur votre appareil. Aucune de ces opérations ne nécessite un appel réseau. Une fois la page chargée, passez votre appareil en mode avion et l'outil continue de fonctionner sans dégradation. Pour les designers travaillant avec des maquettes de produits non encore publiées, des matériaux marketing confidentiels ou des identités visuelles couvertes par un NDA, aucune donnée n'est jamais transmise à l'infrastructure WikiPlus. Les données d'image sont conservées dans la mémoire canvas du navigateur pendant la durée de votre session et libérées quand vous fermez l'onglet.
Questions fréquemment posées
- Quel format de couleur dois-je utiliser en CSS ?
- Pour les couleurs statiques de marque : HEX. Pour les superpositions semi-transparentes : rgba(). Pour les ajustements programmatiques de luminosité/saturation : hsl(). Pour les systèmes de design modernes avec des affichages à large gamme : oklch(). Le sélecteur exporte les cinq formats simultanément, copiez celui qui correspond à votre stack.
- Comment trouver la couleur exacte d'une image ou capture d'écran ?
- Importez l'image dans le sélecteur en la glissant ou via le bouton upload. Cliquez sur n'importe quel pixel pour échantillonner sa couleur via l'API Canvas HTML5. Pour les images JPEG, échantillonnez depuis une zone plate pour éviter les artefacts de compression. Toutes les données restent locales — rien n'est uploadé.
- Le sélecteur fonctionne-t-il hors ligne après le chargement de la page ?
- Oui, complètement. Toutes les conversions et l'échantillonnage d'images depuis des fichiers importés s'exécutent localement en JavaScript. Une fois la page chargée, vous pouvez passer en mode avion et l'outil continue de fonctionner sans aucune dégradation.