Amber Black Wolf Color Palette for Creative Brands

Amber Black Wolf Color Palette

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.

MonochromaticCreativeamberblackwolflogo

Main (Brand) Colors

The main colors combine a vivid warm amber with a deep black, creating strong visual contrast and brand recognition through complementary hues.

PrimaryAmber

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Amber delivers warmth, energy, and vibrancy, evoking creativity and enthusiasm.

HEX#FFAA33

RGB255, 170, 51

HSL35, 100, 60

CMYK0, 33, 80, 0

SecondaryBlack

RolesBtn Secondary Bg

Black offers depth, boldness, and a grounding force that balances and anchors the palette.

HEX#000000

RGB0, 0, 0

HSL0, 0, 0

CMYK0, 0, 0, 100

Support Colors

The 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.

Light Amber

RolesIcon, Border, Divider, Outline

Light Amber complements the main amber by providing softer warm accents that enhance legibility and interface detail.

HEX#FFD88C

RGB255, 216, 140

HSL40, 100, 77

CMYK0, 15, 45, 0

Warm Brown

Warm Brown adds earthy subtlety that balances the vivid amber and supports overall harmony.

HEX#7B5E3C

RGB123, 94, 60

HSL32, 34, 36

CMYK0, 24, 51, 52

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Off White

RolesBg Dark

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Dark Charcoal

RolesText, Btn Primary Text

HEX#1C1C1C

RGB28, 28, 28

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Amber", "hex": "#FFAA33", "role": "main", "cmyk": { "c": 0, "m": 33, "y": 80, "k": 0, "source": "colorfly" } }, { "name": "Black", "hex": "#000000", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 100, "source": "colorfly" } }, { "name": "Light Amber", "hex": "#FFD88C", "role": "support", "cmyk": { "c": 0, "m": 15, "y": 45, "k": 0, "source": "colorfly" } }, { "name": "Warm Brown", "hex": "#7B5E3C", "role": "support", "cmyk": { "c": 0, "m": 24, "y": 51, "k": 52, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Off White", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Dark Charcoal", "hex": "#1C1C1C", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

: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; }

: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; }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #FFAA33; --gradient-partner: #C28127; --gradient-accent: #FFD88C; --gradient-text: #000000; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #8A5C1C; --gradient-text-b: #C28127; --gradient-text-c: #998254; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>