This palette combines vibrant warm tones with calm, cool blues to capture the energy and contrast in the image. The bright reds and oranges provide a strong, memorable brand presence, while the deep blue sky anchors the palette with calm authority. Support colors are muted shades derived from the main colors to enhance usability, and neutrals provide balance and readability.
This palette combines vibrant warm tones with calm, cool blues to capture the energy and contrast in the image. The bright reds and oranges provide a strong, memorable brand presence, while the deep blue sky anchors the palette with calm authority. Support colors are muted shades derived from the main colors to enhance usability, and neutrals provide balance and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors harmonize contrasting warm and cool tones, with vivid red-orange and bright yellow-orange balanced by a deep teal blue, making a striking, memorable combination.
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 harmonize contrasting warm and cool tones, with vivid red-orange and bright yellow-orange balanced by a deep teal blue, making a striking, memorable combination.
RolesLogo, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
This intense crimson red commands attention and energizes the brand presence.
#D84511216, 69, 1716, 85, 460, 68, 92, 15RolesLink, Btn Secondary Bg, Headline
Bright and lively amber orange brings warmth and positivity, reinforcing friendly communication.
#FDA930253, 169, 4835, 98, 590, 33, 81, 1Deep teal blue adds calm sophistication and balances the warmth with a grounded cool accent.
#0F749F15, 116, 159198, 83, 3491, 27, 0, 38Support colors extend the main palette with softer and muted variations, providing visual relief and flexibility without competing for attention.
RolesIcon, Border, Divider, Outline
Burnt sienna warms up the visual system subtly and complements the amber orange without overpowering.
#E6793D230, 121, 6121, 77, 570, 47, 73, 10Slate blue supports the teal with a muted, softer tone that helps balance the palette with understated calm.
#3E8AA662, 138, 166196, 46, 4563, 17, 0, 35Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#F9F6F1249, 246, 24138, 40, 960, 1, 3, 2#22222234, 34, 340, 0, 130, 0, 0, 87RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#12121218, 18, 180, 0, 70, 0, 0, 93Copy 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-crimson-red: #D84511;
--color-amber-orange: #FDA930;
--color-teal-blue: #0F749F;
--color-burnt-sienna: #E6793D;
--color-slate-blue: #3E8AA6;
--color-ivory: #F9F6F1;
--color-charcoal: #222222;
--color-near-black: #121212;
}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: #D84511;
--role-btn-primary-bg: #D84511;
--role-btn-outlined-border: #D84511;
--role-btn-outlined-text: #D84511;
--role-link: #FDA930;
--role-btn-secondary-bg: #FDA930;
--role-headline: #FDA930;
--role-icon: #E6793D;
--role-border: #E6793D;
--role-divider: #E6793D;
--role-outline: #E6793D;
--role-bg-light: #F9F6F1;
--role-bg-dark: #121212;
--role-text: #121212;
--role-btn-primary-text: #121212;
--role-btn-secondary-text: #121212;
}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.{
"crimson-red": "#D84511",
"amber-orange": "#FDA930",
"teal-blue": "#0F749F",
"burnt-sienna": "#E6793D",
"slate-blue": "#3E8AA6",
"ivory": "#F9F6F1",
"charcoal": "#222222",
"near-black": "#121212"
}