This palette captures Astarion's vampiric elegance with deep crimson and muted silvers, contrasted by a pale ivory that mirrors his haunting charisma and shadowy nature, balanced with soft grays for versatility in digital interfaces.
This palette captures Astarion's vampiric elegance with deep crimson and muted silvers, contrasted by a pale ivory that mirrors his haunting charisma and shadowy nature, balanced with soft grays for versatility in digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The three main colors blend a rich Crimson symbolizing vampiric allure, a refined Silver-gray evoking his noble and stealthy traits, and a soft Ivory reflecting the ethereal pallor of his character, forming a memorable and harmonious trio that defines this brand palette.
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 three main colors blend a rich Crimson symbolizing vampiric allure, a refined Silver-gray evoking his noble and stealthy traits, and a soft Ivory reflecting the ethereal pallor of his character, forming a memorable and harmonious trio that defines this brand palette.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Crimson embodies the intense passion and danger central to Astarion's vampiric identity.
#9B111E155, 17, 30354, 80, 340, 89, 81, 39RolesHeadline, Icon, Border, Divider, Outline, Btn Secondary Bg
Silver conveys stealth and grace, complementing Crimson with a muted, elegant tone.
#B0BFC9176, 191, 201204, 19, 7412, 5, 0, 21Ivory reflects Astarion's ghostly pallor, providing softness and contrast to darker hues.
#E6E1D3230, 225, 21144, 28, 860, 2, 8, 10The support colors introduce cooler and slightly muted blues and grays to extend the palette subtly, enhancing readability and adding depth without detracting from the main colors' intensity.
Slate Blue supports the palette by adding a cool, subdued contrast that balances the warmth of Crimson.
#6B7B8C107, 123, 140211, 13, 4824, 12, 0, 45Smoky Gray complements Silver by grounding the palette with a low-saturation tone for interface elements.
#8A8D91138, 141, 145214, 3, 555, 3, 0, 43Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#2B2B2B43, 43, 430, 0, 170, 0, 0, 83RolesBg Dark, Text, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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: #9B111E;
--color-silver: #B0BFC9;
--color-ivory: #E6E1D3;
--color-slate-blue: #6B7B8C;
--color-smoky-gray: #8A8D91;
--color-white: #FFFFFF;
--color-charcoal: #2B2B2B;
--color-rich-black: #1A1A1A;
}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: #9B111E;
--role-link: #9B111E;
--role-btn-primary-bg: #9B111E;
--role-btn-outlined-border: #9B111E;
--role-btn-outlined-text: #9B111E;
--role-headline: #B0BFC9;
--role-icon: #B0BFC9;
--role-border: #B0BFC9;
--role-divider: #B0BFC9;
--role-outline: #B0BFC9;
--role-btn-secondary-bg: #B0BFC9;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #1A1A1A;
--role-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
}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": "#9B111E",
"silver": "#B0BFC9",
"ivory": "#E6E1D3",
"slate-blue": "#6B7B8C",
"smoky-gray": "#8A8D91",
"white": "#FFFFFF",
"charcoal": "#2B2B2B",
"rich-black": "#1A1A1A"
}