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

linear.app

Mesuré il y a 4 jours.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111

1#08090a  background
2#101112  surface
3#1c1d1e  surface-2
4#07220a  surface-3
5#f7f8f8  foreground
6#8a8f98  muted-foreground
7#e5e5e6  primary
8#111111  on-primary
9#5e6ad2  secondary
10#1c1d1e  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.