This palette draws inspiration from the deep navy and crisp whites of the logo, balancing authoritative and trustworthy navy tones with clean neutrals and subtle supporting blues to create a professional and trustworthy identity.
This palette draws inspiration from the deep navy and crisp whites of the logo, balancing authoritative and trustworthy navy tones with clean neutrals and subtle supporting blues to create a professional and trustworthy identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine deep navy and mid-tone blue with clean whites to evoke professionalism, trust, and clarity suitable for a cinematic media brand.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors combine deep navy and mid-tone blue with clean whites to evoke professionalism, trust, and clarity suitable for a cinematic media brand.
RolesLogo, Link, Btn Primary Bg
Navy evokes professionalism, authority, and trust, grounding the brand with a cinematic depth.
#0B1F3F11, 31, 63217, 70, 1583, 51, 0, 75RolesBtn Secondary Bg, Headline
Steel Blue adds a dynamic but calm accent that complements navy and supports versatility.
#2E4A7D46, 74, 125219, 46, 3463, 41, 0, 51RolesBtn Outlined Text
Pure White ensures high contrast and clarity for text and button elements, maintaining readability.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0The support colors extend the main palette with muted blues that balance the navy without competing for attention, creating visual hierarchy and refinement.
RolesIcon, Border, Divider, Outline
Slate Blue provides subtle accents and functional elements that harmonize with the deeper blues.
#4A6FA574, 111, 165216, 38, 4755, 33, 0, 35RolesBg Light
Light Periwinkle serves as a gentle and clean background tone that supports the main colors.
#DDE6F2221, 230, 242214, 45, 919, 5, 0, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark, Btn Primary Text, Btn Secondary Text
#F7F9FC247, 249, 252216, 45, 982, 1, 0, 1RolesBtn Outlined Border
#B1B9C8177, 185, 200219, 17, 7412, 8, 0, 22RolesText
#1B1F2727, 31, 39220, 18, 1331, 21, 0, 85Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-navy: #0B1F3F;
--color-steel-blue: #2E4A7D;
--color-pure-white: #FFFFFF;
--color-slate-blue: #4A6FA5;
--color-light-periwinkle: #DDE6F2;
--color-off-white: #F7F9FC;
--color-cool-gray: #B1B9C8;
--color-charcoal: #1B1F27;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #0B1F3F;
--role-link: #0B1F3F;
--role-btn-primary-bg: #0B1F3F;
--role-btn-secondary-bg: #2E4A7D;
--role-headline: #2E4A7D;
--role-btn-outlined-text: #FFFFFF;
--role-icon: #4A6FA5;
--role-border: #4A6FA5;
--role-divider: #4A6FA5;
--role-outline: #4A6FA5;
--role-bg-light: #DDE6F2;
--role-bg-dark: #F7F9FC;
--role-btn-primary-text: #F7F9FC;
--role-btn-secondary-text: #F7F9FC;
--role-btn-outlined-border: #B1B9C8;
--role-text: #1B1F27;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"navy": "#0B1F3F",
"steel-blue": "#2E4A7D",
"pure-white": "#FFFFFF",
"slate-blue": "#4A6FA5",
"light-periwinkle": "#DDE6F2",
"off-white": "#F7F9FC",
"cool-gray": "#B1B9C8",
"charcoal": "#1B1F27"
}