This palette draws from the bright sky blue and fresh orange hues in the logo, balanced with soft aqua and teal accent colors and grounded by cool neutral shades, creating a vibrant yet professional digital identity.
This palette draws from the bright sky blue and fresh orange hues in the logo, balanced with soft aqua and teal accent colors and grounded by cool neutral shades, creating a vibrant yet professional digital identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors—vivid blue, bright orange, and fresh aqua—work harmoniously as an analogous palette with a complementary pop from the orange, creating a vibrant and engaging brand presence.
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—vivid blue, bright orange, and fresh aqua—work harmoniously as an analogous palette with a complementary pop from the orange, creating a vibrant and engaging brand presence.
RolesLogo, Link, Btn Primary Bg, Headline
Bright Blue generates trust and tech-savvy associations, serving as the core brand color.
#0099FF0, 153, 255204, 100, 50100, 40, 0, 0RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Orange brings energy and approachability, contrasting well with the blue.
#FF6600255, 102, 024, 100, 500, 60, 100, 0Aqua softens and freshens the palette, complementing the main blue and balancing the orange.
#33CCCC51, 204, 204180, 60, 5075, 0, 0, 20Support colors add depth and subtlety with teal and light aqua tones to balance vibrancy without competing with the main colors.
RolesIcon, Border, Divider, Outline
Deep Teal reinforces the brand with a calm, grounding accent that enhances readability and structure.
#0066660, 102, 102180, 100, 20100, 0, 0, 60Light Aqua provides a gentle highlight that extends the palette's freshness without overwhelming.
#99E6E6153, 230, 230180, 61, 7533, 0, 0, 10Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F2F2F2242, 242, 2420, 0, 950, 0, 0, 5RolesText, Btn Primary Text, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-bright-blue: #0099FF;
--color-orange: #FF6600;
--color-aqua: #33CCCC;
--color-deep-teal: #006666;
--color-light-aqua: #99E6E6;
--color-white: #FFFFFF;
--color-ivory: #F2F2F2;
--color-charcoal: #1A1A1A;
}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: #0099FF;
--role-link: #0099FF;
--role-btn-primary-bg: #0099FF;
--role-headline: #0099FF;
--role-btn-secondary-bg: #FF6600;
--role-btn-outlined-border: #FF6600;
--role-btn-outlined-text: #FF6600;
--role-icon: #006666;
--role-border: #006666;
--role-divider: #006666;
--role-outline: #006666;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F2F2F2;
--role-text: #1A1A1A;
--role-btn-primary-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
}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.{
"bright-blue": "#0099FF",
"orange": "#FF6600",
"aqua": "#33CCCC",
"deep-teal": "#006666",
"light-aqua": "#99E6E6",
"white": "#FFFFFF",
"ivory": "#F2F2F2",
"charcoal": "#1A1A1A"
}