Quelles sont les couleurs de la marque supabase.com ?

Les couleurs principales de supabase.com sont #15593b (accent), #000000 (fond) et #ffffff (texte). La palette complète de 9 couleurs, avec le rôle de chacune, figure sur cette page en codes hex.

Quel est le code hex de supabase.com ?

La couleur d’accent de supabase.com est #15593b ; le fond de page est #000000 et la couleur principale du texte #ffffff. Chacune est mesurée sur la page rendue : c’est ce que voient les visiteurs, pas une valeur tirée d’une charte graphique.

Comment utiliser les couleurs de supabase.com dans Tailwind ou en CSS ?

Copiez les variables CSS ou le thème Tailwind v4 de cette page, ou téléchargez le pack de design : il inclut tokens.json (design tokens W3C), tokens.css et tailwind.css avec les mêmes valeurs.

Palette de couleurs supabase.com : codes hex et CSS

Palette

9 couleurs

Couleurs	Rôle	Hex	RGB	Clair / sombre
`background`	Page background	`#000000`	`rgb(0 0 0)`	`#000000`
`surface`	Cards, panels, raised or recessed surfaces	`#0c0f24`	`rgb(12 15 36)`	`#0c0f24`
`surface-2`	Secondary surface	`#002533`	`rgb(0 37 51)`	`#002533`
`foreground`	Primary text	`#ffffff`	`rgb(255 255 255)`	`#ffffff`
`muted-foreground`	Secondary text, captions	`#a0a0a0`	`rgb(160 160 160)`
`primary`	Candidate accent (semantic role inferred)	`#15593b`	`rgb(21 89 59)`	`#3ecf8e`
`on-primary`	Text on the accent	`#ffffff`	`rgb(255 255 255)`	`#111111`
`secondary`	Secondary accent (pink)	`#8e4ec6`	`rgb(142 78 198)`	`#8e4ec6`
`border`	Hairlines, dividers, input borders	`#3fcf8e`	`rgb(63 207 142)`	`#3ecf8e`

Variables CSS

Chaque couleur en propriété personnalisée, nommée par rôle. Le bloc sombre est présent quand le site a un thème sombre.

1:root {
2  --color-background: #000000;
3  --color-surface: #0c0f24;
4  --color-surface-2: #002533;
5  --color-foreground: #ffffff;
6  --color-muted-foreground: #a0a0a0;
7  --color-primary: #15593b;
8  --color-on-primary: #ffffff;
9  --color-secondary: #8e4ec6;
10  --color-border: #3fcf8e;
11}
12
13[data-theme="dark"] {
14  --color-background: #000000;
15  --color-surface: #0c0f24;
16  --color-surface-2: #002533;
17  --color-foreground: #ffffff;
18  --color-primary: #3ecf8e;
19  --color-on-primary: #111111;
20  --color-secondary: #8e4ec6;
21  --color-border: #3ecf8e;
22}

Pour les agents IA

Le pack est du texte brut, sans clé : récupérez DESIGN.md, ou confiez tout le pack à Claude Code, Cursor ou Copilot via le serveur MCP.

curl -s https://stylepack.ai/packs/supabase.com/DESIGN.md

La palette de couleurs de supabase.com