This dark fantasy-inspired palette uses saturated jewel tones against a deep, muted background to evoke mystery and immersive storytelling, ideal for a game software brand.
This dark fantasy-inspired palette uses saturated jewel tones against a deep, muted background to evoke mystery and immersive storytelling, ideal for a game software brand.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The rich, contrasting triadic jewel tones of deep Ruby Red, Nightshade Purple, and Forest Green create a distinctive system that communicates both the allure and depth of dark fantasy worlds.
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 rich, contrasting triadic jewel tones of deep Ruby Red, Nightshade Purple, and Forest Green create a distinctive system that communicates both the allure and depth of dark fantasy worlds.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Ruby Red provides an intense, passionate foundation that draws attention and conveys power and danger, fitting for the logo and primary interactive elements.
#8B0000139, 0, 00, 100, 270, 100, 100, 45RolesBtn Secondary Bg, Headline
Nightshade Purple offers a mysterious and magical tone that balances the red's energy while emphasizing fantasy and intrigue in headlines and secondary buttons.
#4B008275, 0, 130275, 100, 2542, 100, 0, 49RolesIcon, Border, Divider, Outline
Forest Green delivers an earthy, grounded accent that complements the jewel tones and supports interface elements without overpowering.
#0144211, 68, 33149, 97, 1499, 0, 51, 73The support colors subtly extend the main colors with a muted blue-gray to enhance the dark fantasy atmosphere and maintain visual harmony without competing for focus.
RolesBg Dark
Slate Gray adds a deep, muted background that enhances the jewel tones' vibrancy and reinforces the overall dark fantasy mood.
#2F4F4F47, 79, 79180, 25, 2541, 0, 0, 69Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#F8F8FF248, 248, 255240, 100, 993, 3, 0, 0#D3D3D3211, 211, 2110, 0, 830, 0, 0, 17RolesText
#20202032, 32, 320, 0, 130, 0, 0, 87Copy 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-ruby-red: #8B0000;
--color-nightshade-purple: #4B0082;
--color-forest-green: #014421;
--color-slate-gray: #2F4F4F;
--color-ghost-white: #F8F8FF;
--color-light-gray: #D3D3D3;
--color-charcoal: #202020;
}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: #8B0000;
--role-link: #8B0000;
--role-btn-primary-bg: #8B0000;
--role-btn-outlined-border: #8B0000;
--role-btn-outlined-text: #8B0000;
--role-btn-secondary-bg: #4B0082;
--role-headline: #4B0082;
--role-icon: #014421;
--role-border: #014421;
--role-divider: #014421;
--role-outline: #014421;
--role-bg-dark: #2F4F4F;
--role-bg-light: #F8F8FF;
--role-btn-primary-text: #F8F8FF;
--role-btn-secondary-text: #F8F8FF;
--role-text: #202020;
}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.{
"ruby-red": "#8B0000",
"nightshade-purple": "#4B0082",
"forest-green": "#014421",
"slate-gray": "#2F4F4F",
"ghost-white": "#F8F8FF",
"light-gray": "#D3D3D3",
"charcoal": "#202020"
}