SoundCloud
SoundCloud's brand palette built around the signature SoundCloud Orange — the saturated, near-vermillion accent that fills the waveform mark, the play button, and the primary CTA across the player and marketing surfaces. The brand is light-first historically (white-canvas player chrome) but renders comfortably on dark surfaces; the palette is trimmed: a single-color brand accent, deep near-black ink, and a small neutral scale for body text, dividers, and the waveform's quiet ranges.
10 swatches 15 light roles 15 dark roles
Swatches
soundcloud-orange
#FF8800
The signature SoundCloud accent — the waveform fill, the play button, and the primary CTA color.
soundcloud-red-orange
#FF3300
The deeper red-orange variant used in the gradient mark and on hover / active states.
soundcloud-orange-pressed
#E67300
Pressed / active state for the primary action — a darker step from the brand orange.
soundcloud-pantone
#F37422
Pantone 158 C — third-party-documented warm variant of the SoundCloud accent.
soundcloud-black
#111111
Primary text on the light canvas; deep ink for the wordmark on white.
soundcloud-charcoal
#333333
Secondary text and divider on the light canvas.
soundcloud-gray
#999999
Tertiary text, metadata, and quiet waveform regions.
soundcloud-gray-light
#CCCCCC
Divider lines and the unplayed waveform fill in the player UI.
soundcloud-surface
#F2F2F2
Subtle elevated surface on the light canvas — row hover, sidebar.
soundcloud-white
#FFFFFF
Canonical light canvas — the player chrome and marketing default.
Mode role mappings
Light mode (15 roles)
accent
→ soundcloud-orange accent-hover
→ soundcloud-red-orange background
→ soundcloud-white border
→ soundcloud-gray-light error
→ soundcloud-red-orange primary
→ soundcloud-orange primary-hover
→ soundcloud-orange-pressed success
→ soundcloud-orange surface
→ soundcloud-surface surface-elevated
→ soundcloud-white text-primary
→ soundcloud-black text-secondary
→ soundcloud-charcoal text-tertiary
→ soundcloud-gray warning
→ soundcloud-orange warning-hover
→ soundcloud-orange-pressed Dark mode (15 roles)
accent
→ soundcloud-orange accent-hover
→ soundcloud-red-orange background
→ soundcloud-black border
→ soundcloud-charcoal error
→ soundcloud-red-orange primary
→ soundcloud-orange primary-hover
→ soundcloud-red-orange success
→ soundcloud-orange surface
→ soundcloud-charcoal surface-elevated
→ soundcloud-gray text-primary
→ soundcloud-white text-secondary
→ soundcloud-gray-light text-tertiary
→ soundcloud-gray warning
→ soundcloud-orange warning-hover
→ soundcloud-orange-pressed Provenance
- Source
- https://htmlcolors.com/brand-color/soundcloud
- License
Proprietary — All Rights Reserved- Attribution
- SoundCloud, the SoundCloud wordmark, and the orange cloud / waveform mark are trademarks of SoundCloud Global Limited & Co. KG. The orange (#FF8800) and red-orange (#FF3300) values are published by htmlcolors.com as the two-color SoundCloud brand palette; brandcolorcode.com cross-references a Pantone 158 C approximation (#F37422). This atom uses the htmlcolors set as the canonical pair and treats #F37422 as a documented warm variant.
- Imported
-
2026-05-19 - Notes
- SoundCloud does not distribute a public brand-guidelines document with hex values. The orange / red-orange pair captured here is the most widely cross-cited representation of the SoundCloud accent across third-party brand-color aggregators. The black, white, and gray neutrals are captured from the public player UI's chrome.