Electric Lime Charcoal Color Palette for Modern Tech Branding | Color...

Electric Lime#D7F20A

Ink Black#111111

Olive Graphite#4F5B2A

Steel Slate#70808D

Moss Neutral#8B9463

Palette direction

Electric Lime Charcoal Color Palette

A high-contrast lime-and-ink system built around a sharp electric accent, grounded by deep charcoal and softened with muted olive and slate support tones. It feels modern, editorial, and technically precise while staying flexible enough for brand, product, and interface use.

MonochromaticTechelectric limecharcoaleditorialhigh contrast

Desktop website

Electric Lime Charcoal Color Palette

https://Colorfly.design

Tech color direction

Electric Lime Charcoal Color Palette

A high-contrast lime-and-ink system built around a sharp electric accent, grounded by deep charcoal and softened with muted olive and slate support tones. It feels modern, editorial, and technically precise while staying flexible enough for brand, product, and interface use.

Explore the color system View examples Guidelines

Browser tab & favicon

Electric Lime Charcoal Color Palette

https://Colorfly.design

16px source shown at 4x Favicon inspection

Check whether the symbol stays distinct before it reaches the browser tab.

Instagram post

colorfly

Logo color pairings

18.9:1

18.9:1

15.6:1

Logo pattern

Gradients

Mobile website

9:41

Tech Electric Lime Charcoal Color Palette

The main colors pair an electric lime with grounded darks and a restrained olive, creating a recognizable system that feels sharp rather than generic. The contrast gives the palette a bold digital edge while keeping the overall structure in

iPhone app icon

9:41

Wednesday, July 109:41

Email signature

New message

Tohello@client.com

SubjectColor direction and next steps

Hi Jordan,

Here is the refined color direction we discussed. The system is ready for review.

Avery StonePalette designeravery@colorfly.comhttps://Colorfly.design

Analytics system

Pie, bar, and trend charts reveal whether the palette can support clear, expressive product interfaces.

Audience split

Monthly growth

Trend line

Continue to Color Roles

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Electric Lime #D7F20A

HeadlineUsed for main titles and key messages.Ink Black #111111

LinkUsed for links and interactive text.Olive Graphite #4F5B2A

Buttons

Primary Button

Contrast15.64:1AA

BackgroundElectric Lime #D7F20A

TextDeep Near-Black #0A0A0A

Secondary Button

Contrast18.88:1AA

BackgroundInk Black #111111

TextPure White #FFFFFF

Outlined Button

Contrast7.34:1AA

BorderElectric Lime #D7F20A

TextOlive Graphite #4F5B2A

Interface

TextDefault readable body text.Deep Near-Black #0A0A0A

Bg LightLight page or section background.Pure White #FFFFFF

Bg DarkDark page or section background.Deep Near-Black #0A0A0A

IconSmall interface icons and marks.Steel Slate #70808D

BorderCards, inputs, and component borders.Steel Slate #70808D

DividerSubtle separators between content.Moss Neutral #8B9463

OutlineFocus rings and emphasis outlines.Moss Neutral #8B9463

Continue to Color Specs

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.

CMYK

Calculated CMYK

Electric LimeMain color - #D7F20A

CMYK

Calculated CMYK

Ink BlackMain color - #111111

CMYK

Calculated CMYK

Olive GraphiteMain color - #4F5B2A

CMYK

Calculated CMYK

Steel SlateSupport color - #70808D

CMYK

Calculated CMYK

Moss NeutralSupport color - #8B9463

CMYK

Calculated CMYK

Pure WhiteNeutral color - #FFFFFF

CMYK

Calculated CMYK

Soft PaperNeutral color - #F4F4EE

CMYK

Calculated CMYK

Deep Near-BlackNeutral color - #0A0A0A

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors pair an electric lime with grounded darks and a restrained olive, creating a recognizable system that feels sharp rather than generic. The contrast gives the palette a bold digital edge while keeping the overall structure in

PrimaryElectric Lime

RolesLogo, Btn Primary Bg, Btn Outlined Border

A vivid signal color that gives the brand instant recognition and strong action cues.

HEX#D7F20A

RGB215, 242, 10

HSL67, 92, 49

CMYK11, 0, 96, 5

PrimaryInk Black

RolesHeadline, Btn Secondary Bg

A near-black anchor that adds authority and makes the bright accent feel intentional.

HEX#111111

RGB17, 17, 17

HSL0, 0, 7

CMYK0, 0, 0, 93

SecondaryOlive Graphite

RolesLink, Btn Outlined Text

A muted green-olive that bridges the electric accent and the darker grounding tones.

HEX#4F5B2A

RGB79, 91, 42

HSL75, 37, 26

CMYK13, 0, 54, 64

Support Colors

The support accents extend the main palette with subdued, utility-driven tones that improve hierarchy without competing for attention. They keep the interface readable and give the

Steel Slate

RolesIcon, Border

A cool slate support tone that adds clarity for UI structure without stealing focus from the primary lime.

HEX#70808D

RGB112, 128, 141

HSL207, 11, 50

CMYK21, 9, 0, 45

Moss Neutral

RolesDivider, Outline

A softened moss accent that quietly reinforces the palette’s organic undertone and works well for subtle boundaries.

HEX#8B9463

RGB139, 148, 99

HSL71, 20, 48

CMYK6, 0, 33, 42

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Paper

HEX#F4F4EE

RGB244, 244, 238

HSL60, 21, 95

CMYK0, 0, 2, 4

Deep Near-Black

RolesBg Dark, Text, Btn Primary Text

HEX#0A0A0A

RGB10, 10, 10

HSL0, 0, 4

CMYK0, 0, 0, 96

Continue to Export

Export and Handoff

Copy palette values, role tokens, animated gradient snippets, and structured handoff data for websites, design systems, and client work.

Export logo in seconds

Click to copy and go to Logo Export on myLogo.review to export your logo files in seconds.

Use when: you want to send this palette into myLogo.review.

COLORFLY_PALETTE_V2
{
    "format": "colorfly_palette_v2",
    "source": "colorfly.design",
    "colors": [
        {
            "name": "Electric Lime",
            "hex": "#D7F20A",
            "role": "main",
            "cmyk": {
                "c": 11,
                "m": 0,
                "y": 96,
                "k": 5,
                "source": "colorfly"
            }
        },
        {
            "name": "Ink Black",
            "hex": "#111111",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 93,
                "source": "colorfly"
            }
        },
        {
            "name": "Olive Graphite",
            "hex": "#4F5B2A",
            "role": "main",
            "cmyk": {
                "c": 13,
                "m": 0,
                "y": 54,
                "k": 64,
                "source": "colorfly"
            }
        },
        {
            "name": "Steel Slate",
            "hex": "#70808D",
            "role": "support",
            "cmyk": {
                "c": 21,
                "m": 9,
                "y": 0,
                "k": 45,
                "source": "colorfly"
            }
        },
        {
            "name": "Moss Neutral",
            "hex": "#8B9463",
            "role": "support",
            "cmyk": {
                "c": 6,
                "m": 0,
                "y": 33,
                "k": 42,
                "source": "colorfly"
            }
        },
        {
            "name": "Pure White",
            "hex": "#FFFFFF",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 0,
                "source": "colorfly"
            }
        },
        {
            "name": "Soft Paper",
            "hex": "#F4F4EE",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 2,
                "k": 4,
                "source": "colorfly"
            }
        },
        {
            "name": "Deep Near-Black",
            "hex": "#0A0A0A",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 96,
                "source": "colorfly"
            }
        }
    ]
}
END_COLORFLY_PALETTE

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.

:root {
  --color-electric-lime: #D7F20A;
  --color-ink-black: #111111;
  --color-olive-graphite: #4F5B2A;
  --color-steel-slate: #70808D;
  --color-moss-neutral: #8B9463;
  --color-pure-white: #FFFFFF;
  --color-soft-paper: #F4F4EE;
  --color-deep-near-black: #0A0A0A;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.

:root {
  --role-logo: #D7F20A;
  --role-btn-primary-bg: #D7F20A;
  --role-btn-outlined-border: #D7F20A;
  --role-headline: #111111;
  --role-btn-secondary-bg: #111111;
  --role-link: #4F5B2A;
  --role-btn-outlined-text: #4F5B2A;
  --role-icon: #70808D;
  --role-border: #70808D;
  --role-divider: #8B9463;
  --role-outline: #8B9463;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #0A0A0A;
  --role-text: #0A0A0A;
  --role-btn-primary-text: #0A0A0A;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.

{
    "electric-lime": "#D7F20A",
    "ink-black": "#111111",
    "olive-graphite": "#4F5B2A",
    "steel-slate": "#70808D",
    "moss-neutral": "#8B9463",
    "pure-white": "#FFFFFF",
    "soft-paper": "#F4F4EE",
    "deep-near-black": "#0A0A0A"
}

Moving gradient background

Copy the animated radial gradient background from the visualizer, with this palette already applied.

Use when: you want the hero gradient effect.

<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: #D7F20A;
  --gradient-partner: #8A9B06;
  --gradient-accent: #70808D;
  --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>

Moving gradient text

Copy the animated gradient text treatment from the visualizer, generated from the main and support colors.

Use when: you want gradient headline text.

<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: #7D8C06;
  --gradient-text-b: #8A9B06;
  --gradient-text-c: #70808D;
  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>

Start with room to explore

Build your first color system

Try ColorFly with 5 free AI actions and turn your next brand direction into a palette with purpose. No credit card required.

Try it for free

Press Space to load new palette