This palette is inspired by the warm golden amber and deep black tones seen in the stylized wolf logo, creating a dynamic and elegant color system. The main colors balance energetic amber hues with strong black accents for brand recognition, while the support colors provide subtle warmth and neutrality to enhance usability and visual interest.
This palette is inspired by the warm golden amber and deep black tones seen in the stylized wolf logo, creating a dynamic and elegant color system. The main colors balance energetic amber hues with strong black accents for brand recognition, while the support colors provide subtle warmth and neutrality to enhance usability and visual interest.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a vivid warm amber with a deep black, creating strong visual contrast and brand recognition through complementary hues.
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 combine a vivid warm amber with a deep black, creating strong visual contrast and brand recognition through complementary hues.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Amber delivers warmth, energy, and vibrancy, evoking creativity and enthusiasm.
#FFAA33255, 170, 5135, 100, 600, 33, 80, 0RolesBtn Secondary Bg
Black offers depth, boldness, and a grounding force that balances and anchors the palette.
#0000000, 0, 00, 0, 00, 0, 0, 100The support colors extend the palette with softer warm tones and a warm gray, reinforcing the main amber while maintaining subtleness and usability across UI elements.
RolesIcon, Border, Divider, Outline
Light Amber complements the main amber by providing softer warm accents that enhance legibility and interface detail.
#FFD88C255, 216, 14040, 100, 770, 15, 45, 0Warm Brown adds earthy subtlety that balances the vivid amber and supports overall harmony.
#7B5E3C123, 94, 6032, 34, 360, 24, 51, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Primary 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-amber: #FFAA33;
--color-black: #000000;
--color-light-amber: #FFD88C;
--color-warm-brown: #7B5E3C;
--color-white: #FFFFFF;
--color-off-white: #F5F5F5;
--color-dark-charcoal: #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: #FFAA33;
--role-link: #FFAA33;
--role-btn-primary-bg: #FFAA33;
--role-btn-outlined-border: #FFAA33;
--role-btn-outlined-text: #FFAA33;
--role-headline: #FFAA33;
--role-btn-secondary-bg: #000000;
--role-icon: #FFD88C;
--role-border: #FFD88C;
--role-divider: #FFD88C;
--role-outline: #FFD88C;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #1C1C1C;
--role-btn-primary-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.{
"amber": "#FFAA33",
"black": "#000000",
"light-amber": "#FFD88C",
"warm-brown": "#7B5E3C",
"white": "#FFFFFF",
"off-white": "#F5F5F5",
"dark-charcoal": "#1C1C1C"
}