Sélecteur et convertisseur de couleur
Choisissez une couleur et convertissez-la entre HEX, RGB, HSL et OKLCH.
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
Un convertisseur et sélecteur de couleur gratuit qui fonctionne entièrement dans votre navigateur
Ce convertisseur de couleur gratuit transforme n'importe quelle couleur en tous les formats dont vous avez besoin, instantanément. Collez un code hex, saisissez une valeur RGB, faites glisser la roue chromatique ou prélevez un pixel avec la pipette — et voyez le résultat en HEX, RGB, HSL, HSV, CMYK et OKLCH simultanément. Chaque champ est modifiable et bidirectionnel : modifiez un format et tous les autres se mettent à jour en direct sans rechargement de page, sans requête serveur et sans délai.
Des sites comme ColorHexa.com, RapidTables, convertingcolors.com et cssgradient.io couvrent chacun des aspects de cette problématique : ColorHexa affiche des décompositions détaillées par URL, RapidTables propose des convertisseurs à format unique sur des pages séparées, convertingcolors prend en charge des espaces colorimétriques de niche comme CIELab et XYZ, et cssgradient est conçu spécifiquement pour la génération de dégradés CSS. Cet outil réunit les cas d'usage du quotidien — conversion de formats, sélection visuelle, vérification d'accessibilité et génération de palettes — dans une interface en direct où vous entrez une couleur une seule fois et voyez tout en même temps. Rien n'est téléchargé ; tout le traitement est local.
Convertissez HEX, RGB, HSL, HSV, CMYK et OKLCH — dans les deux sens, instantanément
Chaque champ est modifiable et reste synchronisé. Collez un code hex et les valeurs RGB, HSL, HSV, CMYK et OKLCH se mettent à jour sur-le-champ. Modifiez l'un et les autres suivent immédiatement. Cela en fait simultanément un rapide convertisseur hex vers RGB, un outil RGB vers hex, un convertisseur RGB vers CMYK et un convertisseur HSL/HSV/OKLCH dans une seule vue — idéal quand un fichier de design vous fournit un format mais que votre feuille de style, travail d'impression ou système de design en nécessite un autre.
Toutes les sorties sont des valeurs HTML et CSS valides — #hex, rgb(…), hsl(…), hsv(…), cmyk(…) et oklch(…) — chacune avec un bouton de copie en un clic. L'outil identifie également la couleur CSS nommée la plus proche, pour que vous puissiez décrire une teinte instantanément ou vérifier si un hex personnalisé correspond à un mot-clé standard. Contrairement aux pages de conversion unique de RapidTables, vous n'avez jamais besoin de naviguer entre des outils séparés pour différentes paires de formats.
Sélectionnez une couleur à partir d'une image — ou directement depuis votre écran
Besoin de la couleur exacte d'une photo, d'un logo, d'une capture d'écran ou d'une maquette ? Utilisez le sélecteur de couleur d'image : téléchargez un fichier, glissez-déposez-le, ou collez-le depuis votre presse-papiers (Ctrl+V / Cmd+V), puis déplacez-vous sur l'image et cliquez pour capturer n'importe quel pixel. Une loupe intégrée fait un zoom pour une sélection au pixel près, et chaque couleur que vous cliquez est conservée dans une bande 'sélectionnées depuis l'image' pour que vous puissiez construire une palette à partir d'une seule image sans perdre les sélections précédentes. L'image est traitée localement à l'aide d'un canvas HTML et ne quitte jamais votre appareil — cela fonctionne dans tous les navigateurs y compris Firefox et Safari.
Vous préférez capturer une couleur ailleurs sur votre écran ? La pipette prélève n'importe quel pixel de votre écran dans Chrome 95+ et Edge 95+ via l'API EyeDropper native — cliquez dessus, pointez vers n'importe quel pixel à l'écran et cette couleur se charge dans tous les champs instantanément. Une bande de couleurs récentes et la roue chromatique interactive complètent les options de sélection, sans rien à installer. Cette capacité de sélection va bien au-delà de ce que proposent ColorHexa, RapidTables ou convertingcolors.
Schémas de couleurs, harmonies, teintes et ombres
Transformez une couleur en une palette entière. L'outil génère six schémas de couleurs basés sur les harmonies de la roue chromatique : complémentaire, analogue, triadique, tétradique, split-complémentaire et monochromatique. Cliquez sur n'importe quel échantillon pour en faire la nouvelle couleur de base et continuez à explorer, de sorte que l'outil fonctionne comme un rapide générateur de palettes de couleurs pour créer des combinaisons cohérentes et fidèles à la marque.
L'échelle de teintes et ombres produit une gamme d'étapes plus claires et plus sombres à partir de votre couleur de base — utile pour les états hover, les états actifs, les états désactivés, les bordures et les fonds. Cliquer sur n'importe quelle étape en fait la couleur active et affiche sa décomposition complète de formats. La génération de palette et l'échelle de teintes/ombres se mettent toutes les deux à jour instantanément à chaque changement de couleur sans requête serveur — contrairement aux outils de design dans le cloud comme Adobe Color ou Coolors, qui nécessitent un aller-retour réseau pour générer des résultats.
Vérification du contraste WCAG et simulation du daltonisme
L'accessibilité est intégrée à chaque choix de couleur. Le vérificateur de contraste WCAG calcule le ratio de contraste basé sur la luminance de votre couleur par rapport au blanc et au noir, puis affiche des badges réussite/échec AA et AAA pour le texte normal, le texte grand et les composants UI — les trois niveaux WCAG 2.1 qui déterminent si une paire couleur de premier plan/fond satisfait les normes d'accessibilité. Il se met à jour en direct lorsque vous ajustez la couleur, pour que vous puissiez itérer vers la conformité sans changer d'outil.
Le simulateur de daltonisme prévisualise votre couleur telle qu'elle est vue par les personnes atteintes de protanopie, deutéranopie, tritanopie et achromatopsie — calculé à l'aide de l'algorithme de simulation standard de Brettel/Viénot et mis à jour en direct. Ensemble, la vérification du contraste et la simulation du daltonisme aident à s'assurer que vos choix de design restent significatifs et distinguables pour chaque spectateur. Ces fonctionnalités rendent cet outil plus complet que ColorHexa, RapidTables ou convertingcolors pour les décisions de couleur axées sur l'accessibilité.
Comprendre OKLCH — l'avenir de la couleur en CSS
OKLCH est un espace colorimétrique perceptuellement uniforme qui est arrivé dans le CSS grand public via la spécification CSS Color Level 4. Il représente les couleurs sous la forme Luminosité (L), Chroma (C) et Teinte (H), où la Luminosité est calibrée pour la perception humaine plutôt que pour l'énergie lumineuse linéaire. Cela signifie que deux couleurs ayant la même valeur L paraîtront également claires à l'œil humain quelle que soit leur teinte — ce qui n'est pas vrai en HSL ou RGB. Pour les designers qui construisent des palettes systématiques, cela signifie que vous pouvez définir une valeur L unique pour 'fond primaire', l'appliquer à chaque teinte de votre palette et obtenir des résultats visuellement équilibrés sans ajustement manuel.
OKLCH décrit également une gamme plus large que sRGB — il peut représenter des couleurs Display P3 et Rec.2020 qui dépassent le triangle sRGB utilisé par la plupart des valeurs hex, RGB et HSL. Les navigateurs modernes (Chrome, Safari, Firefox) prennent désormais en charge la fonction CSS oklch() nativement, faisant d'OKLCH le format tourné vers l'avenir pour le travail de couleur en CSS. Cet outil affiche un avertissement de gamme lorsque la valeur OKLCH saisie tombe en dehors de la plage sRGB et serait rognée par les navigateurs plus anciens, vous donnant une alerte précoce avant la mise en production.
Une alternative gratuite au sélecteur de couleur Google, Adobe Color et les outils en ligne
La plupart des sélecteurs de couleur sont enfouis dans quelque chose de plus grand. Le sélecteur de couleur Google n'apparaît que dans les résultats de recherche pour des requêtes spécifiques et ne peut pas être mis en favori ni utilisé de façon autonome. Le sélecteur de couleur Adobe vit dans Photoshop, Illustrator ou Adobe Color (color.adobe.com), qui nécessite un compte Adobe et synchronise les données avec les serveurs d'Adobe. ColorHexa et RapidTables sont des sites de référence plutôt que des outils interactifs. convertingcolors.com couvre des espaces colorimétriques de niche mais manque de fonctionnalités de sélection et de palette. cssgradient.io est excellent pour la génération de dégradés mais pas pour la gestion individuelle des couleurs.
Il s'agit d'un sélecteur et convertisseur de couleur gratuit et autonome qui s'ouvre en un clic, fonctionne sur n'importe quel appareil, ne vous demande jamais de vous connecter et s'exécute entièrement dans votre navigateur. Que vous soyez un développeur cherchant à correspondre à un hex de marque, un designer affinant une palette HSL, un professionnel de l'impression vérifiant des approximations CMYK ou un ingénieur en accessibilité vérifiant les ratios de contraste WCAG — cet outil fait tout le travail en une page rapide et privée. Le support OKLCH, la vérification d'accessibilité et la génération de palettes sont inclus par défaut, des fonctionnalités que la plupart des alternatives font payer ou n'offrent tout simplement pas.
Frequently asked questions
Ce convertisseur de couleur est-il gratuit ?
Oui — entièrement gratuit sans inscription, sans compte et sans limites d'utilisation. Il fonctionne entièrement dans votre navigateur, de sorte que les couleurs que vous sélectionnez, collez ou prélevez ne quittent jamais votre appareil. Il n'y a rien à installer et aucun abonnement n'est requis. Toutes les fonctionnalités — conversion, pipette, sélecteur d'image, vérification du contraste WCAG, teintes et ombres, simulation du daltonisme et génération de schémas de couleurs — sont disponibles gratuitement dès la première visite, sans compte nécessaire.
Comment convertir un code HEX en RGB ?
Collez votre code hex (avec ou sans le # initial) dans le champ HEX et les valeurs RGB, HSL, HSV, CMYK et OKLCH se mettent à jour instantanément. Par exemple, collez #3b82f6 et vous verrez immédiatement rgb(59, 130, 246) dans le champ RGB et hsl(217, 91%, 60%) dans le champ HSL. Chaque format reste synchronisé — vous n'avez à entrer une couleur qu'une seule fois. La conversion est bidirectionnelle : tapez une valeur RGB et le HEX et tous les autres champs se mettent à jour de la même manière.
Quels formats de couleur cet outil peut-il convertir ?
L'outil convertit dans les deux sens entre six formats : HEX (le code #rrggbb utilisé en HTML et CSS), RGB (valeurs rouge-vert-bleu de 0 à 255), HSL (teinte 0-360°, saturation et luminosité en pourcentages), HSV/HSB (teinte-saturation-valeur, le modèle utilisé dans la plupart des sélecteurs de couleur des applications de design), CMYK (pourcentages cyan-magenta-jaune-noir pour l'aperçu d'impression) et OKLCH (un espace colorimétrique moderne perceptuellement uniforme). Modifiez n'importe quel champ et les cinq autres se mettent à jour instantanément.
Puis-je sélectionner une couleur depuis une image ou une photo ?
Oui — c'est un sélecteur de couleur d'image complet. Téléchargez une photo, glissez-déposez-la ou collez-la depuis votre presse-papiers (Ctrl+V / Cmd+V), puis survolez l'image et cliquez pour capturer la couleur exacte de n'importe quel pixel. Une loupe intégrée fait un zoom pour une sélection au pixel près. L'image est traitée localement dans votre navigateur à l'aide d'un canvas HTML et n'est jamais téléchargée sur aucun serveur.
Vérifie-t-il le contraste pour l'accessibilité (WCAG) ?
Oui. Le vérificateur de contraste WCAG calcule le ratio de contraste basé sur la luminance entre votre couleur choisie et les fonds blanc et noir, et affiche des badges réussite/échec AA et AAA pour le texte normal, le texte grand et les composants UI. WCAG AA exige un ratio de 4,5:1 pour le texte normal (3:1 pour le texte grand) ; WCAG AAA exige 7:1 (4,5:1 pour le texte grand). Le vérificateur se met à jour en direct lorsque vous ajustez n'importe quel champ de couleur.
Qu'est-ce que OKLCH et pourquoi l'utiliser ?
OKLCH est un espace colorimétrique moderne et perceptuellement uniforme introduit dans CSS Color Level 4. Contrairement au RGB ou HSL, où des changements numériques égaux ne produisent pas des différences également perçues par l'œil humain, OKLCH est calibré pour que l'augmentation ou la diminution de la valeur de luminosité (L) d'un montant fixe produise un résultat visuellement cohérent quelle que soit la teinte. Cela le rend idéal pour créer des palettes de couleurs accessibles et équilibrées. OKLCH peut également représenter des couleurs à gamme étendue (Display P3) et est pris en charge nativement dans les navigateurs modernes.
Le sélecteur de couleur fonctionne-t-il sur iPhone et Android ?
Oui. L'outil entier fonctionne dans n'importe quel navigateur mobile moderne — Safari sur iPhone/iPad et Chrome sur Android. La roue chromatique, les champs de saisie de format, le sélecteur de couleur d'image, le vérificateur de contraste WCAG, l'échelle de teintes/ombres et le générateur de schémas de couleurs fonctionnent normalement sur mobile. La pipette d'écran n'est pas disponible sur les navigateurs mobiles (c'est une API exclusive à Chrome/Edge sur ordinateur), mais le sélecteur d'image et le collage du presse-papiers fonctionnent parfaitement sur mobile.
Related tools
Voir tous les outils
Nouveau Générateur de glassmorphism
Concevez une carte en verre dépoli et copiez le CSS, avec un aperçu en direct.
Nouveau Générateur de text-shadow CSS
Réglez une ombre de texte CSS avec un aperçu en direct et copiez le code.
Nouveau Mélangeur de couleurs
Mélangez deux couleurs à n’importe quel ratio et copiez le résultat ou n’importe quelle étape.
Nouveau Pipette à couleurs d’image
Choisissez n’importe quelle couleur d’une image et extrayez sa palette dominante en HEX, RGB et HSL.
Nouveau Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Nouveau Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.