GOAT color palette
EcommerceGOAT uses a minimalist, monochromatic color system centered on black, white, and neutral grays, reflecting its premium sneaker and apparel marketplace identity. The palette emphasizes clarity, contrast, and a modern, high-end aesthetic.
goat.comGOAT colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- GOAT BlackPrimary0, 0, 0
- GOAT WhiteSecondary255, 255, 255
- GOAT Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- GOAT WhiteBackground255, 255, 255
- GOAT Light GraySurface245, 245, 245
- GOAT Border GrayBorder229, 229, 229
Text
Three tiers of copy.- GOAT BlackText0, 0, 0
- GOAT Medium GraySecondary text107, 107, 107
- GOAT Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- GOAT Success GreenSuccess0, 182, 122
- GOAT Warning YellowWarning255, 184, 0
- GOAT Error RedError255, 59, 48
- GOAT Info BlueInfo0, 122, 255
Use GOAT's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
goat-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007AFF;
--error: #FF3B30;
--accent: #F5F5F5;
--border: #E5E5E5;
--primary: #000000;
--success: #00B67A;
--surface: #F5F5F5;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #000000;
--text-secondary: #6B6B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
GOAT gray and neutral colors
The quiet part of the GOAT palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- GOAT WhiteBackground
- HEX
- RGB
- HSL
- GOAT Light GraySurface
- HEX
- RGB
- HSL
- GOAT Border GrayBorder
- HEX
- RGB
- HSL
- GOAT BlackText
- HEX
- RGB
- HSL
- GOAT Medium GraySecondary text
- HEX
- RGB
- HSL
- GOAT Muted GrayMuted text
- HEX
- RGB
- HSL
About GOAT's colors
GOAT's palette is rooted in monochrome, using black, white, and subtle grays to create a clean, premium feel. Accent colors are reserved for semantic feedback and functional UI states.
Primary black contrasts with white backgrounds for clarity.
Grays provide hierarchy and separation in UI elements.
Accent colors are used sparingly for status and feedback.
Psychology
Black and white convey luxury, simplicity, and trust, aligning with GOAT's curated, high-end positioning. The restrained use of color focuses attention on products and content.
Evolution
GOAT's color palette has remained consistent since launch, maintaining a strong monochrome identity. Minor adjustments to gray tones have been made for accessibility and UI clarity.
Where GOAT uses each color
- Primary
GOAT Black is used for navigation bars, primary text, and key UI elements.
- Secondary
GOAT White serves as the main background for web and app screens.
- Accent
GOAT Light Gray is used for cards, surfaces, and subtle highlights.
- Backgrounds
White and light gray backgrounds are used throughout product pages and listings.
- Text
Primary and secondary text use black and medium gray for hierarchy and readability.
- Semantic
Success, warning, error, and info colors appear in notifications, badges, and form feedback.
GOAT color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official GOAT brand color is black, with the hex code #000000.
GOAT Black is #000000, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
GOAT uses a range of grays: Light Gray (#F5F5F5), Border Gray (#E5E5E5), Medium Gray (#6B6B6B), and Muted Gray (#B3B3B3) for UI elements and text.
Use black and white for primary backgrounds and text, with grays for UI structure and hierarchy. Accent and semantic colors are reserved for feedback, notifications, and status indicators.
The secondary color is GOAT White, #FFFFFF, and the accent is GOAT Light Gray, #F5F5F5. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies GOAT's colors consistently when it generates UI.
Make something in the spirit of GOAT
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.