Sci-Fi Film Color Psychology & Meaning
Sci-fi film is the blue of screens and stars — the specific progression from near-black to electric blue that cinematographers use to signal technological futures, both hopeful and threatening.
#050520
#0A3A8A
#00AAFF
#AACCFF
Background
Primary Accent
Secondary
Body Text
Sci-Fi Film Color Palette
#050520 · #0A3A8A · #00AAFF · #AACCFF
AAA
WCAG Grade
12.2:1
Contrast Ratio
2,500
Saves
6,700
AI Copies
Use #050520 as the background. Use #0A3A8A as the primary accent. Use #00AAFF as secondary. Use #AACCFF as body text/supporting color. Palette mood: Sci-Fi Film — dark, futuristic, cool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Sci-Fi Film 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.2% | 5, 5, 32 | 84%, 84%, 0%, 87% | 240°, 73%, 7% | ||
| Primary Accent Luminance: 4.9% | 10, 58, 138 | 93%, 58%, 0%, 46% | 218°, 86%, 29% | ||
| Secondary Luminance: 36.0% | 0, 170, 255 | 100%, 33%, 0%, 0% | 200°, 100%, 50% | ||
| Body Text Luminance: 59.0% | 170, 204, 255 | 33%, 20%, 0%, 0% | 216°, 100%, 83% |
Sci-Fi Film Tints & Shades
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Sci-Fi Film palette — click any swatch to copy its hex.
#050520 saturated blue
#0A3A8A saturated blue
#00AAFF saturated cyan-blue
#AACCFF saturated blue
Sci-Fi Film Palette Contrast Matrix (WCAG 2.1)
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #AACCFF on #050520 |
Aa Sample Text
| 12.19:1 | AAA | Body text, headings, UI |
| #050520 on #AACCFF |
Aa Sample Text
| 12.19:1 | AAA | Body text, headings, UI |
| #00AAFF on #050520 |
Aa Sample Text
| 7.81:1 | AAA | Body text, headings, UI |
| #050520 on #00AAFF |
Aa Sample Text
| 7.81:1 | AAA | Body text, headings, UI |
| #AACCFF on #0A3A8A |
Aa Sample Text
| 6.44:1 | AA | Body text, UI |
| #0A3A8A on #AACCFF |
Aa Sample Text
| 6.44:1 | AA | Body text, UI |
| #00AAFF on #0A3A8A |
Aa Sample Text
| 4.13:1 | Fail | Large headings, UI components |
| #0A3A8A on #00AAFF |
Aa Sample Text
| 4.13:1 | Fail | Large headings, UI components |
| #0A3A8A on #050520 |
Aa Sample Text
| 1.89:1 | Fail | Decorative use only |
| #050520 on #0A3A8A |
Aa Sample Text
| 1.89:1 | Fail | Decorative use only |
| #AACCFF on #00AAFF |
Aa Sample Text
| 1.56:1 | Fail | Decorative use only |
| #00AAFF on #AACCFF |
Aa Sample Text
| 1.56:1 | Fail | Decorative use only |
Color Harmony: Custom Scheme
The Sci-Fi Film palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Science fiction film visual identity developed through 2001: A Space Odyssey (1968), Blade Runner (1982), and The Matrix (1999). The blue-on-dark system is now the most recognized 'future' visual signal.
Best Design Use Cases
Near-black blue for backgrounds. Deep blue for surfaces. Mid blue for interactive elements. Bright blue for primary accent and highlight moments.
Industries This Palette Suits
Sci-fi entertainment, tech companies, gaming, aerospace, futurism brands.
Colors That Pair Well With Sci-Fi Film
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
orange
directly opposite #0A3A8A on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
blue
30° beside #0A3A8A — a calm secondary that extends the palette without adding tension
tinted neutral
a paper-white carrying the palette's own hue — perfect for surfaces and dividers
Using Sci-Fi Film Without Breaking Accessibility
- Avoid #0A3A8A for small UI elements on #050520 — at 1.9:1 it misses the 3:1 WCAG threshold; darken it with a shade from the ramp below.
- Set body text in #AACCFF — 12.2:1 against #050520 passes WCAG AA (AAA) for long-form reading.
- Let #00AAFF carry sidebars, cards and footers — at a mid lightness it separates zones without stealing focus from #0A3A8A.
How to Implement the Sci-Fi Film Color Scheme
To use this Sci-Fi Film 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 #050520 for the main background and #0A3A8A for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #AACCFF and #050520 is 12.19:1 (AAA). Ensure your body text remains legible.
Sci-Fi Film Palette — Frequently Asked Questions
What are the hex codes in the Sci-Fi Film color palette?
The Sci-Fi Film palette contains #050520, #0A3A8A, #00AAFF, #AACCFF. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Is the Sci-Fi Film color palette accessible (WCAG)?
Yes for its strongest pairings: #AACCFF on #050520 reaches 12.2:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
What colors go well with the Sci-Fi Film palette?
Beyond its own four colors, #A66E0C, #211282, #EAEAF0 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
What mood does the Sci-Fi Film palette create?
Sci-Fi Film reads as dark, futuristic, cool. Saturated blue drives the personality, grounded by saturated blue — a combination that works best when the deep base gets most of the canvas.
Can I use the Sci-Fi Film color palette commercially?
Yes. Individual color values can't be copyrighted, so the Sci-Fi Film palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
How do I add the Sci-Fi Film palette to Tailwind or CSS?
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Sci-Fi Film's exact values, including the tint and shade ramps shown above.