Farben
Die Farbpalette von sweetgreen.com
sweetgreen.com baut seine Seiten auf #f4f3e7 mit Text in #0e150e und ohne eine einzelne Akzentfarbe. Die 5 Farben unten wurden auf der Live-Seite gemessen.
vor 32 Tagen auf sweetgreen.com gemessen.
Palette
5 Farben| Farben | Rolle | Hex | RGB |
|---|---|---|---|
background | Page background | #f4f3e7 | rgb(244 243 231) |
surface | Cards, panels, raised or recessed surfaces | #d8e5d6 | rgb(216 229 214) |
foreground | Primary text | #0e150e | rgb(14 21 14) |
muted-foreground | Secondary text, captions | #8c8c82 | rgb(140 140 130) |
border | Hairlines, dividers, input borders | #0e150e | rgb(14 21 14) |
- Text auf dem Seitenhintergrund
- 16.62:1 · erfüllt WCAG AA
CSS-Variablen
Jede Farbe als Custom Property, benannt nach ihrer Rolle. Der Dark-Block ist da, wenn die Seite ein dunkles Theme hat.
:root {
--color-background: #f4f3e7;
--color-surface: #d8e5d6;
--color-foreground: #0e150e;
--color-muted-foreground: #8c8c82;
--color-border: #0e150e;
}Für KI-Agenten
Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.
curl -s https://stylepack.ai/packs/sweetgreen.com/DESIGN.mdFragen
Was ist der Hex-Code von sweetgreen.com?
Die Akzentfarbe auf sweetgreen.com ist #0e150e; der Seitenhintergrund ist #f4f3e7 und die Haupttextfarbe #0e150e. Jede ist an der gerenderten Seite gemessen, also das, was Besucher sehen, kein Wert aus einem Styleguide.
Wie nutze ich die Farben von sweetgreen.com in Tailwind oder CSS?
Kopiere die CSS-Variablen oder das Tailwind v4 Theme auf dieser Seite, oder lade das Designpaket herunter: Es enthält tokens.json (W3C Design-Tokens), tokens.css und tailwind.css mit denselben Werten.