Utilore

Générateur de palette de couleurs

Choisissez une couleur de départ et l’outil calcule le reste du jeu selon le cercle chromatique. Cliquez sur un échantillon pour copier son code, ou déposez une photo et prenez la palette directement dedans.

Schéma

Cliquez sur un échantillon pour copier son code

    Palette depuis une photo

    La photo ne quitte pas votre appareil : elle est lue directement dans le navigateur.

      Comment faire

      1. Saisissez un code couleur ou ouvrez le sélecteur : la palette se redessine à mesure.
      2. Changez de schéma : la complémentaire est à l’opposé du cercle, la triade le divise en trois.
      3. Cliquez sur un échantillon pour copier le code, ou copiez tout le jeu en variables CSS.
      4. Pour tirer les couleurs d’une photo, choisissez une image : elle est lue sur votre appareil.

      Bon à savoir

      D’où viennent les angles

      Un schéma de couleurs n’est pas affaire de goût mais de géométrie sur le cercle chromatique. La couleur complémentaire se trouve exactement à l’opposé, à 180° ; une triade partage le cercle en trois parts égales de 120° ; les analogues sont voisines à moins de trente degrés. L’outil fait tourner la teinte en gardant la saturation et la luminosité, si bien que les compagnes restent aussi vives et aussi profondes que la couleur de départ.

      Pourquoi une photo donne de vraies couleurs et non de la boue

      Compter les pixels les plus fréquents ne marche pas sur une photographie : le ciel à lui seul contient un million de bleus légèrement différents, chacun présent une fois. Cet outil coupe l’espace des couleurs en deux selon son canal le plus large et recommence jusqu’à obtenir assez de boîtes — le jeu garde donc le ciel, le visage et l’ombre séparément au lieu d’un unique brun moyen.

      Questions fréquentes

      Quel schéma choisir pour un site ?

      Le monochrome et l’analogue sont les valeurs sûres : ils gardent la page calme et ne se disputent pas l’attention. Gardez la complémentaire pour le seul élément qui doit se voir — un bouton, un badge, un avertissement.

      Comment utiliser la palette dans le code ?

      Copiez le bloc de variables CSS sous les échantillons et collez-le dans votre feuille de style. Les noms sortent en --color-1 … --color-6, plus lisibles dans un projet qu’on ne connaît pas qu’une rangée de codes hexadécimaux.

      Ma photo est-elle envoyée quelque part ?

      Non. L’image est décodée dans la page et réduite à 160 pixels avant le comptage des couleurs : rien ne quitte l’appareil, et la réponse arrive tout de suite.

      Pourquoi la rangée de nuances foncées ne finit-elle pas en noir ?

      Le noir pur et le blanc pur n’apportent aucune information : tout le monde les connaît et, dans une palette, ils ne font qu’occuper une place. La rangée s’arrête avant le bord, si bien que chaque échantillon reste une couleur utilisable.

      Outils similaires