Supreme color palette
FashionSupreme's color identity is defined by its iconic red and white palette, which is instantly recognizable and consistent across all brand touchpoints. The brand uses bold, minimal color choices to reinforce its streetwear heritage and visual impact.
supremenewyork.comSupreme colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Supreme RedPrimary255, 27, 27
- Supreme WhiteSecondary255, 255, 255
- Supreme BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Supreme Light GrayBackground248, 248, 248
- Supreme Surface GraySurface229, 229, 229
- Supreme Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Supreme Text BlackText17, 17, 17
- Supreme Text GraySecondary text102, 102, 102
- Supreme Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Supreme Success GreenSuccess76, 175, 80
- Supreme Warning YellowWarning255, 193, 7
- Supreme Error RedError255, 82, 82
- Supreme Info BlueInfo33, 150, 243
Use Supreme's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
supreme-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #FF5252;
--accent: #000000;
--border: #D9D9D9;
--primary: #FF1B1B;
--success: #4CAF50;
--surface: #E5E5E5;
--warning: #FFC107;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F8F8F8;
--text-primary: #111111;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Supreme gray and neutral colors
The quiet part of the Supreme palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Supreme Light GrayBackground
- HEX
- RGB
- HSL
- Supreme Surface GraySurface
- HEX
- RGB
- HSL
- Supreme Border GrayBorder
- HEX
- RGB
- HSL
- Supreme Text BlackText
- HEX
- RGB
- HSL
- Supreme Text GraySecondary text
- HEX
- RGB
- HSL
- Supreme Muted GrayMuted text
- HEX
- RGB
- HSL
About Supreme's colors
Supreme's palette is built around a high-contrast red and white combination, emphasizing clarity and boldness. The supporting neutrals ensure the primary colors remain the focal point.
Red and white are used in strict contrast for maximum visibility.
Black and gray neutrals support the primary palette in UI elements.
Accent colors are minimal and reserved for functional states.
Psychology
Red conveys energy, urgency, and attention, aligning with Supreme's streetwear ethos. The white background provides a clean, modern canvas that highlights products and branding.
Evolution
Supreme's color palette has remained virtually unchanged since its founding, maintaining brand consistency. Occasional accent colors appear in collaborations, but the core red and white are always dominant.
Where Supreme uses each color
- Primary
Supreme Red is used in the logo, key buttons, and promotional banners.
- Secondary
Supreme White serves as the background for the website, packaging, and product labels.
- Accent
Supreme Black is used for navigation text, icons, and some apparel details.
- Backgrounds
Supreme Light Gray is used for UI backgrounds and product grid areas.
- Text
Supreme Text Black is used for primary headlines and product names, while grays are used for secondary and muted text.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators in digital interfaces.
Supreme color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Supreme red is #FF1B1B. This color is used in the logo and key brand elements.
Supreme Red is RGB(255, 27, 27) and CMYK(0, 89, 89, 0). The hex code is #FF1B1B.
Supreme uses a range of grays including #F8F8F8 for backgrounds, #E5E5E5 for surfaces, and #D9D9D9 for borders. These neutrals help maintain focus on the primary red and white.
The red and white should dominate, with black and gray neutrals supporting UI and text. Accent and semantic colors are reserved for functional or status-based elements only.
The secondary color is Supreme White, #FFFFFF, and the accent is Supreme Black, #000000. 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 Supreme's colors consistently when it generates UI.
Make something in the spirit of Supreme
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.