Film Noir Color Psychology & Meaning
Film noir is maximum contrast — the specific black-and-white of 1940s cinematography where shadows are as important as light, and moral ambiguity is visible in the key ratio.
#0A0A0A
#FFFFFF
#888888
#CCCCCC
Background
Primary Accent
Secondary
Body Text
Film Noir
moodydramaticclassic all filmbrandingeditorial
AAA
WCAG Grade
12.3:1
Contrast Ratio
2,100
Saves
5,600
AI Copies
Use #0A0A0A as the background. Use #FFFFFF as the primary accent. Use #888888 as secondary. Use #CCCCCC as body text/supporting color. Palette mood: Film Noir — moody, dramatic, classic.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Film Noir color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 0.3% | 10, 10, 10 | 0%, 0%, 0%, 96% | 0°, 0%, 4% | ||
| Primary Accent Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Secondary Luminance: 24.6% | 136, 136, 136 | 0%, 0%, 0%, 47% | 0°, 0%, 53% | ||
| Body Text Luminance: 60.4% | 204, 204, 204 | 0%, 0%, 0%, 20% | 0°, 0%, 80% |
Color Harmony: Analogous Scheme
The Film Noir palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Film noir as a visual style emerged in 1940s Hollywood from the influence of German Expressionist cinematography and hard-boiled detective fiction. The high-contrast black-and-white is its defining visual feature.
Best Design Use Cases
Pure black for dark sections and backgrounds. Pure white for content and contrast sections. Dark gray for mid-tones and secondary elements. Light gray for supporting content.
Industries This Palette Suits
Film companies, editorial design, photography, detective brands, moody consumer brands.
How to Implement the Film Noir Color Scheme
To use this Film Noir color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #0A0A0A for the main background and #FFFFFF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #CCCCCC and #0A0A0A is 12.33:1 (AAA). Ensure your body text remains legible.