Forest Mystic Green Color Palette for Magical College Branding

Main (Brand) Colors

The main colors combine harmonious forest greens and warm earthy browns to embody the magical and serene nature of a woodland college setting.

PrimaryPine Green

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

Pine Green conveys growth, harmony, and the depth of the forest, establishing a strong magical foundation.

HEX#2C5F2D

RGB44, 95, 45

HSL121, 37, 27

CMYK54, 0, 53, 63

SecondaryClay Brown

RolesHeadline, Btn Secondary Bg

Clay Brown provides warmth and grounding, reflecting the earthiness and peacefulness within the forest setting.

HEX#7D5A50

RGB125, 90, 80

HSL13, 22, 40

CMYK0, 28, 36, 51

Support Colors

Support colors extend the main palette with soft, natural tones that enrich the forest mood while maintaining visual balance and subtlety.

Sage

RolesIcon, Border, Divider, Outline

Sage adds a gentle, muted green to complement the deeper Pine Green and Clay Brown without overpowering them.

HEX#9DBF9E

RGB157, 191, 158

HSL122, 21, 68

CMYK18, 0, 17, 25

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F9F6F0

RGB249, 246, 240

HSL40, 43, 96

CMYK0, 1, 4, 2

Charcoal

RolesText

HEX#2A2A2A

RGB42, 42, 42

HSL0, 0, 16

CMYK0, 0, 0, 84

Sand

RolesBg Dark

HEX#E6E2D3

RGB230, 226, 211

HSL47, 28, 86

CMYK0, 2, 8, 10

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Pine Green", "hex": "#2C5F2D", "role": "main", "cmyk": { "c": 54, "m": 0, "y": 53, "k": 63, "source": "colorfly" } }, { "name": "Clay Brown", "hex": "#7D5A50", "role": "main", "cmyk": { "c": 0, "m": 28, "y": 36, "k": 51, "source": "colorfly" } }, { "name": "Sage", "hex": "#9DBF9E", "role": "support", "cmyk": { "c": 18, "m": 0, "y": 17, "k": 25, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F6F0", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 4, "k": 2, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2A2A2A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 84, "source": "colorfly" } }, { "name": "Sand", "hex": "#E6E2D3", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 8, "k": 10, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #2C5F2D; --role-link: #2C5F2D; --role-btn-primary-bg: #2C5F2D; --role-btn-outlined-border: #2C5F2D; --role-btn-outlined-text: #2C5F2D; --role-headline: #7D5A50; --role-btn-secondary-bg: #7D5A50; --role-icon: #9DBF9E; --role-border: #9DBF9E; --role-divider: #9DBF9E; --role-outline: #9DBF9E; --role-bg-light: #F9F6F0; --role-btn-primary-text: #F9F6F0; --role-btn-secondary-text: #F9F6F0; --role-text: #2A2A2A; --role-bg-dark: #E6E2D3; }

<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: #2C5F2D; --gradient-partner: #8BA78C; --gradient-accent: #9DBF9E; --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: #2C5F2D; --gradient-text-b: #8BA78C; --gradient-text-c: #556755; 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>