Letterboxd color palette
SocialLetterboxd uses a moody, cinematic palette dominated by deep charcoal, vibrant green, and subtle gray tones, reflecting its focus on film and community. The color system supports a dark UI with high-contrast highlights for navigation and interactive elements.
letterboxd.comLetterboxd colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Letterboxd CharcoalPrimary32, 40, 48
- Letterboxd SlateSecondary41, 48, 56
- Letterboxd GreenAccent0, 224, 84
Surfaces
Page, cards and dividers.- Letterboxd NightBackground24, 28, 32
- Letterboxd PanelSurface35, 39, 43
- Letterboxd Border GrayBorder58, 67, 75
Text
Three tiers of copy.- Letterboxd WhiteText255, 255, 255
- Letterboxd Light GraySecondary text200, 208, 216
- Letterboxd Muted GrayMuted text122, 130, 136
Semantic
Feedback and state colors.- Letterboxd GreenSuccess0, 224, 84
- Letterboxd AmberWarning255, 183, 0
- Letterboxd RedError255, 60, 60
- Letterboxd BlueInfo0, 179, 255
Use Letterboxd's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
letterboxd-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B3FF;
--error: #FF3C3C;
--accent: #00E054;
--border: #3A434B;
--primary: #202830;
--success: #00E054;
--surface: #23272B;
--warning: #FFB700;
--secondary: #293038;
--text-muted: #7A8288;
--background: #181C20;
--text-primary: #FFFFFF;
--text-secondary: #C8D0D8;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.8:1
Pass
Letterboxd background, border and text colors
Letterboxd 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.
- Letterboxd NightBackground
- HEX
- RGB
- HSL
- Letterboxd PanelSurface
- HEX
- RGB
- HSL
- Letterboxd Border GrayBorder
- HEX
- RGB
- HSL
- Letterboxd WhiteText
- HEX
- RGB
- HSL
- Letterboxd Light GraySecondary text
- HEX
- RGB
- HSL
- Letterboxd Muted GrayMuted text
- HEX
- RGB
- HSL
About Letterboxd's colors
Letterboxd’s palette is rooted in dark, neutral tones with bright green and accent colors for emphasis. This supports a cinematic, immersive experience that prioritizes content and readability.
Primary and background colors are analogous dark neutrals.
Accent green contrasts with the dark UI for interactive elements.
Text colors provide high contrast for accessibility.
Psychology
The deep charcoal and slate tones evoke a sense of sophistication and focus, reminiscent of a movie theater environment. The vivid green accent signals action and positivity, drawing attention to calls to action.
Evolution
Letterboxd’s color palette has remained largely stable since launch, maintaining its signature dark mode aesthetic. Minor adjustments have been made to accent and gray tones for improved accessibility and clarity.
Where Letterboxd uses each color
- Primary
Used for the main navigation bar and app chrome.
- Secondary
Applied to dropdowns, modals, and secondary navigation elements.
- Accent
Highlights interactive elements such as buttons, links, and ratings.
- Backgrounds
Forms the base of all app screens and page backgrounds.
- Text
Primary text is white, with secondary and muted grays for less prominent information.
- Semantic
Success, warning, error, and info colors are used for notifications, badges, and status indicators.
Letterboxd color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Letterboxd primary color is #202830, known as Letterboxd Charcoal. It is used throughout the navigation and main UI backgrounds.
The primary color #202830 has an RGB value of (32, 40, 48). For print, its approximate CMYK equivalent is (33%, 17%, 0%, 81%).
Letterboxd uses #293038 (Letterboxd Slate) and #23272B (Letterboxd Panel) as key dark and gray tones in its interface. These colors provide depth and separation between UI elements.
The palette is designed for dark mode interfaces, with high-contrast text and vibrant accents for actions. Always use the specified hex codes to maintain brand consistency and accessibility.
The secondary color is Letterboxd Slate, #293038, and the accent is Letterboxd Green, #00E054. 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 Letterboxd's colors consistently when it generates UI.
Make something in the spirit of Letterboxd
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.