This palette draws from the vibrant and natural colors of a blue-and-yellow macaw parrot, combining bold blues and warm yellows with earthy greens and neutrals for balance. It offers a lively yet grounded color system ideal for brands seeking a blend of energy and calm.
This palette draws from the vibrant and natural colors of a blue-and-yellow macaw parrot, combining bold blues and warm yellows with earthy greens and neutrals for balance. It offers a lively yet grounded color system ideal for brands seeking a blend of energy and calm.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors include a striking royal blue, a warm golden yellow, and a rich olive green, working together as an analogous palette to evoke natural vibrancy and harmony found in the wild.
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 striking royal blue, a warm golden yellow, and a rich olive green, working together as an analogous palette to evoke natural vibrancy and harmony found in the wild.
RolesLogo, Btn Primary Bg, Link
Royal Blue conveys reliability, energy, and serves as an engaging primary brand color.
#1177BB17, 119, 187204, 83, 4091, 36, 0, 27RolesBtn Secondary Bg, Headline
Golden Yellow brings warmth and optimism, enhancing attention and positive brand associations.
#F4B841244, 184, 6540, 89, 610, 25, 73, 4RolesBtn Outlined Border, Btn Outlined Text
Olive Green adds an earthy, grounded accent that balances the brighter main colors and supports natural harmony.
#6B8F4D107, 143, 7793, 30, 4325, 0, 46, 44The support colors provide softer, muted complements that extend the palette without overpowering the main hues, reinforcing usability and visual balance.
RolesIcon, Border, Divider, Outline
Soft Sky Blue offers a subtle and calm tone that complements Royal Blue while reducing visual harshness in UI elements.
#A3C1D1163, 193, 209201, 33, 7322, 8, 0, 18Light Sand introduces a warm neutral accent that harmonizes with Golden Yellow and supports earthy balance.
#D9C898217, 200, 15244, 46, 720, 8, 30, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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: #1177BB;
--color-golden-yellow: #F4B841;
--color-olive-green: #6B8F4D;
--color-soft-sky-blue: #A3C1D1;
--color-light-sand: #D9C898;
--color-pure-white: #FFFFFF;
--color-alabaster: #F5F5F5;
--color-charcoal: #2B2B2B;
}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: #1177BB;
--role-btn-primary-bg: #1177BB;
--role-link: #1177BB;
--role-btn-secondary-bg: #F4B841;
--role-headline: #F4B841;
--role-btn-outlined-border: #6B8F4D;
--role-btn-outlined-text: #6B8F4D;
--role-icon: #A3C1D1;
--role-border: #A3C1D1;
--role-divider: #A3C1D1;
--role-outline: #A3C1D1;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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": "#1177BB",
"golden-yellow": "#F4B841",
"olive-green": "#6B8F4D",
"soft-sky-blue": "#A3C1D1",
"light-sand": "#D9C898",
"pure-white": "#FFFFFF",
"alabaster": "#F5F5F5",
"charcoal": "#2B2B2B"
}