Showtime color palette
MediaShowtime uses a bold, high-contrast color system centered on its iconic red, paired with deep blacks and neutral grays for a cinematic, premium feel. The palette is designed for clarity and impact across digital and broadcast platforms.
showtime.comShowtime colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Showtime RedPrimary177, 0, 0
- Showtime WhiteSecondary255, 255, 255
- Cinematic ScarletAccent229, 9, 20
Surfaces
Page, cards and dividers.- Showtime BlackBackground24, 24, 24
- Slate OverlaySurface35, 35, 35
- Dark DividerBorder57, 57, 57
Text
Three tiers of copy.- Showtime WhiteText255, 255, 255
- Muted SilverSecondary text179, 179, 179
- Dim GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Success GreenSuccess46, 204, 64
- Alert YellowWarning255, 195, 0
- Showtime RedError177, 0, 0
- Info BlueInfo0, 153, 255
Use Showtime's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
showtime-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #B10000;
--accent: #E50914;
--border: #393939;
--primary: #B10000;
--success: #2ECC40;
--surface: #232323;
--warning: #FFC300;
--secondary: #FFFFFF;
--text-muted: #757575;
--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.7: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.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.9:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Showtime gray, dark and neutral colors
Showtime 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.
- Showtime BlackBackground
- HEX
- RGB
- HSL
- Slate OverlaySurface
- HEX
- RGB
- HSL
- Dark DividerBorder
- HEX
- RGB
- HSL
- Showtime WhiteText
- HEX
- RGB
- HSL
- Muted SilverSecondary text
- HEX
- RGB
- HSL
- Dim GrayMuted text
- HEX
- RGB
- HSL
About Showtime's colors
Showtime's color palette is built around a signature red, balanced by deep blacks and clean whites for high contrast and legibility. The system emphasizes drama and clarity, supporting the brand's cinematic identity.
Primary red is complemented by neutral black and white.
Accent scarlet highlights calls to action and key UI elements.
Grays provide depth and hierarchy in interface backgrounds and borders.
Psychology
Red evokes excitement, urgency, and passion, aligning with Showtime's entertainment focus. Black and gray tones convey sophistication and a premium, cinematic experience.
Evolution
Showtime's palette has remained consistent, with the red and black combination being a core part of its identity for decades. Minor adjustments have been made to grays and accent tones to improve digital accessibility.
Where Showtime uses each color
- Primary
Showtime Red is used for the logo, primary buttons, and key highlights across all platforms.
- Secondary
Showtime White is used for text, icons, and backgrounds to provide contrast.
- Accent
Cinematic Scarlet is applied to active states, badges, and promotional banners.
- Backgrounds
Showtime Black and Slate Overlay are used for app and website backgrounds, navigation bars, and overlays.
- Text
Showtime White and Muted Silver are used for primary and secondary text, while Dim Gray is used for muted or disabled text.
- Semantic
Success Green, Alert Yellow, and Showtime Red are used for status indicators, alerts, and error messages.
Showtime color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Showtime primary color hex code is #B10000. This red is used for the logo and key brand elements.
Showtime Red (#B10000) is RGB(177, 0, 0) and approximately CMYK(0, 100, 100, 31). These values ensure brand consistency across digital and print.
Showtime uses #181818 (Showtime Black), #232323 (Slate Overlay), and #393939 (Dark Divider) for backgrounds and borders. These provide depth and contrast in the UI.
Use Showtime Red (#B10000) for primary actions and branding, with white and grays for text and backgrounds. Accent and semantic colors should highlight important actions or statuses only.
The secondary color is Showtime White, #FFFFFF, and the accent is Cinematic Scarlet, #E50914. Together with the primary they make up the three brand colors at the top of this page.
6 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 Showtime's colors consistently when it generates UI.
Make something in the spirit of Showtime
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.