What colors are in the Neon Terminal palette?

The Neon Terminal palette has 5 colors: #06070A, #0F1420, #14F195, #7C5CFF, #E6F1FF.

Where can I use this palette?

It's a Balanced palette — well suited to websites, product ui, presentations, marketing pages.

Is the Neon Terminal palette accessible?

Its darkest and lightest colors have a contrast ratio of 17.64:1. 5 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Neon Terminal palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #06070A Jet Black Secondary #0F1420 Graphite Accent #14F195 Medium Spring Green Primary #7C5CFF Medium Slate Blue Surface #E6F1FF Cool White

Neon Terminal

Futuristic Developer tools 5 colors

Two accents at maximum chroma against near-black. Everything structural stays desaturated so the signal colors never compete.

Open in generator All palettes

Text Jet Black — #06070A

Secondary Graphite — #0F1420

Accent Medium Spring Green — #14F195

Primary Medium Slate Blue — #7C5CFF

Surface Cool White — #E6F1FF

Contrast matrix

Text on Surface 17.64 AAA

Primary on Surface 3.81 AA Large

Text on Secondary 1.09 Fail

Surface on Primary 3.81 AA Large

Accent on Text 13.47 AAA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #06070A;
  --secondary: #0F1420;
  --accent: #14F195;
  --primary: #7C5CFF;
  --surface: #E6F1FF;
}

$neon-terminal-text: #06070A;
$neon-terminal-secondary: #0F1420;
$neon-terminal-accent: #14F195;
$neon-terminal-primary: #7C5CFF;
$neon-terminal-surface: #E6F1FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'neon-terminal': {
    'text': '#06070A',
    'secondary': '#0F1420',
    'accent': '#14F195',
    'primary': '#7C5CFF',
    'surface': '#E6F1FF',
  },
}

{
    "neon-terminal": {
        "text": {
            "value": "#06070A",
            "type": "color"
        },
        "secondary": {
            "value": "#0F1420",
            "type": "color"
        },
        "accent": {
            "value": "#14F195",
            "type": "color"
        },
        "primary": {
            "value": "#7C5CFF",
            "type": "color"
        },
        "surface": {
            "value": "#E6F1FF",
            "type": "color"
        }
    }
}

{
    "text": "#06070A",
    "secondary": "#0F1420",
    "accent": "#14F195",
    "primary": "#7C5CFF",
    "surface": "#E6F1FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#06070A
#0F1420
#14F195
#7C5CFF
#E6F1FF

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Neon Terminal

Contrast matrix

Export tokens

How the roles work

Related palettes