This palette blends deep, vibrant blues and cyan tones to evoke a modern, tech-savvy feeling with bright accent colors balanced by soft, supportive blues and grounded by a trio of neutrals that provide visual clarity and contrast. The combination is harmonious and distinctive, inspired by the image's cool and luminous ambiance.
This palette blends deep, vibrant blues and cyan tones to evoke a modern, tech-savvy feeling with bright accent colors balanced by soft, supportive blues and grounded by a trio of neutrals that provide visual clarity and contrast. The combination is harmonious and distinctive, inspired by the image's cool and luminous ambiance.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine deep electric blue with vibrant cyan and bright aqua to create a luminous and energetic tech-inspired color harmony that is recognizable and fresh.
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 electric blue with vibrant cyan and bright aqua to create a luminous and energetic tech-inspired color harmony that is recognizable and fresh.
RolesLogo, Link, Btn Primary Bg
Royal Blue conveys trust and stability, making it ideal for a memorable logo and primary button background color.
#0B3D9111, 61, 145218, 86, 3192, 58, 0, 43RolesBtn Secondary Bg, Headline
Vivid Cyan adds a fresh and energetic vibe, providing strong contrast for readability on dark backgrounds and highlighting headlines.
#1AC6FF26, 198, 255195, 100, 5590, 22, 0, 0RolesBtn Outlined Border, Btn Outlined Text
Bright Aqua intensifies vibrancy and balances the deeper blues as secondary button text and outlined elements, enhancing visual interest.
#00D8FF0, 216, 255189, 100, 50100, 15, 0, 0Support colors offer softer tonal blues that complement the main vivid hues, reinforcing the palette with subtle accents and enhancing depth without overpowering.
RolesIcon, Border, Divider, Outline
Steel Blue provides a muted but related blue tone that adds depth and serves as subtle visual separators like borders and icons.
#176DAB23, 109, 171205, 76, 3887, 36, 0, 33RolesBg Dark
Sky Blue serves as a dark background that supports the main colors with a cooler, less saturated tone for interface backgrounds.
#4AA6DC74, 166, 220202, 68, 5866, 25, 0, 14Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesText, Btn Secondary Text
#10182016, 24, 32210, 33, 950, 25, 0, 87Copy 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-royal-blue: #0B3D91;
--color-vivid-cyan: #1AC6FF;
--color-bright-aqua: #00D8FF;
--color-steel-blue: #176DAB;
--color-sky-blue: #4AA6DC;
--color-white: #FFFFFF;
--color-alice-blue: #F5F7FA;
--color-charcoal: #101820;
}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: #0B3D91;
--role-link: #0B3D91;
--role-btn-primary-bg: #0B3D91;
--role-btn-secondary-bg: #1AC6FF;
--role-headline: #1AC6FF;
--role-btn-outlined-border: #00D8FF;
--role-btn-outlined-text: #00D8FF;
--role-icon: #176DAB;
--role-border: #176DAB;
--role-divider: #176DAB;
--role-outline: #176DAB;
--role-bg-dark: #4AA6DC;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-text: #101820;
--role-btn-secondary-text: #101820;
}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.{
"royal-blue": "#0B3D91",
"vivid-cyan": "#1AC6FF",
"bright-aqua": "#00D8FF",
"steel-blue": "#176DAB",
"sky-blue": "#4AA6DC",
"white": "#FFFFFF",
"alice-blue": "#F5F7FA",
"charcoal": "#101820"
}