Snapchat colors
The Snapchat color palette has 3 colors: Snap Yellow #FFFC00, Black #000000 and White #FFFFFF. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.
Snapchat color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Snap Yellow | Primary | #FFFC00 | rgb(255, 252, 0) | hsl(59, 100%, 50%) | oklch(96.2% 0.208 108.9) |
| Black | Text | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | oklch(0% 0 0) |
| White | Background | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | oklch(100% 0 0) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Snapchat colors come from
Snapchat does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors www.snapchat.com actually renders, which can differ slightly from print or logo colors.
- Source (live website CSS or SVG): https://www.snap.com/brand-guidelines?lang=en-US checked 2026-10-16
Snapchat color contrast
Black text on Snapchat snap yellow has a contrast ratio of 19.17:1 and passes WCAG AAA for any text size. Used as a text color, Snap Yellow reaches 1.09:1 on white and 19.17:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Snap Yellow | 1.09:1 | Fails | Lc 0.0 | Not readable |
| Black on Snap Yellow | 19.17:1 | AAA | Lc 100.0 | Preferred for body text |
Snapchat colors in CSS and Tailwind
Copy the Snapchat palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Snap Yellow, for hover states, borders and tinted backgrounds.
:root {
--snapchat-snap-yellow: #FFFC00;
--snapchat-black: #000000;
--snapchat-white: #FFFFFF;
}@import "tailwindcss";
@theme {
--color-snapchat-snap-yellow: #FFFC00;
--color-snapchat-black: #000000;
--color-snapchat-white: #FFFFFF;
}@theme {
--color-snapchat-50: #FFFC00;
--color-snapchat-100: #EDEFB3;
--color-snapchat-200: #E1E161;
--color-snapchat-300: #CBC800;
--color-snapchat-400: #A9A700;
--color-snapchat-500: #918F00;
--color-snapchat-600: #7A7800;
--color-snapchat-700: #666500;
--color-snapchat-800: #535200;
--color-snapchat-900: #454400;
--color-snapchat-950: #292800;
}Named colors closest to the Snapchat palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
| Brand color | HEX | Nearest named color | Named HEX | ΔE OK |
|---|---|---|---|---|
| Snap Yellow | #FFFC00 | Bright Yellow | #FFFD01 | 0.002 |
| Black | #000000 | Black | #000000 | Exact match |
| White | #FFFFFF | White | #FFFFFF | Exact match |
Palettes like Snapchat
Curated palettes that include a color close to Snapchat snap yellow #FFFC00.
How to use a Snapchat-style palette
- Lead with Snap Yellow #FFFC00 for buttons, links and key highlights, with black text on it.
- Give most of the layout to Black #000000 and White #FFFFFF, about 60% of the screen, so Snap Yellow stands out.
- With a single brand color, use tints and shades of Snap Yellow (the Tailwind scale above) instead of extra hues.
- As text on a white page, Snap Yellow reaches 1.09:1: it fails WCAG 2 for text there, so keep it for icons, fills and borders.
To see how www.snapchat.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Snap Yellow into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Facebook colors#0866FF #0064E0 #111112 #686A6E
- Discord colors#5865F2 #E0E3FF #000000
- Instagram colors#0095F6 #262626 #8E8E8E #FAFAFA
- TikTok colors#FE2C55 #2DCCD3 #000000 #FFFFFF
- X (Twitter) colors#000000 #FFFFFF #1D9BF0 #141414
- LinkedIn colors#0A66C2 #231F20 #FFFFFF
- Telegram colors#2AABEE #229ED9 #0088CC #2481CC
- WhatsApp colors#25D366 #43CD66 #103928 #FCF5EB
- Pinterest colors#E60023 #111111 #F3F3EF #FFFFFF
- Reddit colors#FF4500
- Tiffany colors#81D8D0 #000000 #00A4B7
- Pepsi colors#0000FE #0025FF #0E0E96 #FF1400
Trademarks
Frequently asked questions
What is the Snapchat hex color?
The main Snapchat color is Snap Yellow #FFFC00, which is rgb(255, 252, 0) in RGB. It comes from the CSS and SVG files of Snapchat's live website (Snapchat publishes no official hex values), checked on 16 October 2026.
What colors does Snapchat use?
Snapchat uses 3 core colors: Snap Yellow #FFFC00, Black #000000 and White #FFFFFF.
What is Snapchat snap yellow in RGB, HSL and OKLCH?
Snapchat snap yellow #FFFC00 is rgb(255, 252, 0), hsl(59, 100%, 50%) and oklch(96.2% 0.208 108.9). The closest named color is Bright Yellow #FFFD01.
Should text on Snapchat snap yellow be white or black?
Black text reads better on Snapchat snap yellow: it has a contrast ratio of 19.17:1, which passes WCAG AAA for any text size.
Where do these Snapchat colors come from?
The hex values were read from Snapchat's live website code at https://www.snap.com/brand-guidelines?lang=en-US on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Snapchat colors in my own design?
Colors on their own are not owned, but Snapchat's name, logo and the way it combines its colors are trademarks. Use these values to match Snapchat when you refer to it, follow its official guidelines, and do not imply a link to Snapchat in your own brand.
Use the Snapchat colors
Check www.snapchat.com live, build a color system from Snap Yellow, or remix the palette.