Deep Blue and Lime Green Refreshing Health Color Palette

Deep Blue Lime Color Palette

This palette is inspired by the contrast of deep blue and vibrant lime green from the packaging, balanced with fresh yellow accents and grounded by soft neutrals for clarity and usability. It delivers a modern, energetic, and refreshing brand identity suitable for health, wellness, or active lifestyle products.

Split ComplementaryHealth Wellnessbluelime greenyellowfresh

Main (Brand) Colors

The deep blue and vibrant lime green create a complementary color scheme that balances energy and trustworthiness, making the palette recognizable and dynamic.

PrimaryNavy Blue

RolesLogo, Btn Primary Bg, Btn Outlined Border

Navy Blue conveys trust, professionalism, and stability essential for a confident brand image.

HEX#182B63

RGB24, 43, 99

HSL225, 61, 24

CMYK76, 57, 0, 61

SecondaryLime Green

RolesLink, Btn Secondary Bg, Btn Outlined Text

Lime Green injects freshness, energy, and vitality, perfect for evoking health and activity.

HEX#A4C639

RGB164, 198, 57

HSL74, 55, 50

CMYK17, 0, 71, 22

TertiaryGolden Yellow

RolesHeadline

Golden Yellow adds warmth and optimism, drawing attention effectively without overwhelming.

HEX#F1D735

RGB241, 215, 53

HSL52, 87, 58

CMYK0, 11, 78, 5

Support Colors

The support colors extend the palette with muted blue-green and soft teal tones that complement the main colors by adding subtle depth and calming balance without competing.

Slate Teal

RolesIcon, Border, Divider

Slate Teal blends blue and green undertones to softly reinforce the main blue and green hues, enhancing visual cohesion.

HEX#406B6B

RGB64, 107, 107

HSL180, 25, 34

CMYK40, 0, 0, 58

Pale Aqua

RolesOutline

Pale Aqua provides a gentle highlight that balances and freshens the palette for interface usability.

HEX#D6EAEA

RGB214, 234, 234

HSL180, 32, 88

CMYK9, 0, 0, 8

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Light Gray

RolesBg Dark

HEX#E6E6E6

RGB230, 230, 230

HSL0, 0, 90

CMYK0, 0, 0, 10

Charcoal Black

RolesText, Btn Secondary 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": "Navy Blue", "hex": "#182B63", "role": "main", "cmyk": { "c": 76, "m": 57, "y": 0, "k": 61, "source": "colorfly" } }, { "name": "Lime Green", "hex": "#A4C639", "role": "main", "cmyk": { "c": 17, "m": 0, "y": 71, "k": 22, "source": "colorfly" } }, { "name": "Golden Yellow", "hex": "#F1D735", "role": "main", "cmyk": { "c": 0, "m": 11, "y": 78, "k": 5, "source": "colorfly" } }, { "name": "Slate Teal", "hex": "#406B6B", "role": "support", "cmyk": { "c": 40, "m": 0, "y": 0, "k": 58, "source": "colorfly" } }, { "name": "Pale Aqua", "hex": "#D6EAEA", "role": "support", "cmyk": { "c": 9, "m": 0, "y": 0, "k": 8, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#E6E6E6", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 10, "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-navy-blue: #182B63; --color-lime-green: #A4C639; --color-golden-yellow: #F1D735; --color-slate-teal: #406B6B; --color-pale-aqua: #D6EAEA; --color-pure-white: #FFFFFF; --color-light-gray: #E6E6E6; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #182B63; --role-btn-primary-bg: #182B63; --role-btn-outlined-border: #182B63; --role-link: #A4C639; --role-btn-secondary-bg: #A4C639; --role-btn-outlined-text: #A4C639; --role-headline: #F1D735; --role-icon: #406B6B; --role-border: #406B6B; --role-divider: #406B6B; --role-outline: #D6EAEA; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #E6E6E6; --role-text: #1A1A1A; --role-btn-secondary-text: #1A1A1A; }

{ "navy-blue": "#182B63", "lime-green": "#A4C639", "golden-yellow": "#F1D735", "slate-teal": "#406B6B", "pale-aqua": "#D6EAEA", "pure-white": "#FFFFFF", "light-gray": "#E6E6E6", "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: #182B63; --gradient-partner: #808AA9; --gradient-accent: #406B6B; --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: #182B63; --gradient-text-b: #808AA9; --gradient-text-c: #406B6B; 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>

Deep Blue Lime Color Palette

Deep Blue Lime 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

Deep Blue Lime 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