This palette draws inspiration from the vibrant royal blue in the image, complemented by soft sky blue and warm coral for accents, paired with balanced neutrals to ensure readability and versatility across digital and print mediums.
This palette draws inspiration from the vibrant royal blue in the image, complemented by soft sky blue and warm coral for accents, paired with balanced neutrals to ensure readability and versatility across digital and print mediums.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine dominant royal blue with bright coral and a calm sky blue, providing energetic contrast and balanced harmony for a distinctive creative 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 combine dominant royal blue with bright coral and a calm sky blue, providing energetic contrast and balanced harmony for a distinctive creative brand presence.
RolesLogo, Link, Btn Primary Bg
Royal Blue conveys trust, professionalism, and vibrant energy, establishing strong brand recognition.
#2945FF41, 69, 255232, 100, 5884, 73, 0, 0RolesBtn Secondary Bg, Headline
Coral adds warmth and approachability, balancing the intensity of Royal Blue with inviting energy.
#FF6B61255, 107, 974, 100, 690, 58, 62, 0RolesBtn Outlined Border, Btn Outlined Text
Sky Blue softens the palette with a lighter tone, complementing Royal Blue while maintaining clarity and calmness.
#7FBFFF127, 191, 255210, 100, 7550, 25, 0, 0The support colors extend the palette with gentle neutral blues that enhance usability and interface elements without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Pale Cornflower reinforces the blue hues gently and provides subtle visual separation and detail.
#A3BFFF163, 191, 255222, 100, 8236, 25, 0, 0Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F7FA244, 247, 250210, 37, 972, 1, 0, 2RolesText, 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-royal-blue: #2945FF;
--color-coral: #FF6B61;
--color-sky-blue: #7FBFFF;
--color-pale-cornflower: #A3BFFF;
--color-white: #FFFFFF;
--color-light-mist: #F4F7FA;
--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: #2945FF;
--role-link: #2945FF;
--role-btn-primary-bg: #2945FF;
--role-btn-secondary-bg: #FF6B61;
--role-headline: #FF6B61;
--role-btn-outlined-border: #7FBFFF;
--role-btn-outlined-text: #7FBFFF;
--role-icon: #A3BFFF;
--role-border: #A3BFFF;
--role-divider: #A3BFFF;
--role-outline: #A3BFFF;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F4F7FA;
--role-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.{
"royal-blue": "#2945FF",
"coral": "#FF6B61",
"sky-blue": "#7FBFFF",
"pale-cornflower": "#A3BFFF",
"white": "#FFFFFF",
"light-mist": "#F4F7FA",
"charcoal": "#1A1A1A"
}