Electric Cobalt#2B43F5
Lime Signal#D8F15A
Midnight Graphite#202124
Steel Fog#7A7F8C
Porcelain Mist#EDEFF2
Palette direction

Electric Lime Graphite Color Palette

A high-energy palette built from electric blue, vivid lime, and deep charcoal, with soft graphite and warm off-white accents to keep the system usable across interfaces. The contrast feels modern and editorial, giving the brand a bold visual signature without sacrificing clarity.

ComplementaryTechelectric bluelime greencharcoalhigh contrast
palette-preview.example
Tech color direction

Electric Lime Graphite Color Palette

A high-energy palette built from electric blue, vivid lime, and deep charcoal, with soft graphite and warm off-white accents to keep the system usable across interfaces. The contrast feels modern and editorial, giving the brand a bold visual signature without sacrificing clarity.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Midnight Graphite #20212416.1:1 Excellent
Logo Deep Ink #0F1012on Lime Signal #D8F15A15.1:1 Excellent
Logo Deep Ink #0F1012on Pure White #FFFFFF19.0:1 Excellent
Logo Deep Ink #0F1012on Steel Fog #7A7F8C4.8:1 Strong
Icon color
BackgroundLime Signal#D8F15ATextDeep Ink#0F1012
Primary Button15.09:1
AAA

Best for the main action users should notice first.

BackgroundElectric Cobalt#2B43F5TextPure White#FFFFFF
Secondary Button6.51:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextWarm Ivory#F5F1EA
Outlined Button1.13:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextLime Signal#D8F15A
Text Button1.26:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Electric Lime Graphite Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CElectric Lime Graphite Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Electric blue and vivid lime create a sharp, memorable contrast that feels immediate and screen-native. Together they establish a bold visual rhythm that works well for branding, product highlights, and attention-driven interface moments.

Clear roles create a consistent brand experience.

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 Cobalt #2B43F5
HeadlineUsed for main titles and key messages.Midnight Graphite #202124
LinkUsed for links and interactive text.Lime Signal #D8F15A

Buttons

Primary Button
BackgroundLime Signal #D8F15A
TextDeep Ink #0F1012
Secondary Button
BackgroundElectric Cobalt #2B43F5
TextPure White #FFFFFF
Outlined Button
BackgroundLime Signal #D8F15A
TextWarm Ivory #F5F1EA

Interface

TextDefault readable body text.Deep Ink #0F1012
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Deep Ink #0F1012
IconSmall interface icons and marks.Steel Fog #7A7F8C
BorderCards, inputs, and component borders.Steel Fog #7A7F8C
DividerSubtle separators between content.Porcelain Mist #EDEFF2
OutlineFocus rings and emphasis outlines.Porcelain Mist #EDEFF2

Palette Colors

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

Main (Brand) Colors

Electric blue and vivid lime create a sharp, memorable contrast that feels immediate and screen-native. Together they establish a bold visual rhythm that works well for branding, product highlights, and attention-driven interface moments.

PrimaryElectric Cobalt

RolesLogo, Btn Secondary Bg

A saturated blue that anchors recognition and brings a confident, fast-moving digital tone.

HEX#2B43F5
RGB43, 67, 245
HSL233, 91, 56
CMYK82, 73, 0, 4
PrimaryLime Signal

RolesBtn Primary Bg, Link, Btn Outlined Border

A vivid lime that adds urgency and freshness, making calls to action stand out immediately.

HEX#D8F15A
RGB216, 241, 90
HSL70, 84, 65
CMYK10, 0, 63, 5
SecondaryMidnight Graphite

RolesHeadline

A near-black grounding color that sharpens typography and keeps the palette feeling serious and controlled.

HEX#202124
RGB32, 33, 36
HSL225, 6, 13
CMYK11, 8, 0, 86

Support Colors

Muted, cooler support tones extend the main palette by adding structure and hierarchy without competing with the bright blue and lime. They are intentionally quieter so the core br

Steel Fog

RolesIcon, Border

A soft gray-blue that supports UI chrome and balances the palette with understated structure.

HEX#7A7F8C
RGB122, 127, 140
HSL223, 7, 51
CMYK13, 9, 0, 45
Porcelain Mist

RolesOutline, Divider

A pale neutral accent for separators and outlines that preserves whitespace and keeps layouts airy.

HEX#EDEFF2
RGB237, 239, 242
HSL216, 16, 94
CMYK2, 1, 0, 5

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
Warm Ivory

RolesBtn Outlined Text

HEX#F5F1EA
RGB245, 241, 234
HSL38, 35, 94
CMYK0, 2, 4, 4
Deep Ink

RolesBg Dark, Text, Btn Primary Text

HEX#0F1012
RGB15, 16, 18
HSL220, 9, 6
CMYK17, 11, 0, 93

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

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-cobalt: #2B43F5;
  --color-lime-signal: #D8F15A;
  --color-midnight-graphite: #202124;
  --color-steel-fog: #7A7F8C;
  --color-porcelain-mist: #EDEFF2;
  --color-pure-white: #FFFFFF;
  --color-warm-ivory: #F5F1EA;
  --color-deep-ink: #0F1012;
}

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: #2B43F5;
  --role-btn-secondary-bg: #2B43F5;
  --role-btn-primary-bg: #D8F15A;
  --role-link: #D8F15A;
  --role-btn-outlined-border: #D8F15A;
  --role-headline: #202124;
  --role-icon: #7A7F8C;
  --role-border: #7A7F8C;
  --role-outline: #EDEFF2;
  --role-divider: #EDEFF2;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-btn-outlined-text: #F5F1EA;
  --role-bg-dark: #0F1012;
  --role-text: #0F1012;
  --role-btn-primary-text: #0F1012;
}

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-cobalt": "#2B43F5",
    "lime-signal": "#D8F15A",
    "midnight-graphite": "#202124",
    "steel-fog": "#7A7F8C",
    "porcelain-mist": "#EDEFF2",
    "pure-white": "#FFFFFF",
    "warm-ivory": "#F5F1EA",
    "deep-ink": "#0F1012"
}
Press Space to load new palette