SoundCloud color palette
EntertainmentSoundCloud's color identity is defined by its vibrant orange, supported by a minimal palette of dark and light neutrals for high contrast and clarity. The palette is optimized for digital interfaces and music-focused branding.
soundcloud.comSoundCloud colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- SoundCloud OrangePrimary255, 85, 0
- SoundCloud Orange LightSecondary255, 119, 0
- SoundCloud Accent YellowAccent255, 170, 0
Surfaces
Page, cards and dividers.- SoundCloud WhiteBackground255, 255, 255
- SoundCloud Light GraySurface242, 242, 242
- SoundCloud Border GrayBorder229, 229, 229
Text
Three tiers of copy.- SoundCloud CharcoalText34, 34, 34
- SoundCloud Medium GraySecondary text102, 102, 102
- SoundCloud Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- SoundCloud Success GreenSuccess60, 184, 120
- SoundCloud Warning YellowWarning255, 177, 0
- SoundCloud Error RedError255, 51, 51
- SoundCloud Info BlueInfo0, 159, 227
Use SoundCloud's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
soundcloud-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FE3;
--error: #FF3333;
--accent: #FFAA00;
--border: #E5E5E5;
--primary: #FF5500;
--success: #3CB878;
--surface: #F2F2F2;
--warning: #FFB100;
--secondary: #FF7700;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #222222;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
SoundCloud gray and neutral colors
The quiet part of the SoundCloud palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- SoundCloud WhiteBackground
- HEX
- RGB
- HSL
- SoundCloud Light GraySurface
- HEX
- RGB
- HSL
- SoundCloud Border GrayBorder
- HEX
- RGB
- HSL
- SoundCloud CharcoalText
- HEX
- RGB
- HSL
- SoundCloud Medium GraySecondary text
- HEX
- RGB
- HSL
- SoundCloud Muted GrayMuted text
- HEX
- RGB
- HSL
About SoundCloud's colors
SoundCloud's palette is anchored by a bold orange, contrasted with neutral grays and whites for clarity and accessibility. The supporting colors are used sparingly to maintain focus on content and brand recognition.
Primary orange is complemented by lighter orange and yellow accents.
Neutral grays provide structure and readability.
Accent colors are reserved for semantic feedback and interactive elements.
Psychology
Orange conveys energy, creativity, and approachability, aligning with SoundCloud's community-driven music platform. The neutral tones ensure the vibrant orange stands out and content remains legible.
Evolution
The core orange has remained consistent since SoundCloud's early years, reinforcing strong brand recognition. Over time, the UI neutrals have been refined for better accessibility and modern digital standards.
Where SoundCloud uses each color
- Primary
Used for the logo, primary buttons, and key highlights across the website and mobile app.
- Secondary
Appears in gradients, hover states, and promotional banners.
- Accent
Used for notifications, highlights, and subtle UI cues.
- Backgrounds
White and light gray backgrounds dominate app screens and web pages for clarity.
- Text
Charcoal and gray tones are used for all primary, secondary, and muted text.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and informational messages.
SoundCloud color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official SoundCloud primary color is #FF5500, known as SoundCloud Orange. This color is used for the logo and key branding elements.
SoundCloud Orange (#FF5500) is RGB(255, 85, 0) and CMYK(0, 67, 100, 0). Always use the hex code for digital applications.
SoundCloud uses #222222 (SoundCloud Charcoal), #666666 (Medium Gray), and #F2F2F2 (Light Gray) for text and backgrounds. These neutrals ensure content legibility and a clean interface.
Use SoundCloud Orange (#FF5500) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for alerts, notifications, and UI feedback.
The secondary color is SoundCloud Orange Light, #FF7700, and the accent is SoundCloud Accent Yellow, #FFAA00. 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 SoundCloud's colors consistently when it generates UI.
Make something in the spirit of SoundCloud
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.