Snapchat color palette
SocialSnapchat's color identity is defined by its vibrant yellow, paired with black and white for high contrast and clarity. The palette is minimal, emphasizing playful energy and instant recognition.
snapchat.comSnapchat colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Snapchat YellowPrimary255, 252, 0
- Snapchat BlackSecondary0, 0, 0
- Snapchat WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Snapchat WhiteBackground255, 255, 255
- Snapchat Light GraySurface244, 244, 244
- Snapchat Border GrayBorder226, 226, 226
Text
Three tiers of copy.- Snapchat BlackText0, 0, 0
- Snapchat Medium GraySecondary text110, 110, 110
- Snapchat Muted GrayMuted text175, 175, 175
Semantic
Feedback and state colors.- Snapchat GreenSuccess52, 199, 89
- Snapchat OrangeWarning255, 149, 0
- Snapchat RedError255, 59, 48
- Snapchat BlueInfo0, 122, 255
Use Snapchat's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
snapchat-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007AFF;
--error: #FF3B30;
--accent: #FFFFFF;
--border: #E2E2E2;
--primary: #FFFC00;
--success: #34C759;
--surface: #F4F4F4;
--warning: #FF9500;
--secondary: #000000;
--text-muted: #AFAFAF;
--background: #FFFFFF;
--text-primary: #000000;
--text-secondary: #6E6E6E;
}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.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1: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.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Snapchat gray and neutral colors
The quiet part of the Snapchat palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Snapchat WhiteBackground
- HEX
- RGB
- HSL
- Snapchat Light GraySurface
- HEX
- RGB
- HSL
- Snapchat Border GrayBorder
- HEX
- RGB
- HSL
- Snapchat BlackText
- HEX
- RGB
- HSL
- Snapchat Medium GraySecondary text
- HEX
- RGB
- HSL
- Snapchat Muted GrayMuted text
- HEX
- RGB
- HSL
About Snapchat's colors
Snapchat's palette centers on a bright yellow, contrasted with black and white for maximum visibility and simplicity. The minimal use of color supports a playful, approachable brand personality.
High contrast between yellow and black for instant recognition.
White and light gray provide neutral backgrounds for content.
Accent colors are reserved for semantic states and notifications.
Psychology
Yellow evokes energy, youthfulness, and positivity, aligning with Snapchat's playful brand. Black and white add clarity and legibility, ensuring the interface is easy to navigate.
Evolution
Snapchat's core yellow, black, and white palette has remained consistent since launch. Minor adjustments to gray tones and semantic colors have been made for accessibility and UI clarity.
Where Snapchat uses each color
- Primary
Snapchat Yellow is used for the app icon, splash screens, and key branding elements.
- Secondary
Snapchat Black appears in the logo outline, navigation bars, and primary text.
- Accent
Snapchat White is used for backgrounds, icons, and secondary UI elements.
- Backgrounds
White and light gray backgrounds are used throughout the app's chat and story screens.
- Text
Black is used for primary text, with medium and muted grays for secondary and disabled text.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and info states in notifications and badges.
Snapchat color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Snapchat primary color hex code is #FFFC00. This bright yellow is central to the brand's identity.
Snapchat Yellow (#FFFC00) has an RGB value of (255, 252, 0). In CMYK, it is approximately (0, 1, 100, 0).
Snapchat uses #F4F4F4 for light gray surfaces, #E2E2E2 for borders, #6E6E6E for secondary text, and #AFAFAF for muted text. These neutrals support the bold yellow and enhance readability.
Use Snapchat Yellow (#FFFC00) for branding and highlights, black and white for text and backgrounds, and semantic colors for status indicators. Maintain high contrast and avoid introducing additional colors.
The secondary color is Snapchat Black, #000000, and the accent is Snapchat White, #FFFFFF. 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 Snapchat's colors consistently when it generates UI.
Make something in the spirit of Snapchat
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
