This palette features a vibrant royal blue as the primary brand color, complemented by a rich goldenrod and a vivid cerulean to create an inviting and trustworthy digital presence. Soft gray and crisp white neutrals ensure readability and balance, while light sky blue and charcoal accents extend the palette subtly without overpowering the main colors.
This palette features a vibrant royal blue as the primary brand color, complemented by a rich goldenrod and a vivid cerulean to create an inviting and trustworthy digital presence. Soft gray and crisp white neutrals ensure readability and balance, while light sky blue and charcoal accents extend the palette subtly without overpowering the main colors.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The three main colors—royal blue, goldenrod, and cerulean—form a balanced triadic scheme, delivering vibrancy, warmth, and clarity that work harmoniously for a modern tech brand identity.
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 three main colors—royal blue, goldenrod, and cerulean—form a balanced triadic scheme, delivering vibrancy, warmth, and clarity that work harmoniously for a modern tech brand identity.
RolesLogo, Btn Primary Bg, Link
Royal Blue conveys trustworthiness and professionalism essential for brand recognition.
#0047AB0, 71, 171215, 100, 34100, 58, 0, 33RolesBtn Secondary Bg, Headline
Goldenrod adds warmth and energy to the palette, creating engaging highlights and calls to action.
#DAA520218, 165, 3243, 74, 490, 24, 85, 15RolesBtn Outlined Border, Btn Outlined Text
Cerulean provides a bright, fresh accent that complements and balances the warm goldenrod.
#00BFFF0, 191, 255195, 100, 50100, 25, 0, 0Support colors are muted blue-gray and off-white shades that subtly extend the main palette, maintaining visual hierarchy without competing for attention.
RolesIcon, Border, Divider, Outline
Slate Gray enhances icons and borders with a neutral tone that complements the main blues.
#7B8D99123, 141, 153204, 13, 5420, 8, 0, 40RolesBg Light
Light Sky Blue offers a soft background that underpins content and improves readability.
#E6F0FA230, 240, 250210, 67, 948, 4, 0, 2Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9FAFB249, 250, 251210, 20, 981, 0, 0, 2RolesText, Btn Secondary Text
#1F293731, 41, 55215, 28, 1744, 25, 0, 78Copy 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: #0047AB;
--color-goldenrod: #DAA520;
--color-cerulean: #00BFFF;
--color-slate-gray: #7B8D99;
--color-light-sky-blue: #E6F0FA;
--color-white: #FFFFFF;
--color-cultured: #F9FAFB;
--color-charcoal: #1F2937;
}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: #0047AB;
--role-btn-primary-bg: #0047AB;
--role-link: #0047AB;
--role-btn-secondary-bg: #DAA520;
--role-headline: #DAA520;
--role-btn-outlined-border: #00BFFF;
--role-btn-outlined-text: #00BFFF;
--role-icon: #7B8D99;
--role-border: #7B8D99;
--role-divider: #7B8D99;
--role-outline: #7B8D99;
--role-bg-light: #E6F0FA;
--role-bg-dark: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-text: #1F2937;
--role-btn-secondary-text: #1F2937;
}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": "#0047AB",
"goldenrod": "#DAA520",
"cerulean": "#00BFFF",
"slate-gray": "#7B8D99",
"light-sky-blue": "#E6F0FA",
"white": "#FFFFFF",
"cultured": "#F9FAFB",
"charcoal": "#1F2937"
}