Sélecteur de couleurs

Choisissez n’importe quelle couleur et obtenez ses valeurs HEX, RGB, HSL et OKLCH, son contraste sur blanc et sur noir, une échelle de teintes et de nuances et des couleurs assorties.

Comment utiliser le sélecteur de couleurs

  1. Faites glisser dans le sélecteur OKLCH, saisissez un code hex ou ouvrez le sélecteur de couleurs du navigateur pour choisir une couleur. L’adresse de la page suit votre couleur : vous pouvez donc la partager.
  2. Lisez la couleur en HEX, RGB, HSL, OKLCH et Display P3, et copiez n’importe quelle valeur avec son bouton de copie.
  3. Vérifiez le contraste sur blanc et sur noir, avec les ratios WCAG et les valeurs APCA.
  4. Faites défiler pour voir une échelle de teintes et de nuances, le rendu de la couleur en cas de daltonisme, les harmonies assorties et les couleurs nommées similaires.

Ce que vous pouvez faire

  • Sélecteur OKLCH

    Choisissez la luminosité, la chroma et la teinte avec un sélecteur basé sur OKLCH, y compris des couleurs hors sRGB, avec un rapport de gamut pour sRGB, Display P3 et Rec. 2020.

  • Tous les formats

    Les valeurs HEX, RGB, HSL, OKLCH et Display P3, plus un extrait CSS à coller dans votre feuille de style.

  • Contrôles de contraste

    Ratios WCAG 2 et valeurs APCA pour votre couleur utilisée comme texte et comme arrière-plan, sur blanc et sur noir.

  • Échelle de teintes et de nuances

    Une échelle OKLCH autour de votre couleur, que vous pouvez approfondir dans le générateur d’échelles Tailwind.

  • Vues pour le daltonisme

    Voyez comment la couleur change avec des déficiences de la vision des couleurs simulées.

  • Harmonies et noms

    Des harmonies de couleurs assorties qui s’ouvrent dans le générateur, et les couleurs nommées les plus proches.

Questions fréquentes

Comment choisir une couleur en ligne ?

Faites glisser dans le sélecteur OKLCH, saisissez un code hex ou utilisez le sélecteur de couleurs du navigateur. Les valeurs de la couleur se mettent à jour au fur et à mesure, et vous pouvez copier chacune d’elles.

Qu’est-ce qu’un code couleur HEX ?

Un code hex est un nombre hexadécimal à six chiffres précédé de #, comme #E77B80. Les trois paires de chiffres correspondent aux quantités de rouge, de vert et de bleu, chacune de 00 à FF, soit de 0 à 255 en décimal.

Qu’est-ce que l’OKLCH ?

L’OKLCH est un format de couleur en trois composantes : luminosité, chroma et teinte. Il repose sur un espace colorimétrique où des écarts numériques égaux paraissent visuellement égaux : modifier la luminosité ne décale donc pas la teinte perçue comme le fait HSL. Le CSS le prend en charge avec oklch().

Comment trouver le nom d’une couleur à partir de son code hex ?

Saisissez le code hex. La page affiche la couleur nommée la plus proche, et une couleur qui correspond exactement à un nom a sa propre page dans le répertoire des noms de couleurs.

Comment prélever une couleur dans une image ou sur mon écran ?

Utilisez le sélecteur de couleurs depuis une image pour prélever une couleur sur une photo, ou l’extension Chrome GetColors pour prélever n’importe quelle couleur à l’écran avec sa pipette.