Forest Campground Nature Color Palette for Outdoor and Hospitality |...

Forest Campground Nature Color Palette

This palette captures the serene and natural essence of a misty forest camping scene with deep forest green, muted moss green, and smoky gray as the main colors, complemented by accent colors representing earth and stone, and a balanced neutral set for clean usability and legibility.

CustomHospitality Eventsforest greenmisty graycampgroundnature palette

Main (Brand) Colors

The main colors form an analogous harmony of green and gray hues that evoke a calm, natural forest ambiance, providing a recognizable earthy identity for outdoor and hospitality brands.

PrimaryDark Slate Gray

RolesLogo, Btn Primary Bg, Btn Outlined Border

Dark Slate Gray conveys stability and depth reminiscent of dense forest shadows.

HEX#2F4F4F

RGB47, 79, 79

HSL180, 25, 25

CMYK41, 0, 0, 69

SecondaryOlive Drab

RolesLink, Headline, Btn Secondary Bg

Olive Drab injects an earthy, grounded feel symbolizing thriving moss and foliage.

HEX#556B2F

RGB85, 107, 47

HSL82, 39, 30

CMYK21, 0, 56, 58

TertiarySage

RolesBtn Outlined Text

Sage offers a muted, soft green accent that complements the darker greens without overpowering.

HEX#8F9779

RGB143, 151, 121

HSL76, 13, 53

CMYK5, 0, 20, 41

Support Colors

The support colors extend the main palette with natural, muted tones that represent earth and stone elements, enhancing the grounded and tranquil character of the palette while remaining visually subordinate.

Dark Gray

RolesIcon, Border, Divider, Outline

Dark Gray balances the greens with a cooler, neutral shade ideal for functional UI elements.

HEX#A9A9A9

RGB169, 169, 169

HSL0, 0, 66

CMYK0, 0, 0, 34

Silver

Silver adds a slightly lighter and softer gray tone for subtle highlights and text contrast.

HEX#C0C0C0

RGB192, 192, 192

HSL0, 0, 75

CMYK0, 0, 0, 25

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Cultured

RolesBg Dark

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Rich Black

RolesText

HEX#1C1C1C

RGB28, 28, 28

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Dark Slate Gray", "hex": "#2F4F4F", "role": "main", "cmyk": { "c": 41, "m": 0, "y": 0, "k": 69, "source": "colorfly" } }, { "name": "Olive Drab", "hex": "#556B2F", "role": "main", "cmyk": { "c": 21, "m": 0, "y": 56, "k": 58, "source": "colorfly" } }, { "name": "Sage", "hex": "#8F9779", "role": "main", "cmyk": { "c": 5, "m": 0, "y": 20, "k": 41, "source": "colorfly" } }, { "name": "Dark Gray", "hex": "#A9A9A9", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 34, "source": "colorfly" } }, { "name": "Silver", "hex": "#C0C0C0", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 25, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cultured", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Rich Black", "hex": "#1C1C1C", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-dark-slate-gray: #2F4F4F; --color-olive-drab: #556B2F; --color-sage: #8F9779; --color-dark-gray: #A9A9A9; --color-silver: #C0C0C0; --color-white: #FFFFFF; --color-cultured: #F5F5F5; --color-rich-black: #1C1C1C; }

:root { --role-logo: #2F4F4F; --role-btn-primary-bg: #2F4F4F; --role-btn-outlined-border: #2F4F4F; --role-link: #556B2F; --role-headline: #556B2F; --role-btn-secondary-bg: #556B2F; --role-btn-outlined-text: #8F9779; --role-icon: #A9A9A9; --role-border: #A9A9A9; --role-divider: #A9A9A9; --role-outline: #A9A9A9; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F5F5; --role-text: #1C1C1C; }

{ "dark-slate-gray": "#2F4F4F", "olive-drab": "#556B2F", "sage": "#8F9779", "dark-gray": "#A9A9A9", "silver": "#C0C0C0", "white": "#FFFFFF", "cultured": "#F5F5F5", "rich-black": "#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: #2F4F4F; --gradient-partner: #8D9E9E; --gradient-accent: #A9A9A9; --gradient-text: #FFFFFF; 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: #2F4F4F; --gradient-text-b: #8D9E9E; --gradient-text-c: #A9A9A9; 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>