This palette draws inspiration from the vibrant layers of orange and red clouds contrasted against the calm blue sky, balanced with subtle yellow and turquoise accents. The main colors create a dynamic and recognizable system featuring warm energetic hues paired with cool calming tones, ideal for brands seeking both vibrancy and balance.
This palette draws inspiration from the vibrant layers of orange and red clouds contrasted against the calm blue sky, balanced with subtle yellow and turquoise accents. The main colors create a dynamic and recognizable system featuring warm energetic hues paired with cool calming tones, ideal for brands seeking both vibrancy and balance.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine warm oranges and reds with a cool blue, creating a bold complementary palette that balances energy and calmness effectively.
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 warm oranges and reds with a cool blue, creating a bold complementary palette that balances energy and calmness effectively.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Tangerine brings energetic warmth and vibrancy, helping the brand stand out with bold confidence.
#E44C2B228, 76, 4311, 77, 530, 67, 81, 11RolesLink, Btn Secondary Bg, Headline
Amber adds bright optimism and complements the orange with a sunny, uplifting tone that enhances visibility.
#FF9B21255, 155, 3333, 100, 560, 39, 87, 0RolesBtn Outlined Text
Steel Blue offers a calming contrast that cools the palette, supporting readability and a sense of stability.
#407FAF64, 127, 175206, 46, 4763, 27, 0, 31Support colors soften and enrich the palette with muted shades of red and turquoise, providing accents that reinforce warmth and balance without overwhelming the main colors.
RolesIcon, Border, Divider, Outline
Burnt Sienna deepens the warm spectrum, adding depth and complementing the Tangerine and Amber tones.
#CB5A44203, 90, 6810, 56, 530, 56, 67, 20Turquoise introduces a gentle coolness that enhances Steel Blue, balancing the warm main colors with a fresh accent.
#6AC6C6106, 198, 198180, 45, 6046, 0, 0, 22Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesText, Btn Primary Text, Btn Secondary Text
#22222234, 34, 340, 0, 130, 0, 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-tangerine: #E44C2B;
--color-amber: #FF9B21;
--color-steel-blue: #407FAF;
--color-burnt-sienna: #CB5A44;
--color-turquoise: #6AC6C6;
--color-white: #FFFFFF;
--color-bright-gray: #F4F4F4;
--color-charcoal: #222222;
}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: #E44C2B;
--role-btn-primary-bg: #E44C2B;
--role-btn-outlined-border: #E44C2B;
--role-link: #FF9B21;
--role-btn-secondary-bg: #FF9B21;
--role-headline: #FF9B21;
--role-btn-outlined-text: #407FAF;
--role-icon: #CB5A44;
--role-border: #CB5A44;
--role-divider: #CB5A44;
--role-outline: #CB5A44;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F4F4F4;
--role-text: #222222;
--role-btn-primary-text: #222222;
--role-btn-secondary-text: #222222;
}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.{
"tangerine": "#E44C2B",
"amber": "#FF9B21",
"steel-blue": "#407FAF",
"burnt-sienna": "#CB5A44",
"turquoise": "#6AC6C6",
"white": "#FFFFFF",
"bright-gray": "#F4F4F4",
"charcoal": "#222222"
}