This palette is inspired by the vibrant and bold red and blue colors dominating the image, enhanced with soft support hues and grounded by strong neutrals for versatile brand usage.
This palette is inspired by the vibrant and bold red and blue colors dominating the image, enhanced with soft support hues and grounded by strong neutrals for versatile brand usage.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors provide a strong complementary contrast between a vivid blue and a dynamic red, establishing a bold and energetic visual identity that commands attention.
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 provide a strong complementary contrast between a vivid blue and a dynamic red, establishing a bold and energetic visual identity that commands attention.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Royal Blue conveys reliability, professionalism, and trust, making it an excellent base for brand recognition.
#0057D90, 87, 217216, 100, 43100, 60, 0, 15RolesBtn Secondary Bg
Crimson Red adds energy, urgency, and a sense of boldness, complementing Royal Blue with a striking contrast.
#D93030217, 48, 480, 69, 520, 78, 78, 15The support colors extend the main palette by softening the intensity with muted complementary and neutral shades, enabling more flexible and balanced design applications.
RolesIcon, Border, Divider, Outline
Soft Sky Blue complements Royal Blue by providing a lighter tone, useful for subtle accents and UI elements.
#A7C1F2167, 193, 242219, 74, 8031, 20, 0, 5Muted Brick Red supports Crimson Red by offering a less intense shade for secondary supporting elements and overlays.
#BC4646188, 70, 700, 47, 510, 63, 63, 26Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F1F1F1241, 241, 2410, 0, 950, 0, 0, 5RolesBg Dark, 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: #0057D9;
--color-crimson-red: #D93030;
--color-soft-sky-blue: #A7C1F2;
--color-muted-brick-red: #BC4646;
--color-pure-white: #FFFFFF;
--color-light-gray: #F1F1F1;
--color-charcoal-black: #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: #0057D9;
--role-link: #0057D9;
--role-btn-primary-bg: #0057D9;
--role-btn-outlined-border: #0057D9;
--role-btn-outlined-text: #0057D9;
--role-headline: #0057D9;
--role-btn-secondary-bg: #D93030;
--role-icon: #A7C1F2;
--role-border: #A7C1F2;
--role-divider: #A7C1F2;
--role-outline: #A7C1F2;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #1C1C1C;
--role-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": "#0057D9",
"crimson-red": "#D93030",
"soft-sky-blue": "#A7C1F2",
"muted-brick-red": "#BC4646",
"pure-white": "#FFFFFF",
"light-gray": "#F1F1F1",
"charcoal-black": "#1C1C1C"
}