Outil gratuit

Générateur de palette de couleurs

Déposez une photo. Obtenez ses couleurs principales avec leurs codes HEX et RGB, un contrôle du contraste avec un texte blanc et noir, et un aperçu d'une page de bio dans ces couleurs.

Votre photo

Nombre de couleurs
Ordre

Votre palette

    Aperçu sur une page de bio

    Ana Ruiz

    Cours de céramique et de poterie

    Découvrir les nouveaux mugsRéserver un coursDernière vidéo

      À quoi sert un générateur de palette de couleurs

      Un générateur de palette de couleurs trouve les couleurs principales d'une image et vous donne leurs codes. Celui-ci lit votre photo dans votre navigateur, regroupe les pixels proches et renvoie les 5, 6 ou 8 couleurs qui couvrent le plus de surface. Chaque couleur vient avec ses codes HEX et RGB et un contrôle de contraste pour le texte.

      Les créateurs et créatrices de contenu tirent une palette de leurs propres photos pour que leur profil, leurs posts et leur page de bio forment un ensemble cohérent. Le contrôle du contraste vous indique quelles couleurs peuvent porter du texte, et lesquelles conviennent mieux en arrière-plan ou en accent.

      Votre photo ne quitte jamais votre appareil. L'outil la dessine sur un canvas dans votre navigateur : pas d'envoi, pas de compte, pas de limite.

      Comment créer une palette à partir d'une photo

      1. Déposez une photo

        Utilisez une photo que vous publiez souvent, comme votre photo de profil ou une photo de produit. Les fichiers JPG, PNG et WebP fonctionnent.

      2. Choisissez le nombre de couleurs

        Choisissez 5, 6 ou 8 couleurs. Triez-les selon la place qu'elles occupent dans la photo, ou du plus clair au plus foncé.

      3. Vérifiez le contraste

        Chaque couleur affiche son contraste avec un texte blanc et un texte noir. Gardez les couleurs conformes pour les boutons avec du texte.

      4. Copiez les codes

        Copiez un code HEX, la liste complète, ou la palette en variables CSS pour votre site.

      Règles de contraste pour le texte sur vos couleurs

      Les Web Content Accessibility Guidelines (WCAG 2.2) fixent le contraste minimum entre un texte et son arrière-plan. Les pastilles de l'outil reprennent ces valeurs.

      Ce que vous vérifiezRatio minimumRègle WCAG
      Texte normal sur une couleur4.5:11.4.3 Contrast (Minimum), niveau AA
      Grand texte : 24 px, ou 18,5 px en gras3:11.4.3 Contrast (Minimum), niveau AA
      Texte normal, niveau plus strict7:11.4.6 Contrast (Enhanced), niveau AAA
      Grand texte, niveau plus strict4.5:11.4.6 Contrast (Enhanced), niveau AAA
      Un bouton ou une icône sur la page3:11.4.11 Non-text Contrast, niveau AA

      Sources : W3C, Understanding 1.4.3 Contrast (Minimum), W3C, Understanding 1.4.6 Contrast (Enhanced), W3C, Understanding 1.4.11 Non-text Contrast. Vérifié le 11 novembre 2026.

      Sur votre page More.You

      Vos couleurs sur votre page link in bio

      Sur une page More.You, vous réglez vous-même l'arrière-plan, les boutons, les polices et les couleurs. Chaque modification va dans un brouillon avec annulation, donc votre page en ligne n'affiche jamais un design à moitié fini.

      more.you/
      • Thèmes et couleurs avec le plan Free

        Choisissez un thème, puis changez le fond d'écran, le style des boutons, les polices et les couleurs. Mélangez la galerie de thèmes quand vous cherchez des idées.

        Thèmes et design
      • Partir d'un modèle

        Les modèles par métier vous donnent une première page déjà prête. Appliquez-en un, puis remplacez ses couleurs par celles de votre photo.

        Modèles de link in bio
      • Cinq mises en page d'en-tête

        Les mises en page d'en-tête classique, hero, bannière, détourée et en forme placent votre photo là où elle s'accorde le mieux avec votre palette.

      Questions sur la palette de couleurs

      Comment le générateur de palette choisit-il les couleurs ?

      Il réduit votre photo en une petite copie, lit chaque pixel et classe les pixels en groupes de couleurs proches avec une méthode appelée « median cut ». Il fait la moyenne de chaque groupe, écarte les couleurs presque identiques et garde celles qui couvrent la plus grande part de la photo.

      Ma photo est-elle envoyée quelque part ?

      Non. L'outil ouvre votre photo dans votre navigateur et la lit sur un élément canvas, sur votre appareil. Rien n'est envoyé à More.You ni à un autre serveur, et rien n'est enregistré. Fermez l'onglet et la photo comme la palette disparaissent.

      Que signifient les codes HEX et RGB ?

      Les deux décrivent la même couleur. RGB donne la quantité de rouge, de vert et de bleu de 0 à 255, par exemple rgb(178, 246, 227). HEX écrit les mêmes trois nombres en base 16 après un dièse, par exemple #B2F6E3. La plupart des applications de design et des créateurs de sites acceptent l'un ou l'autre.

      Quel contraste faut-il pour qu'un texte soit lisible ?

      Les WCAG 2.2, la norme d'accessibilité web, demandent un ratio de contraste d'au moins 4,5:1 pour un texte normal et de 3:1 pour un grand texte au niveau AA. Un grand texte fait 24 px, ou 18,5 px en gras. Les pastilles à côté de chaque couleur indiquent son ratio avec un texte blanc et avec un texte noir.

      Comment utiliser la palette sur ma page de bio ?

      Prenez la couleur la plus claire pour l'arrière-plan de la page et une couleur plus marquée pour les boutons. Vérifiez ensuite que le texte du bouton atteint 4,5:1 sur la couleur du bouton. L'aperçu de l'outil montre cette configuration et indique quelles associations sont conformes.

      Quels types de fichiers puis-je utiliser ?

      Toute image que votre navigateur sait ouvrir, comme JPG, PNG, WebP et GIF. Pour un GIF, l'outil lit la première image. Si un fichier ne s'ouvre pas, enregistrez-le en JPG ou PNG sur votre téléphone ou votre ordinateur et réessayez.

      Puis-je copier la palette en CSS ?

      Oui. Sélectionnez Copier en variables CSS pour obtenir un bloc :root avec une variable par couleur, par exemple --color-1: #B2F6E3. Collez-le en haut de votre feuille de style et utilisez var(--color-1) partout où vous avez besoin de la couleur. Les variables suivent l'ordre que vous avez choisi : --color-1 est donc la couleur la plus utilisée ou la plus claire.

      Plus d'outils gratuits

      Gratuit et sans compte. Rien de ce que vous saisissez n'est stocké sur nos serveurs.

      Voir tous les outils gratuits

      Guides : Guide de design d'une page de bio : mises en page, thèmes, boutons, Thèmes de link in bio : comment choisir celui qui convertit.

      Sources
      1. W3C, Understanding SC 1.4.3 Contrast
      2. W3C, Understanding SC 1.4.6 Contrast
      3. W3C, Understanding SC 1.4.11 Non-text Contrast

      Sources vérifiées le 11 novembre 2026.

      Vos couleurs, sur votre propre page

      Réservez votre page More.You gratuite et réglez son arrière-plan, ses boutons et ses polices aux couleurs de votre photo.

      more.you/

      Langue