Tidal color palette
EntertainmentTidal's brand color system centers on a minimalist, high-contrast palette, led by deep black and crisp white, with subtle cool grays and blue accents. This scheme reflects the brand's premium, music-focused identity and modern digital interface.
tidal.comTidal colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tidal BlackPrimary0, 0, 0
- Tidal WhiteSecondary255, 255, 255
- Tidal CyanAccent0, 255, 255
Surfaces
Page, cards and dividers.- Tidal Dark BackgroundBackground24, 24, 24
- Tidal Surface GraySurface35, 39, 42
- Tidal Border GrayBorder58, 58, 58
Text
Three tiers of copy.- Tidal Primary TextText255, 255, 255
- Tidal Secondary TextSecondary text179, 179, 179
- Tidal Muted TextMuted text106, 106, 106
Semantic
Feedback and state colors.- Tidal Success GreenSuccess30, 215, 96
- Tidal Warning YellowWarning255, 195, 0
- Tidal Error RedError255, 51, 51
- Tidal Info BlueInfo0, 153, 255
Use Tidal's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tidal-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #FF3333;
--accent: #00FFFF;
--border: #3A3A3A;
--primary: #000000;
--success: #1ED760;
--surface: #23272A;
--warning: #FFC300;
--secondary: #FFFFFF;
--text-muted: #6A6A6A;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.2:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Tidal gray, dark and neutral colors
Tidal runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Tidal Dark BackgroundBackground
- HEX
- RGB
- HSL
- Tidal Surface GraySurface
- HEX
- RGB
- HSL
- Tidal Border GrayBorder
- HEX
- RGB
- HSL
- Tidal Primary TextText
- HEX
- RGB
- HSL
- Tidal Secondary TextSecondary text
- HEX
- RGB
- HSL
- Tidal Muted TextMuted text
- HEX
- RGB
- HSL
About Tidal's colors
Tidal's palette uses high contrast between black and white, with cyan and blue accents for highlights and actions. The use of dark neutrals supports a premium, immersive music experience.
Primary black and white provide clarity and focus.
Cyan and blue accents draw attention to interactive elements.
Gray tones create depth and hierarchy in the UI.
Psychology
Black conveys sophistication and exclusivity, while cyan and blue accents evoke clarity and modernity. The palette supports a sense of premium quality and digital innovation.
Evolution
Tidal's color system has remained consistent since launch, with minor adjustments to accent and gray tones for accessibility and clarity. The core black-and-white identity has been stable throughout the brand's evolution.
Where Tidal uses each color
- Primary
Tidal Black is used for navigation bars, backgrounds, and the app shell.
- Secondary
Tidal White appears in text, icons, and highlights for maximum contrast.
- Accent
Tidal Cyan is used for active states, links, and key action buttons.
- Backgrounds
Tidal Dark Background and Surface Gray are used for app screens and content areas.
- Text
Primary and secondary text colors are used for titles, descriptions, and metadata throughout the platform.
- Semantic
Success, warning, error, and info colors are used for notifications, status indicators, and system messages.
Tidal color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Tidal primary color hex code is #000000. This black is used extensively across the brand's digital products.
The RGB value for Tidal Black (#000000) is (0, 0, 0). This pure black is the foundation of Tidal's visual identity.
Tidal uses several dark grays, including #181818 for backgrounds and #23272A for surfaces. These provide depth and separation without reducing contrast.
Use Tidal Black (#000000) for main backgrounds and navigation, with Tidal White (#FFFFFF) for text and icons. Accents like Tidal Cyan (#00FFFF) should highlight interactive elements and calls to action.
The secondary color is Tidal White, #FFFFFF, and the accent is Tidal Cyan, #00FFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Tidal's colors consistently when it generates UI.
Make something in the spirit of Tidal
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.