← Palettes · [email protected]

Snapchat

Snapchat's brand palette is anchored on the signature Snapchat Yellow (#FFFC00) — the saturated near-fluorescent yellow that fills the entire ghost-mark canvas, the splash-screen background, and the primary CTA across the Snapchat app and snap.com marketing surfaces. The supporting palette is the published Snap Inc. brand-guidelines spectrum captured directly from the deployed snap.com/brand-guidelines CSS: a darker brand yellow (#FCF000), a warm yellow (#FFD301), pure black (#000000) for the ghost mark outline and wordmark, plus a small secondary scale (Snap blues #0096E5 / #049EEE, magentas #8936B6 / #C195DE, reds #E1143D / #C50A33, greens #00A179 / #00A881, oranges #E57200 / #FF8A00) used in the supporting Snap-Inc. product family.

23 swatches 15 light roles 15 dark roles snapchatsnapsocialyellowcommunicationsmobile-firstcamera

Swatches

snapchat-yellow

#FFFC00

Signature Snapchat near-fluorescent yellow — the brand's primary color, used as the ghost-mark canvas, the splash- screen background, and the primary CTA across the Snapchat app and snap.com marketing surfaces.

snapchat-yellow-dark

#FCF000

Slightly deeper brand yellow — used as the pressed / active variant of the primary CTA on the brand-guidelines surface.

snapchat-yellow-warm

#FFD301

Warm yellow — used in marketing illustration and secondary accents.

snapchat-yellow-pale

#FEFF85

Pale yellow tint — used as a hover wash on yellow surfaces.

snapchat-black

#000000

Pure black — used on the ghost-mark outline, the Snapchat wordmark, and as the primary text tone across the Snap Inc. brand surfaces.

snapchat-white

#FFFFFF

Pure white — surface fill on light marketing surfaces.

snapchat-blue

#0096E5

Snap secondary blue — used in product-family iconography (Snap Lens, Spectacles).

snapchat-blue-light

#049EEE

Lighter Snap blue — used in marketing illustration.

snapchat-blue-bright

#0EADFF

Bright Snap blue — used on hover states of blue surfaces.

snapchat-magenta

#8936B6

Snap secondary magenta — used in marketing illustration.

snapchat-magenta-light

#C195DE

Lighter Snap magenta accent.

snapchat-red

#E1143D

Snap secondary red — used on error / destructive affordances.

snapchat-red-deep

#C50A33

Deeper Snap red — pressed state on red affordances.

snapchat-green

#00A179

Snap secondary green — used on success affordances.

snapchat-green-light

#00A881

Lighter Snap green accent.

snapchat-orange

#E57200

Snap secondary orange — used in marketing illustration.

snapchat-orange-bright

#FF8A00

Brighter Snap orange — used on hover states.

snapchat-surface-light

#F1F1F1

Light-mode elevated surface on the brand-guidelines marketing site.

snapchat-border-light

#D9D9D9

Quiet divider on the marketing-site surface.

snapchat-text-secondary

#595959

Secondary text on light-mode surfaces.

snapchat-canvas-dark

#262626

Deep near-black — Snapchat's dark-mode chat/camera canvas tone, captured from the snap.com brand-guidelines dark stylesheet.

snapchat-surface-dark

#404040

Dark-mode elevated surface.

snapchat-text-on-dark

#FFFFFF

Primary text on the dark-mode canvas.

Mode role mappings

Light mode (15 roles)

accent → snapchat-yellow

accent-hover → snapchat-yellow-dark

background → snapchat-yellow

border → snapchat-border-light

error → snapchat-red

primary → snapchat-yellow

primary-hover → snapchat-yellow-dark

success → snapchat-green

surface → snapchat-white

surface-elevated → snapchat-yellow-pale

text-primary → snapchat-black

text-secondary → snapchat-text-secondary

text-tertiary → snapchat-text-secondary

warning → snapchat-orange

warning-hover → snapchat-orange-bright

Dark mode (15 roles)

accent → snapchat-yellow

accent-hover → snapchat-yellow-warm

background → snapchat-canvas-dark

border → snapchat-surface-dark

error → snapchat-red

primary → snapchat-yellow

primary-hover → snapchat-yellow-warm

success → snapchat-green-light

surface → snapchat-surface-dark

surface-elevated → snapchat-surface-dark

text-primary → snapchat-text-on-dark

text-secondary → snapchat-border-light

text-tertiary → snapchat-text-secondary

warning → snapchat-orange-bright

warning-hover → snapchat-orange

Provenance

Source: https://snap.com/en-US/brand-guidelines
Attribution: Snapchat and the Snapchat ghost logo are trademarks of Snap Inc. The Snap Inc. brand-guidelines page at snap.com/brand-guidelines is the canonical brand-portal entry. The signature Snapchat Yellow (#FFFC00) is exposed on the deployed brand-guidelines CSS, corroborated by the simple-icons brand database (citing snap.com). The supporting palette (#FCF000 brand-yellow-dark, #FFD301 warm yellow, #000000 Snap Black, blues #0096E5 / #049EEE, magentas #8936B6 / #C195DE, reds #E1143D / #C50A33, greens #00A179 / #00A881, oranges #E57200 / #FF8A00) was captured from the same deployed snap.com brand-guidelines stylesheet.
Imported: 2026-05-18
Notes: Derived from live site CSS at https://snap.com/brand-guidelines on 2026-05-18; the full Snap Inc. brand guidelines are distributed as a downloadable PDF (Snapchat_Web-Brand- Guidelines_September-2025.pdf) and not in the page's visible HTML, so the published-page CSS was the most direct grounded source. The Snapchat product surface itself is the canonical application of the brand — Snapchat Yellow (#FFFC00) fills the ghost-mark canvas, the launch splash, and the primary CTA. The proprietary brand typeface Program OT is declared on snap.com via @font-face but is not publicly distributed; Snap publishes Avenir Next as the licensed corporate typeface for marketing applications. This atom is paired in the brand atom with Inter@1 as the open-source rendering substitute for both.