Color Picker

Sélecteur de couleur

Try it →

Overview

The Color Picker is your starting point. Click the color preview or the native color picker button to choose any color, or type directly into the HEX input field.

How to use

  1. Click the color preview area or the native picker button to open the color selector.
  2. Type a HEX value directly into the input field (with or without the # prefix).
  3. View real-time values across HEX, RGB, HSL, and HSV formats.
  4. Copy the auto-generated CSS Variables snippet for your picked color.
  5. Browse nine Shades & Tints variations from dark to light — click any swatch to copy its HEX.
  6. Explore Complementary, Analogous, and Triadic color harmonies.
  7. Check Color Details for luminance, brightness, temperature, nearest CSS name, and contrast ratios.

Tips

  • Use Save Color to store the color locally, or Check Contrast to send it to the Contrast Checker.
  • HEX inputs accept values with or without the # prefix.

Aperçu

Le Sélecteur de couleur est votre point de départ. Cliquez sur l'aperçu de couleur ou le bouton de sélection natif pour choisir n'importe quelle couleur, ou saisissez directement une valeur dans le champ HEX.

Comment l'utiliser

  1. Cliquez sur l'aperçu de couleur ou le bouton du sélecteur natif pour ouvrir le sélecteur.
  2. Saisissez une valeur HEX directement dans le champ (avec ou sans le préfixe #).
  3. Les valeurs se mettent à jour en temps réel pour HEX, RGB, HSL et HSV.
  4. Copiez l'extrait CSS Variables généré automatiquement.
  5. Parcourez les neuf variations de Nuances & Teintes — cliquez sur une teinte pour copier son HEX.
  6. Explorez les harmonies Complémentaire, Analogue et Triadique.

Conseils

  • Utilisez Sauvegarder pour stocker la couleur, ou Vérifier le contraste pour l'envoyer au Vérificateur de contraste.
  • Les champs HEX acceptent les valeurs avec ou sans le préfixe #.