This palette is inspired by the primary colors and clean structure of the image, combining strong, recognizable hues to create a balanced and modern brand identity ideal for a professional tech-oriented presence.
This palette is inspired by the primary colors and clean structure of the image, combining strong, recognizable hues to create a balanced and modern brand identity ideal for a professional tech-oriented presence.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a triadic harmony with vivid red, yellow, and blue, providing strong visual energy, clarity, and trustworthiness that combine to create a cohesive and memorable brand system.
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 form a triadic harmony with vivid red, yellow, and blue, providing strong visual energy, clarity, and trustworthiness that combine to create a cohesive and memorable brand system.
RolesLogo, Btn Primary Bg, Link
Crimson Red commands attention and symbolizes energy and confidence, ideal for a strong brand presence.
#DA291C218, 41, 284, 77, 480, 81, 87, 15RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Canary Yellow adds brightness and optimism, creating friendly and accessible accents against stronger colors.
#FFD100255, 209, 049, 100, 500, 18, 100, 0RolesHeadline
Royal Blue conveys professionalism and trust, anchoring headlines with calm authority and balance.
#005CBF0, 92, 191211, 100, 37100, 52, 0, 25The support colors extend the main palette with softer, inviting shades that complement and balance the striking primary colors without competing, enriching the visual hierarchy.
RolesIcon, Border, Divider, Outline
Slate Gray provides subtle contrast for borders and icons to maintain clarity and structure without overpowering the main colors.
#7F8C8D127, 140, 141184, 6, 5310, 1, 0, 45RolesBg Light
Alabaster serves as a clean, near-white background that enhances legibility and lets vibrant colors stand out in UI or print.
#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesBg Dark, Text, Btn Secondary Text
#1B1B1B27, 27, 270, 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-crimson-red: #DA291C;
--color-canary-yellow: #FFD100;
--color-royal-blue: #005CBF;
--color-slate-gray: #7F8C8D;
--color-alabaster: #F4F4F4;
--color-white: #FFFFFF;
--color-eerie-black: #1B1B1B;
}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: #DA291C;
--role-btn-primary-bg: #DA291C;
--role-link: #DA291C;
--role-btn-secondary-bg: #FFD100;
--role-btn-outlined-border: #FFD100;
--role-btn-outlined-text: #FFD100;
--role-headline: #005CBF;
--role-icon: #7F8C8D;
--role-border: #7F8C8D;
--role-divider: #7F8C8D;
--role-outline: #7F8C8D;
--role-bg-light: #F4F4F4;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #1B1B1B;
--role-text: #1B1B1B;
--role-btn-secondary-text: #1B1B1B;
}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": "#DA291C",
"canary-yellow": "#FFD100",
"royal-blue": "#005CBF",
"slate-gray": "#7F8C8D",
"alabaster": "#F4F4F4",
"white": "#FFFFFF",
"eerie-black": "#1B1B1B"
}