Extracteur Gratuit de Palette de Couleurs de Site Web

L'Extracteur de palette de couleurs de site web est un outil en ligne gratuit qui extrait la palette de couleurs complète à partir du CSS de n'importe quel site web. Découvrez les couleurs de marque, les couleurs de texte et les arrière-plans. Il fonctionne entièrement dans votre navigateur, sans installation ni inscription.

Collez le code source CSS d'un site web et l'outil en extraira toutes les valeurs de couleur utilisées.

Oui, il détecte les variables CSS (--color-*) et leurs valeurs.

Oui, entièrement gratuit.

Absolument. L'Extracteur de palette de couleurs de site web traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Oui, l'Extracteur de palette de couleurs de site web est entièrement responsive et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucune application à télécharger.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement l'Extracteur de palette de couleurs de site web dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'utilisation.

L'Extracteur de palette de couleurs de site web fonctionne dans tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Ouvrez le site dans votre navigateur, affichez son code source ou sa feuille de style (clic droit puis Afficher le code source de la page, ou ouvrez un fichier .css lié), copiez le CSS, puis collez-le dans l'extracteur. L'outil lit les valeurs de couleur brutes plutôt que d'échantillonner des pixels sur une capture d'écran, donc les codes hexadécimaux obtenus sont exactement ceux définis par le designer, sans approximation déformée par l'anticrénelage ou la compression. Il analyse les propriétés où la couleur intervient -- background, color, les couleurs de bordure, fill, stroke, box-shadow et outline -- ainsi que les propriétés personnalisées CSS, puis liste chaque couleur unique sous forme de pastille à copier en un clic. Comme il fonctionne sur du code source collé, vous pouvez aussi analyser une feuille de style interne ou non publiée qu'aucun outil de capture d'écran ne pourrait atteindre. Collez le CSS ci-dessus pour extraire la palette complète et exacte en un clic.

Un pipette de couleurs sur capture d'écran échantillonne un pixel rendu, donc la valeur lue peut différer de l'originale à cause de l'anticrénelage sur les bords, de la compression JPEG ou PNG, des profils colorimétriques d'écran, et de tout mélange d'opacité survenu lors du rendu. L'extraction depuis le CSS lit la valeur littérale écrite par l'auteur -- par exemple #2563eb -- elle est donc exacte et reproductible. L'extraction CSS révèle aussi des couleurs qu'une capture d'écran ne peut jamais montrer : des teintes définies uniquement dans des états au survol, des règles de mode sombre, des boutons désactivés, ou des composants sur lesquels vous n'avez jamais cliqué, puisqu'elles existent toutes dans le code source. La contrepartie est qu'il faut avoir accès à la feuille de style, alors qu'une pipette fonctionne sur n'importe quelle image. Cet outil choisit la voie du CSS, en supprimant les doublons et en convertissant chaque valeur en hexadécimal. Collez une feuille de style ci-dessus pour voir toutes les couleurs définies, y compris les cachées.

Oui. L'outil reconnaît les valeurs de couleur dans toutes les syntaxes CSS courantes et les normalise toutes en hexadécimal pour des résultats cohérents et faciles à comparer. Il convertit les fonctions rgb() et rgba(), les fonctions hsl() et hsla(), la forme abrégée à 3 chiffres comme #f0a, l'hexadécimal complet à 6 chiffres, et les couleurs CSS nommées comme crimson, teal et gold, associées à leur nom correspondant. Pour les valeurs hexadécimales à 8 chiffres et les rgba/hsla comportant un canal alpha, l'alpha est ignoré et seule la couleur sous-jacente est conservée, car l'objectif est la palette plutôt que la transparence par élément. Comme tout finit dans un format hexadécimal unique, deux valeurs écrites différemment -- disons rgb(220, 20, 60) et #dc143c -- fusionnent en une seule pastille avec un nombre d'occurrences combiné. Collez votre CSS ci-dessus et tous les formats pris en charge sont unifiés en une palette hexadécimale propre.

Une liste brute de quarante codes hexadécimaux est difficile à exploiter, donc l'extracteur trie chaque couleur selon sa luminosité et sa saturation en quatre catégories. Les teintes très claires deviennent des couleurs claires / d'arrière-plan, les tons très sombres deviennent des couleurs sombres / de texte, les valeurs peu saturées deviennent des couleurs neutres / grises, et les tons saturés restants deviennent des couleurs d'accent / de marque. Cela reflète la structure d'un véritable système de design et permet de repérer instantanément les couleurs signature d'une marque par rapport à ses gris de support. Ce regroupement révèle aussi une prolifération de couleurs : si le groupe accent contient trois bleus presque identiques, cela signifie généralement qu'une seule couleur de marque a été saisie légèrement différemment à plusieurs endroits et devrait être unifiée. Chaque pastille conserve son code hexadécimal et son nombre d'occurrences, et les couleurs les plus utilisées remontent en tête de liste. Collez une feuille de style ci-dessus pour voir la palette organisée automatiquement de cette façon.

Après l'extraction, ouvrez la section Exporter la palette et choisissez le format Variables CSS. L'outil génère un bloc :root prêt à coller où chaque couleur devient une propriété personnalisée numérotée, comme --color-1: #2563eb, ce qui vous permet d'intégrer tout l'ensemble directement dans une feuille de style et de référencer les tokens dans tout votre projet. Si vous avez besoin des données ailleurs, passez au format Tableau JSON pour obtenir chaque couleur avec son code hexadécimal, son nom associé et son nombre d'occurrences, utile pour des scripts ou des outils de design, ou au format Liste hexadécimale pour une chaîne simple séparée par des virgules qui se colle proprement dans Figma, un panneau de nuancier, ou une documentation. Un bouton de copie place le format choisi dans votre presse-papiers en un clic. C'est pratique pour récupérer les tokens d'un thème dont le fichier de design a disparu, ou pour documenter une marque avant une refonte. Collez votre CSS ci-dessus, puis exportez le format dont votre flux de travail a besoin.