Color Picker HEX & Sélecteur Couleur HTML

Sélectionnez n’importe quelle couleur dans la palette pour générer instantanément des codes HEX, RGB, RGBA et HSLA.
Un simple clic permet de copier les valeurs dans le presse-papiers afin de les utiliser immédiatement dans CSS, des outils de design ou des projets web.

Le curseur de transparence permet d’ajuster précisément les valeurs RGBA, directement dans le navigateur et sans installation supplémentaire.

Si vous souhaitez extraire des couleurs depuis une photo ou un logo, vous pouvez également utiliser l’extracteur de couleurs d’image.
Nous proposons aussi des outils gratuits pour le développement web, comme l’encodage Base64 et l’encodage URL.

Une image est modifiée avec recadrage ajustements et texte dans un éditeur en ligne | éditeur d’image, retouche photo, outil en ligne
Couleur Précédente
Couleur Actuelle
Teinte (Hue)
Transparence (Alpha)

Guide d’utilisation du HEX Color Picker — De la sélection à la copie du code couleur

Ce HEX Color Picker en ligne fonctionne instantanément dans votre navigateur sans aucune installation.
Cliquez sur la palette de couleurs ou saisissez directement un code HEX pour sélectionner une couleur avec précision.

Ajustez le curseur de transparence Alpha pour mettre à jour les valeurs RGBA et HSLA en temps réel.
Les codes générés peuvent être copiés en un clic puis utilisés immédiatement dans CSS, Figma, Adobe XD, VS Code et d’autres outils de design ou de développement.

Associez-le à l’outil Image Color Picker pour créer un workflow couleur plus rapide et plus efficace.

Guide complet des codes couleur CSS pour designers et développeurs

Les couleurs CSS utilisent principalement les formats HEX, RGB, RGBA, HSL et HSLA.
Le code HEX au format #RRGGBB reste le plus utilisé, tandis que RGBA permet de gérer la transparence pour les interfaces modernes.

HSL et HSLA facilitent le réglage de la teinte, de la saturation et de la luminosité, ce qui les rend parfaits pour les thèmes de couleurs et les design systems.
Cet outil permet de convertir instantanément tous les principaux formats de couleur afin d’utiliser des valeurs précises dans tous vos projets.

Comment Garder des Couleurs de Marque Cohérentes

La cohérence des couleurs est un élément essentiel de l’identité de marque et contribue à renforcer la reconnaissance ainsi que la confiance des utilisateurs.

Les logos, sites web, supports imprimés et visuels publicitaires utilisent souvent différents formats de couleur, d’où l’importance d’une conversion précise HEX ↔ RGB ↔ CMYK.

Avec ce convertisseur de codes couleur, vous pouvez facilement gérer les couleurs HEX et RGB pour les écrans ainsi que les valeurs CMYK destinées à l’impression.
Un outil pratique à garder en favori pour les designers, marketeurs et équipes branding.

Comment Extraire des Codes Couleur HEX depuis une Image

Vous souhaitez récupérer des couleurs directement depuis une image de référence ou une photo ? Utilisez l’outil Image Color Picker.

Téléchargez une image puis cliquez sur n’importe quel pixel pour afficher instantanément les codes couleur HEX et RGB.

Cet outil est idéal pour analyser les couleurs d’un logo, étudier les palettes de sites concurrents ou créer des palettes inspirées de photos.
Après extraction, vous pouvez immédiatement convertir RGB en HEX sur cette page et utiliser les couleurs dans vos projets CSS.

Choisir un Contraste de Couleurs Adapté à l’Accessibilité Web

Selon les recommandations d’accessibilité WCAG, le ratio de contraste entre le texte et l’arrière-plan doit être d’au moins 4,5:1 afin de garantir une bonne lisibilité.

Lors du choix des couleurs, la règle de base consiste à utiliser un texte foncé sur fond clair et un texte clair sur fond foncé.

Avec le HEX Color Picker, vous pouvez prévisualiser les couleurs en temps réel, comparer visuellement les contrastes et calculer les ratios à partir des valeurs RGB afin de créer une interface plus accessible et confortable à utiliser.
Avant de valider une palette de couleurs ou un design system, pensez toujours à vérifier le niveau de contraste.

Foire Aux Questions

Les codes couleur HEX sont le format standard utilisé pour représenter les couleurs dans le développement web et applicatif, avec une notation hexadécimale à 6 caractères comme #RRGGBB.

Par exemple, #FF0000 correspond au rouge, #00FF00 au vert et #0000FF au bleu.
Les deux premiers caractères indiquent l’intensité du rouge, les deux suivants celle du vert et les deux derniers celle du bleu.

Pour gérer la transparence, vous pouvez utiliser des codes HEX à 8 caractères au format #RRGGBBAA ou convertir la couleur en format RGBA pour une utilisation CSS.

Chaque format de couleur est utilisé selon le contexte et les besoins du design.

  • HEX : Format #RRGGBB. Le standard le plus utilisé en CSS et HTML.
  • RGB : Format rgb(255, 0, 0). Représente les valeurs rouge, vert et bleu de 0 à 255.
  • RGBA : Format rgba(255, 0, 0, 0.5). Ajoute une transparence (Alpha) au modèle RGB.
  • HSLA : Format hsla(0, 100%, 50%, 1). Utilise la teinte, la saturation, la luminosité et la transparence pour un réglage plus intuitif.
  • CMYK : Format cmyk(0%, 100%, 100%, 0%). Utilise les proportions de cyan, magenta, jaune et noir principalement pour le design imprimé.

Ce HEX Color Picker permet de convertir tous les formats de couleur en temps réel.
Le format CMYK est surtout utilisé pour l’impression et la production graphique professionnelle.

Oui, vous pouvez l’utiliser directement dans votre navigateur sans installation ni inscription.

L’outil fonctionne sur PC, tablette et smartphone et prend en charge les principaux navigateurs comme Chrome, Safari, Firefox et Edge.
Tous les outils en ligne Vivoldi sont proposés entièrement gratuitement.

Après avoir sélectionné une couleur, cliquez sur l’icône de copie () située à côté du champ de code pour enregistrer instantanément la valeur dans le presse-papiers.

Le code copié peut être collé directement dans CSS, Figma, VS Code, Adobe XD et d’autres outils via Ctrl+V (Mac : Cmd+V).
Les formats HEX, RGB, RGBA et HSLA peuvent être copiés séparément.

Pour extraire directement des couleurs depuis une image, utilisez l’outil Image Color Picker de Vivoldi.

Téléchargez simplement une image puis cliquez sur n’importe quel pixel pour afficher instantanément les codes couleur HEX et RGB.
Cet outil est idéal pour identifier les couleurs d’un logo, créer des palettes à partir de photos ou analyser les couleurs utilisées par des concurrents et leurs sites web.

Oui, cet outil prend en charge la conversion entre les formats HEX, RGB, RGBA, HSLA et CMYK.

En plus des formats HEX, RGB, RGBA et HSLA utilisés pour le web et les interfaces UI, vous pouvez également convertir les couleurs en CMYK pour l’impression en temps réel.

Après avoir choisi une couleur, copiez n’importe quel format en un clic et utilisez-le directement dans CSS, Figma, Illustrator, InDesign et d’autres outils de création.