This palette draws from the rich, vivid sunset hues and contrasting deep blues of the sky, creating a dynamic yet harmonious system. The main colors capture the dramatic and emotional essence of the colorful sky, with support colors reflecting the softer midtones to balance intensity, and neutrals providing the necessary grounding for text and backgrounds.
This palette draws from the rich, vivid sunset hues and contrasting deep blues of the sky, creating a dynamic yet harmonious system. The main colors capture the dramatic and emotional essence of the colorful sky, with support colors reflecting the softer midtones to balance intensity, and neutrals providing the necessary grounding for text and backgrounds.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a bold and recognizable triadic harmony by combining deep blue with vibrant orange and a rich purple, evoking the energy and drama of a sunset sky.
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 create a bold and recognizable triadic harmony by combining deep blue with vibrant orange and a rich purple, evoking the energy and drama of a sunset sky.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Royal Blue brings a strong, trustworthy presence that represents calm and reliability.
#2A3D9A42, 61, 154230, 57, 3873, 60, 0, 40RolesBtn Secondary Bg
Coral Orange adds warmth and energetic vibrancy, stimulating attention without overwhelming.
#EA6A47234, 106, 7113, 80, 600, 55, 70, 8Deep Lavender offers a sophisticated depth and emotional balance between the blue and orange hues.
#6B3F8F107, 63, 143273, 39, 4025, 56, 0, 44The support colors extend the main palette with softer, harmonious tones that echo the sky’s natural gradient, balancing vibrancy with subtlety.
RolesIcon, Border, Divider, Outline
Muted Lavender supports the palette with a gentle tone that complements Deep Lavender and softens the overall palette.
#8C7AA9140, 122, 169263, 21, 5717, 28, 0, 34Soft Apricot offers a lighter, more subdued warmth that balances the intensity of Coral Orange while maintaining a cohesive look.
#F6A983246, 169, 13120, 86, 740, 31, 47, 4Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FCFCFC252, 252, 2520, 0, 990, 0, 0, 1RolesBg Dark
#E4E4E4228, 228, 2280, 0, 890, 0, 0, 11RolesText, Btn Secondary Text
#1C1C1C28, 28, 280, 0, 110, 0, 0, 89Copy 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: #2A3D9A;
--color-coral-orange: #EA6A47;
--color-deep-lavender: #6B3F8F;
--color-muted-lavender: #8C7AA9;
--color-soft-apricot: #F6A983;
--color-ivory-white: #FCFCFC;
--color-light-gray: #E4E4E4;
--color-charcoal: #1C1C1C;
}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: #2A3D9A;
--role-link: #2A3D9A;
--role-btn-primary-bg: #2A3D9A;
--role-btn-outlined-border: #2A3D9A;
--role-btn-outlined-text: #2A3D9A;
--role-headline: #2A3D9A;
--role-btn-secondary-bg: #EA6A47;
--role-icon: #8C7AA9;
--role-border: #8C7AA9;
--role-divider: #8C7AA9;
--role-outline: #8C7AA9;
--role-bg-light: #FCFCFC;
--role-btn-primary-text: #FCFCFC;
--role-bg-dark: #E4E4E4;
--role-text: #1C1C1C;
--role-btn-secondary-text: #1C1C1C;
}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": "#2A3D9A",
"coral-orange": "#EA6A47",
"deep-lavender": "#6B3F8F",
"muted-lavender": "#8C7AA9",
"soft-apricot": "#F6A983",
"ivory-white": "#FCFCFC",
"light-gray": "#E4E4E4",
"charcoal": "#1C1C1C"
}