Softonic

Sélecteur de couleur HEX

Étape 1 / 4 Couleur Hex

Designers et développeurs passent sans cesse la même couleur d’une notation à l’autre. Cliquez dans le champ 2D de saturation/valeur, faites glisser le curseur de teinte ou collez une valeur : le sélecteur affiche HEX, RGB, HSL, HSV et CMYK côte à côte, avec des contrôles de contraste WCAG sur noir et sur blanc pour savoir immédiatement si la couleur reste lisible.

Comment choisir une couleur

  1. 1

    Choisissez une teinte

    Faites glisser le curseur vertical de teinte sur tout le spectre de 0 à 360°.

  2. 2

    Réglez saturation et valeur

    Cliquez ou faites glisser dans le carré 2D pour définir l’intensité et la luminosité de la couleur.

  3. 3

    Affinez avec des valeurs exactes

    Saisissez des valeurs en HEX, RGB, HSL, HSV ou CMYK — les cinq champs restent synchronisés.

  4. 4

    Vérifiez le contraste et copiez

    Les rapports de contraste sur noir et sur blanc s’affichent en direct ; un clic copie la notation voulue.

Les notations de couleur en pratique

Chaque modèle colorimétrique répond à une question légèrement différente.

Référence des notations

Notation Composants Utilisation courante
HEX #RRGGBB CSS, outils de design, chartes de marque
RGB rouge 0–255, vert 0–255, bleu 0–255 CSS rgb(), retouche d’image
HSL teinte 0–360°, saturation %, luminosité % CSS hsl(), systèmes de design
HSV/HSB teinte 0–360°, saturation %, valeur/brillance % Sélecteurs de couleur Photoshop et Figma
CMYK cyan %, magenta %, jaune %, key/noir % Impression, prépresse
OKLCH luminosité %, chroma, teinte Palettes modernes de CSS Color Module 4

Contraste d’accessibilité

WCAG 2.2 définit les rapports de contraste minimaux entre texte et arrière-plan :

  • AA pour le texte normal : ≥ 4,5:1
  • AA pour le grand texte (18 pt ou 14 pt en gras) : ≥ 3:1
  • AAA pour le texte normal : ≥ 7:1

Le sélecteur calcule en temps réel le rapport sur blanc et sur noir. Si une couleur de premier plan personnalisée est critique, vérifiez chaque paire avec un outil de contrôle de contraste dédié.

Conseils

  • HEX est le format par défaut de la plupart des outils de design, mais le raccourci hexadécimal à trois caractères (#F60) équivaut à #FF6600, pas à #F06060.
  • HSL est plus pratique pour créer des palettes : verrouillez la teinte, puis variez la luminosité pour obtenir des tons clairs et foncés.
  • CMYK et RGB ne se convertissent jamais parfaitement — le rendu CMYK imprimé dépend du profil de presse. Validez toujours une épreuve sur papier réel.
  • Pour le CSS moderne, envisagez OKLCH afin d’obtenir des paliers de luminosité visuellement réguliers.

Questions fréquentes

Photoshop applique un profil colorimétrique, généralement sRGB pour l’écran et souvent un profil différent pour l’impression. Les navigateurs interprètent les valeurs HEX non balisées comme du sRGB. Si votre document est réglé sur Adobe RGB ou ProPhoto, les valeurs de pixels restent identiques, mais la couleur perçue change.

Oui — les deux décrivent un rouge pur : rouge à 255, vert et bleu à 0. HEX est simplement une notation hexadécimale à deux chiffres pour chaque valeur de canal entre 0 et 255.

Choisissez votre couleur principale, passez en HSL, puis modifiez la luminosité par paliers de 10% en gardant la teinte et la saturation fixes. Vous obtenez une gamme cohérente de tons clairs et foncés sur la même teinte.

Les couleurs récemment utilisées sont enregistrées dans le stockage local de votre navigateur afin de rester disponibles après actualisation. Rien n’est envoyé au serveur et vous pouvez effacer l’historique de palette à tout moment.

Outils similaires

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Formateur JSON

Collez du JSON pour l'afficher avec un retrait de 2 ou 4 espaces, le minifier en sortie compacte ou vérifier rapidement sa syntaxe avant de copier le résultat.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Générateur de palette de couleurs

Créez des palettes monochromatiques, analogues, complémentaires, triadiques ou tétradiques depuis une couleur HEX de base et exportez des variables CSS prêtes à copier.

Générateur de couleurs aléatoires

Générez de 1 à 50 couleurs HEX aléatoires avec des échantillons à prévisualiser, copier et utiliser en CSS, en test ou en recherche de palette.

Convertisseur ASCII en Hex

Convertissez le texte ASCII en valeurs hexadécimales. La sortie utilise deux chiffres hexadécimaux par caractère, prête pour les dumps mémoire, les traces de paquets ou les tables de firmware.