Outils

Palette de couleurs de n’importe quel site web

Entrez l’adresse d’un site web et obtenez sa palette : chaque couleur avec son rôle, en codes hex, variables CSS, thème Tailwind ou JSON.

Essayezstripe.com linear.app airbnb.com

airbnb.com

Mesuré il y a 4 jours.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff

1#ffffff  background
2#dddddd  surface
3#f2f2f2  surface-2
4#222222  foreground
5#6c6c6c  muted-foreground
6#da1249  primary
7#ffffff  on-primary
8#ffffff  border

Ouvrir la page de réponse complète Ouvrir le pack de design

Comment ça marche

Stylepack ouvre le site dans un vrai navigateur, mesure ce qui s’affiche (et non ce que dit la feuille de style) à quatre largeurs et dans les deux thèmes, puis enregistre le résultat sous forme de pack de design. Un site déjà mesuré répond immédiatement ; un nouveau site prend moins d’une minute. Chaque valeur de cette page vient de ce pack.

Questions

Comment la palette est-elle mesurée ?

Le site est rendu dans un vrai navigateur et les couleurs des fonds, textes, boutons, liens et bordures sont lues sur la page, regroupées et nommées par rôle (background, foreground, primary, border, etc.). L’accent est la couleur de ses boutons principaux et de ses liens.

Les couleurs du mode sombre sont-elles incluses ?

Quand le site a un thème sombre, il est mesuré aussi et le CSS contient un bloc dark avec les valeurs correspondantes.

Puis-je obtenir la palette pour Tailwind ou Figma ?

Le résultat propose des codes hex, des variables CSS, un thème Tailwind v4 et du JSON. Le pack de design ajoute tokens.json au format des design tokens du W3C, que Style Dictionary et les plugins Figma savent lire.