Silver Screen color palette
Classic black-and-white cinema in five steps: studio white #F5F5F5, light silver, mid gray, a dark #555555 and almost-black #111111. The gaps between steps are wide, so each jump is a clear change in tone, more dramatic than a fine gray scale. It gives photos and film stills a gallery feel. Filmmakers and photographers will get the most out of it.
Silver Screen palette in use
#111111 text on #F5F5F5 is the core pairing. #555555 suits secondary text and buttons, #CCCCCC borders and dividers, and #999999 icons and disabled states.
This pair measures 17.32:1, so it works for body text too. The button uses #CCCCCC with black text.
ButtonGood for
- Filmmaker portfolio
- Editorial magazine layout
- Photography gallery
- Architecture firm website
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#111111 | #F5F5F5 | 17.32:1 | AAA |
#111111 | #CCCCCC | 11.75:1 | AAA |
#555555 | #F5F5F5 | 6.83:1 | AA |
#111111 | #999999 | 6.62:1 | AA |
#555555 | #CCCCCC | 4.64:1 | AA |
Silver Screen palette as code
CSS variables
:root {
--silver-screen-1: #F5F5F5;
--silver-screen-2: #CCCCCC;
--silver-screen-3: #999999;
--silver-screen-4: #555555;
--silver-screen-5: #111111;
}Tailwind v4
@theme {
--color-silver-screen-1: #F5F5F5;
--color-silver-screen-2: #CCCCCC;
--color-silver-screen-3: #999999;
--color-silver-screen-4: #555555;
--color-silver-screen-5: #111111;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'silver-screen': {
100: '#F5F5F5',
200: '#CCCCCC',
300: '#999999',
400: '#555555',
500: '#111111',
},SCSS
$silver-screen-1: #F5F5F5;
$silver-screen-2: #CCCCCC;
$silver-screen-3: #999999;
$silver-screen-4: #555555;
$silver-screen-5: #111111;JSON
["#F5F5F5","#CCCCCC","#999999","#555555","#111111"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.