This palette is inspired by the deep navy blue base and vibrant cyan accents from the jersey, complemented by soft neutrals offering balance and clarity. The combination creates a strong, modern, and sporty identity with clear hierarchy and readability.
This palette is inspired by the deep navy blue base and vibrant cyan accents from the jersey, complemented by soft neutrals offering balance and clarity. The combination creates a strong, modern, and sporty identity with clear hierarchy and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors include a bold deep navy as the grounding hue, a vivid cyan for dynamic accents, and an ice blue that softens and complements the palette's vibrancy creating a balanced yet energetic feel.
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 include a bold deep navy as the grounding hue, a vivid cyan for dynamic accents, and an ice blue that softens and complements the palette's vibrancy creating a balanced yet energetic feel.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border
Navy provides a solid, trustworthy foundation with its deep and classic presence symbolizing professionalism and resilience.
#0A1E3F10, 30, 63217, 73, 1484, 52, 0, 75RolesBtn Outlined Text, Btn Secondary Bg
Cyan adds vibrancy and energy, evoking freshness and modernity while contrasting sharply against navy.
#35C1D653, 193, 214188, 66, 5275, 10, 0, 16RolesHeadline
Ice Blue is a lighter cool tone that provides softness and balance, ensuring visual hierarchy and easing eye fatigue.
#A3D8F4163, 216, 244201, 79, 8033, 11, 0, 4The support colors expand the palette by introducing subtle grayish blues and muted aqua tones that reinforce the main colors without overpowering them, enhancing usability across digital and print applications.
RolesIcon, Border, Divider, Outline
Slate Blue is a subdued blue-gray that supports the main tones with neutrality, providing clear but understated accents.
#4D789077, 120, 144201, 30, 4347, 17, 0, 44Muted Aqua bridges the bright cyan and deep navy with a softened hue, maintaining harmony and reinforcing the sporty aesthetic.
#70BCCB112, 188, 203190, 47, 6245, 7, 0, 20Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F6FA245, 246, 250228, 33, 972, 2, 0, 2RolesText, Btn Secondary Text
#1B1B1B27, 27, 270, 0, 110, 0, 0, 89Copy 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: #0A1E3F;
--color-cyan: #35C1D6;
--color-ice-blue: #A3D8F4;
--color-slate-blue: #4D7890;
--color-muted-aqua: #70BCCB;
--color-white: #FFFFFF;
--color-snow: #F5F6FA;
--color-charcoal: #1B1B1B;
}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: #0A1E3F;
--role-link: #0A1E3F;
--role-btn-primary-bg: #0A1E3F;
--role-btn-outlined-border: #0A1E3F;
--role-btn-outlined-text: #35C1D6;
--role-btn-secondary-bg: #35C1D6;
--role-headline: #A3D8F4;
--role-icon: #4D7890;
--role-border: #4D7890;
--role-divider: #4D7890;
--role-outline: #4D7890;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F5F6FA;
--role-text: #1B1B1B;
--role-btn-secondary-text: #1B1B1B;
}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": "#0A1E3F",
"cyan": "#35C1D6",
"ice-blue": "#A3D8F4",
"slate-blue": "#4D7890",
"muted-aqua": "#70BCCB",
"white": "#FFFFFF",
"snow": "#F5F6FA",
"charcoal": "#1B1B1B"
}