Slopographic

Guide de Slop Colors

Premiers pas avec Slop Colors

Slop Colors est à la fois une pipette, un créateur de palettes et un contrôleur de contraste, sur une seule page. Les images et les palettes sont lues dans votre navigateur et jamais envoyées.

Ouvrir Slop Colors

La page

En haut se trouve la couleur courante, avec sa valeur en HEX, RGB, HSL, OKLCH et CMJN, et un bouton Copier pour chacune. En dessous, quatre cartes : Prélever sur une image, Palette, Créée à partir de cette couleur et Vérification du contraste.

Le panneau à droite contient les champs de la couleur, ce qu’il faut en créer, le nombre de couleurs à trouver dans une image et l’export. Sur un téléphone, c’est une feuille en bas de l’écran : touchez Réglages pour l’ouvrir.

Prélever des couleurs sur une image

  1. Déposez une image sur la page, ou cliquez sur Ouvrir une image….
  2. Passez sur l’image et cliquez pour prélever une couleur ; la loupe affiche les pixels sous le point.
  3. Utilisez les flèches pour déplacer le point d’un pixel à la fois, et Entrée pour ajouter la couleur à la palette.
  4. Cliquez sur Tout ajouter à la palette pour garder les couleurs principales de l’image.

Astuce : Dans Chrome et Edge, Prélever sur l’écran prend une couleur n’importe où sur votre écran.

Créer la palette

  1. Cliquez sur Ajouter cette couleur pour ajouter la couleur courante.
  2. Choisissez une Harmonie et une Échelle dans le panneau, puis Utiliser comme palette sous une rangée.
  3. Sous chaque couleur de la palette, ‹ et › la déplacent, ✎ la nomme et × la retire.

Vérifier le contraste

Saisissez une couleur de texte et un fond, ou utilisez Utiliser comme couleur de texte et Utiliser comme fond dans le panneau. Le rapport et les niveaux WCAG s’affichent aussitôt, et Corriger la couleur du texte trouve la couleur la plus proche qui passe le niveau AA.

Exporter et conserver

  1. Nommez la palette et choisissez un Format sous Exporter.
  2. Cliquez sur Télécharger la palette, Copier le code ou Enregistrer dans Slop Drive… ; Ouvrir dans… envoie le fichier vers une autre application.
  3. Pour rouvrir une palette, déposez sur la page son fichier .gpl, .ase, .json ou .css.