This palette is inspired by the strong contrasts and vibrant energy of the image, balancing bold warm hues with grounding neutrals for a powerful yet practical brand identity.
This palette is inspired by the strong contrasts and vibrant energy of the image, balancing bold warm hues with grounding neutrals for a powerful yet practical brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a dynamic complementary contrast between a vibrant yellow-gold and a deep black, making the palette immediately recognizable and visually striking.
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 dynamic complementary contrast between a vibrant yellow-gold and a deep black, making the palette immediately recognizable and visually striking.
RolesLogo, Link, Btn Primary Bg, Headline
Goldenrod conveys energy, warmth, and optimism, aligning with the sun-inspired vibrancy of the brand.
#FFC300255, 195, 046, 100, 500, 24, 100, 0RolesBg Dark
Raisin Black provides a bold grounding color that ensures strong readability and sophistication.
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Crimson adds an energetic and passionate accent that complements the golden primary and balances the darkness of the black.
#E63946230, 57, 70355, 78, 560, 75, 70, 10Support colors extend the main palette with warm and muted tones that provide visual balance and subtle emphasis without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Coral Sand offers a softer orange tone that harmonizes with Goldenrod and adds warmth and depth to accents.
#F4A261244, 162, 9727, 87, 670, 34, 60, 4Chocolate Brown adds an earthy, muted tone that supports the black while introducing a natural grounding element.
#7F5539127, 85, 5724, 38, 360, 33, 55, 50Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, 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-goldenrod: #FFC300;
--color-raisin-black: #1A1A1A;
--color-crimson: #E63946;
--color-coral-sand: #F4A261;
--color-chocolate-brown: #7F5539;
--color-pure-white: #FFFFFF;
--color-alabaster: #F5F5F5;
--color-off-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: #FFC300;
--role-link: #FFC300;
--role-btn-primary-bg: #FFC300;
--role-headline: #FFC300;
--role-bg-dark: #1A1A1A;
--role-btn-secondary-bg: #E63946;
--role-btn-outlined-border: #E63946;
--role-btn-outlined-text: #E63946;
--role-icon: #F4A261;
--role-border: #F4A261;
--role-divider: #F4A261;
--role-outline: #F4A261;
--role-bg-light: #FFFFFF;
--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.{
"goldenrod": "#FFC300",
"raisin-black": "#1A1A1A",
"crimson": "#E63946",
"coral-sand": "#F4A261",
"chocolate-brown": "#7F5539",
"pure-white": "#FFFFFF",
"alabaster": "#F5F5F5",
"off-black": "#121212"
}