Outil de sélection de couleurs v2.0

À propos Outil de sélection de couleurs

Un sélecteur de couleurs est un outil en ligne qui vous permet de choisir une teinte précise et d'en récupérer le code exact dans tous les formats utiles au web et à l'impression. Le sélecteur de couleurs de ToolsPivot va plus loin qu'une simple pipette : il convertit une seule couleur en dix formats copiables, génère des harmonies, calcule le contraste selon les normes d'accessibilité et extrait des teintes depuis une image. Fini les allers-retours entre cinq sites différents pour un seul projet de design.

Présentation de l'outil Sélecteur de couleurs ToolsPivot

Fonctionnalité principale

Le sélecteur de couleurs convertit instantanément une teinte choisie en dix formats : HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMJN, OKLCH et le nom CSS le plus proche. Vous définissez la couleur en glissant sur le carré saturation/valeur, en tapant un code ou en prélevant un pixel à l'écran. ToolsPivot conserve la valeur interne en haute précision, ce qui évite la dérive classique des curseurs lors des conversions répétées.

Utilisateurs cibles et cas d'utilisation

Les développeurs front-end, les graphistes, les intégrateurs web et les auto-entrepreneurs qui construisent leur propre identité visuelle sont les premiers concernés. L'outil sert autant à récupérer une couleur de marque pour du CSS qu'à composer une palette cohérente pour un logo, une newsletter ou une interface d'application.

Problème et solution

La plupart des sélecteurs gratuits s'arrêtent à trois formats et ignorent l'accessibilité, obligeant à jongler entre plusieurs outils. Notre sélecteur regroupe conversion, harmonies, contraste et extraction d'image sur une seule page. Pour transformer un code RGB en hexadécimal hors de l'outil, vous pouvez aussi utiliser le convertisseur RGB vers hexadécimal dédié.

Principaux avantages du sélecteur de couleurs

• Dix formats en un clic : HEX, RGB, HSL, HSV, CMJN et OKLCH sont affichés simultanément, chacun avec son bouton de copie, là où la majorité des outils gratuits se limitent au trio HEX/RGB/HSL.
• Aucune dérive de valeur : la couleur est stockée en interne au format HSV flottant, si bien que déplacer un curseur ne modifie jamais la teinte de départ par arrondi successif.
• Accessibilité intégrée : le vérificateur de contraste indique directement si une paire de couleurs respecte les seuils AA et AAA, sans ouvrir un second outil. Pour alléger vos visuels avant publication, associez-le au compresseur d'images.
• Confidentialité totale : tout le traitement se déroule dans votre navigateur. Aucune image n'est téléversée, aucun compte n'est requis et aucune donnée ne quitte votre appareil.
• Couleurs sauvegardées : les teintes que vous conservez restent disponibles d'une visite à l'autre, une fonction souvent réservée aux versions payantes ailleurs.
• Prêt pour le CSS moderne : le format OKLCH, désormais pris en charge par les navigateurs récents, permet des dégradés perceptuellement réguliers. Le code copié s'intègre directement dans vos feuilles de style, que vous pouvez ensuite compresser avec le minificateur CSS.
• Gratuit et sans limite : aucune restriction sur le nombre de couleurs, de palettes ou de conversions, sur ordinateur comme sur mobile.

Fonctionnalités clés du sélecteur de couleurs

• Carré saturation/valeur : un plan interactif combiné à un curseur de teinte et un curseur d'opacité pour cibler une nuance au pixel près, à la souris comme au toucher.
• Pipette d'écran : l'API native EyeDropper prélève n'importe quelle couleur affichée à l'écran, y compris hors du navigateur, quand votre appareil la prend en charge.
• Dix formats copiables : chaque code dispose de son propre bouton, ce qui supprime toute saisie manuelle et les erreurs de recopie associées.
• Générateur d'harmonies : six schémas issus de la roue chromatique (complémentaire, analogue, triadique, tétradique, complémentaire divisée et monochromatique) sont calculés à partir de votre teinte de base.
• Nuances, tons et teintes : trois bandes de variations éclaircissent, assombrissent ou grisent la couleur pour bâtir une échelle complète en un regard.
• Vérificateur de contraste WCAG : saisissez deux couleurs et l'outil affiche le rapport de contraste ainsi que les verdicts AA, AA grand texte et AAA.
• Prélèvement depuis une image : importez un visuel, cliquez sur n'importe quel pixel et récupérez automatiquement une palette de couleurs dominantes. Redimensionnez d'abord vos fichiers avec le redimensionneur d'images si nécessaire.
• Constructeur de dégradés CSS : ajoutez une seconde couleur, réglez l'angle et le type (linéaire ou radial), puis copiez le CSS prêt à l'emploi.
• Aperçu de lisibilité : des échantillons de texte noir et blanc s'affichent sur votre couleur pour juger immédiatement de la lisibilité.
• Couleurs enregistrées : vos teintes favorites persistent localement pour être réutilisées lors des sessions suivantes.
• Correspondance CSS nommée : l'outil rapproche votre teinte du plus proche des 148 noms de couleurs CSS, pratique pour un prototype rapide ou un générateur de favicon et autres visuels de marque.
• Export visuel : capturez le rendu de vos palettes à l'aide du générateur de captures d'écran pour les partager avec votre équipe ou votre client.

Comment fonctionne le sélecteur de couleurs ToolsPivot

1. Choisissez une couleur : glissez sur le carré saturation/valeur, ajustez la teinte et l'opacité, ou tapez un code HEX ou un nom de couleur CSS.
2. Prélevez si besoin : utilisez la pipette d'écran ou importez une image pour cliquer sur le pixel exact qui vous intéresse.
3. Copiez le bon format : les dix codes se mettent à jour en temps réel ; cliquez sur celui dont vous avez besoin pour l'envoyer dans le presse-papiers.
4. Dérivez et vérifiez : générez une harmonie, construisez un dégradé ou contrôlez le contraste, le tout depuis la même page.
5. Réutilisez plus tard : enregistrez vos teintes ; elles resteront disponibles, comme les métadonnées lues par la visionneuse de données EXIF lorsque vous analysez une photo source.

Quand utiliser le sélecteur de couleurs

Le sélecteur de couleurs est le plus utile chaque fois que vous devez fixer une teinte exacte et l'exporter dans un format précis. Il remplace l'estimation à l'œil par une valeur chiffrée, reproductible d'un support à l'autre. Voici les situations les plus fréquentes.

• Définir une charte graphique : figez les couleurs primaires et secondaires d'une marque pour garantir leur cohérence sur tous les supports.
• Intégrer du CSS : récupérez un code HEX ou OKLCH à coller dans une feuille de style, que vous testez ensuite dans l'éditeur HTML en ligne.
• Reproduire une couleur repérée : prélevez la teinte exacte d'un logo ou d'une photo au lieu de la deviner.
• Vérifier l'accessibilité : contrôlez qu'un texte reste lisible sur son fond avant la mise en ligne, un point désormais réglementaire pour beaucoup de sites.
• Composer une palette : partez d'une couleur et laissez la roue chromatique proposer des accords équilibrés.
• Préparer un visuel print : obtenez une approximation CMJN pour anticiper le rendu à l'impression.
• Auditer un design existant : extrayez les couleurs dominantes d'une capture pour documenter une interface, en complément d'une analyse SEO du site.

Dans les cas limites, comme la reproduction fidèle d'une couleur Pantone ou une correspondance print exacte, gardez à l'esprit que l'écran affiche du sRGB additif : la valeur CMJN reste une approximation utile, jamais une garantie d'impression.

Cas d'utilisation et applications

Identité visuelle d'un auto-entrepreneur

Contexte : un auto-entrepreneur crée son logo et sa page de vente sans budget pour un studio de design.

Processus :

• Il choisit une couleur de marque et génère une harmonie complémentaire.
• Il vérifie le contraste du texte sur les boutons d'appel à l'action.
• Il exporte les codes HEX pour son site et ses réseaux sociaux.

Résultat : une palette cohérente et lisible, documentée en quelques minutes et réutilisable sur Vinted, Leboncoin ou une boutique en ligne.

Intégration web pour une PME

Contexte : une PME refond son site et doit aligner les couleurs de son interface sur sa charte.

Processus :

• L'intégrateur prélève les teintes de la charte existante avec la pipette.
• Il génère des variations claires et foncées pour les états de survol.
• Il copie le CSS des dégradés directement dans la feuille de style.

Résultat : une interface homogène, validée pour le contraste, livrée plus vite qu'avec une saisie manuelle des codes.

Extraction de palette depuis une photo

Contexte : un créateur de contenu veut assortir sa mise en page aux couleurs d'une photographie.

Processus :

• Il importe la photo et clique sur les zones dont il veut la couleur.
• L'outil propose automatiquement une palette de teintes dominantes.
• Il ajuste ensuite le cadrage avec l'option pour rogner une image avant publication.

Résultat : une charte visuelle tirée d'une seule image, prête pour un article de blog ou une publication sociale.

Préparation de supports imprimés

Contexte : une graphiste prépare une affiche destinée à un imprimeur local.

Processus :

• Elle sélectionne les couleurs et note leurs valeurs CMJN approximatives.
• Elle contrôle la lisibilité des titres sur les fonds colorés.
• Elle applique éventuellement un rendu artistique via l'outil pour faire pivoter une image ou retravailler un visuel.

Résultat : un fichier prêt à transmettre, avec des couleurs anticipées pour l'impression et des textes lisibles.

Comprendre les dix formats de couleur

Chaque format de couleur répond à un usage précis, du web à l'impression. Choisir le bon évite les conversions inutiles et les mauvaises surprises au rendu. Voici les repères essentiels pour vous y retrouver.

• HEX et HEX8 : notation hexadécimale à six ou huit caractères, standard du CSS et du HTML, la variante à huit intégrant l'opacité.
• RGB et RGBA : trois canaux de 0 à 255 pour les écrans, avec un quatrième canal pour la transparence.
• HSL et HSV : modèles intuitifs fondés sur la teinte, la saturation et la luminosité ou la valeur, parfaits pour ajuster une couleur à la main.
• CMJN : approximation destinée à l'impression, calculée depuis le sRGB, à considérer comme un point de départ.
• OKLCH : espace perceptuellement uniforme du CSS moderne, idéal pour des dégradés et des échelles régulières.

Pour convertir manuellement une valeur hexadécimale ou manipuler des codes en base 16, le calculateur hexadécimal complète bien le sélecteur.

Contraste, accessibilité et conformité RGAA

Le vérificateur de contraste mesure le rapport de luminance entre un texte et son fond, exprimé de 1 :1 à 21 :1, pour déterminer si une combinaison est lisible. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité), fondé sur les WCAG 2.1 et la norme européenne EN 301 549, exige un rapport d'au moins 4,5 :1 pour le texte courant et 3 :1 pour le grand texte au niveau AA. Le niveau AAA relève la barre à 7 :1.

Depuis le 28 juin 2025, l'European Accessibility Act étend cette obligation d'accessibilité à de nombreuses entreprises privées : celles de plus de 10 salariés ou dépassant 2 millions d'euros de chiffre d'affaires, notamment dans le commerce en ligne, la banque ou les télécoms. Les manquements peuvent être sanctionnés jusqu'à 50 000 € par service non conforme. Le critère RGAA 3.2 encadre le contraste texte/fond, tandis que le critère 3.3 vise les composants d'interface, avec un seuil de 3 :1.

Points essentiels :

• Seuil AA : 4,5 :1 pour le texte normal, 3 :1 pour le grand texte et les composants.
• Seuil AAA : 7 :1 pour le texte normal, plus exigeant mais recommandé.
• Limite honnête : un bon contraste ne rend pas un site entièrement conforme, il en couvre seulement la thématique couleur.

Un contraste maîtrisé profite à tous les lecteurs, y compris en plein soleil sur mobile. Une fois vos couleurs validées, contrôlez le rendu global avec le test d'affichage mobile.

Questions fréquentes

Qu'est-ce qu'un sélecteur de couleurs ?

Un sélecteur de couleurs est un outil qui permet de choisir une teinte et d'obtenir son code exact dans plusieurs formats. Il sert à récupérer une couleur précise pour un site web, un design ou une impression, sans la deviner à l'œil.

Le sélecteur de couleurs de ToolsPivot est-il gratuit ?

Oui, l'outil est entièrement gratuit et sans inscription. Vous pouvez convertir, générer des palettes et vérifier le contraste sans aucune limite, sur ordinateur comme sur mobile.

Quels formats de couleur sont pris en charge ?

L'outil affiche dix formats : HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMJN, OKLCH et le nom CSS le plus proche. Chaque code se copie en un clic vers votre presse-papiers.

Mes images sont-elles envoyées sur un serveur ?

Non, tout le traitement s'effectue localement dans votre navigateur. Aucune image n'est téléversée et aucune donnée personnelle n'est collectée, ce qui respecte les principes du RGPD.

Comment prélever une couleur à l'écran ?

Utilisez la pipette d'écran, qui s'appuie sur l'API native EyeDropper de votre navigateur. Elle capture n'importe quelle couleur affichée, y compris en dehors de la page, lorsque votre appareil la prend en charge.

Qu'est-ce que le format OKLCH ?

OKLCH est un espace colorimétrique perceptuellement uniforme intégré au CSS moderne. Il produit des dégradés et des échelles de couleurs plus réguliers que le HSL, ce qui est précieux pour la visualisation de données.

Comment vérifier le contraste de mes couleurs ?

Saisissez la couleur du texte et celle du fond dans le vérificateur de contraste. L'outil calcule le rapport et indique s'il atteint les niveaux AA et AAA des normes WCAG et du RGAA.

Quelle est la différence entre HSL et HSV ?

Les deux décrivent la teinte et la saturation, mais diffèrent sur le troisième canal. Le HSL utilise la luminosité tandis que le HSV utilise la valeur, ce qui change la façon dont le blanc et le noir sont atteints.

Les couleurs CMJN correspondront-elles à mon impression ?

Pas exactement, car l'écran affiche du sRGB additif alors que l'impression est du CMJN soustractif. La valeur fournie est une approximation utile qu'il faut valider avec une épreuve imprimée.

Puis-je générer une palette harmonieuse automatiquement ?

Oui, choisissez une couleur de base et l'outil calcule six harmonies issues de la roue chromatique. Vous obtenez des accords complémentaires, analogues, triadiques et davantage en un clic.

Mes couleurs enregistrées sont-elles conservées ?

Oui, les teintes que vous sauvegardez restent stockées localement dans votre navigateur. Elles réapparaissent lors de vos prochaines visites, sans compte ni synchronisation.

Le sélecteur fonctionne-t-il sur mobile ?

Oui, l'interface est tactile et fonctionne dans tout navigateur moderne sur téléphone ou tablette. Vous pouvez aussi générer un générateur de QR code pour partager rapidement une palette ou un lien coloré.

Related Tools You Might Like

Rotation d'image en ligne Image vers Base64 Générateur d'images fictives Convertisseur RGB vers Hex Visionneuse de données EXIF Base64 vers image