Jade Green and Burgundy Color Palette for Premium Cannabis Brand

Jade Green And Color Palette

This strategic color palette blends rich, premium hues with streetwise tones, reflecting the hip hop and asiatique influences while emphasizing a handcrafted, premium cannabis USA product. The main colors establish brand identity with strong cultural connections and luxury cues, supported by subtle accents that enhance digital interface clarity and hierarchy, complemented by a modern neutral trio ensuring text readability across diverse backgrounds.

ComplementaryFood Beveragepremium cannabiship hop styleasiatiquestreetwear

Main (Brand) Colors

The jade green and deep burgundy form a complementary color scheme that balances vibrant energy with refined luxury, while gold adds a luminous premium accent to anchor the brand's affluent, streetwise character.

PrimaryJade Green

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

Jade Green conveys natural freshness and vitality, aligning with premium cannabis roots and street culture vibrancy.

HEX#00A86B

RGB0, 168, 107

HSL158, 100, 33

CMYK100, 0, 36, 34

SecondaryBurgundy

RolesBtn Secondary Bg, Headline

Burgundy adds richness and depth, embodying sophistication and the urban edge of hip hop style.

HEX#800020

RGB128, 0, 32

HSL345, 100, 25

CMYK0, 100, 75, 50

TertiaryGold

Gold provides a luminous highlight for premium appeal, reinforcing exclusivity and the artisanal feel of the brand.

HEX#D4AF37

RGB212, 175, 55

HSL46, 65, 52

CMYK0, 17, 74, 17

Support Colors

Soft charcoal and muted warm bronze tints gently support the main colors, extending the palette with subtle accents to balance vibrancy and maintain visual hierarchy without competition.

Charcoal

RolesIcon, Border, Divider, Outline

Charcoal offers a neutral dark shade that complements both main hues while maintaining readability and a grounded street vibe.

HEX#4B4947

RGB75, 73, 71

HSL30, 3, 29

CMYK0, 3, 5, 71

Warm Bronze

Warm Bronze introduces an earthy softness that balances gold's brightness and integrates the asiatique artisan aspect into the palette.

HEX#A9746E

RGB169, 116, 110

HSL6, 26, 55

CMYK0, 31, 35, 34

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

Ivory

RolesBg Dark

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal Black

RolesText, Btn Primary Text

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Jade Green", "hex": "#00A86B", "role": "main", "cmyk": { "c": 100, "m": 0, "y": 36, "k": 34, "source": "colorfly" } }, { "name": "Burgundy", "hex": "#800020", "role": "main", "cmyk": { "c": 0, "m": 100, "y": 75, "k": 50, "source": "colorfly" } }, { "name": "Gold", "hex": "#D4AF37", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 74, "k": 17, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#4B4947", "role": "support", "cmyk": { "c": 0, "m": 3, "y": 5, "k": 71, "source": "colorfly" } }, { "name": "Warm Bronze", "hex": "#A9746E", "role": "support", "cmyk": { "c": 0, "m": 31, "y": 35, "k": 34, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-jade-green: #00A86B; --color-burgundy: #800020; --color-gold: #D4AF37; --color-charcoal: #4B4947; --color-warm-bronze: #A9746E; --color-white: #FFFFFF; --color-ivory: #F5F5F5; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #00A86B; --role-link: #00A86B; --role-btn-primary-bg: #00A86B; --role-btn-outlined-text: #00A86B; --role-btn-outlined-border: #00A86B; --role-btn-secondary-bg: #800020; --role-headline: #800020; --role-icon: #4B4947; --role-border: #4B4947; --role-divider: #4B4947; --role-outline: #4B4947; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F5F5; --role-text: #1A1A1A; --role-btn-primary-text: #1A1A1A; }

{ "jade-green": "#00A86B", "burgundy": "#800020", "gold": "#D4AF37", "charcoal": "#4B4947", "warm-bronze": "#A9746E", "white": "#FFFFFF", "ivory": "#F5F5F5", "charcoal-black": "#1A1A1A" }

<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: #00A86B; --gradient-partner: #73CFAE; --gradient-accent: #4B4947; --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: #00A86B; --gradient-text-b: #3E705E; --gradient-text-c: #4B4947; 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>

Jade Green And Color Palette

Jade Green And Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Jade Green And Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system