Cyber Violet

A vivid cyber palette: deep violet canvas, electric purple primary, cyan accent. For bold creative and Web3 brands.

darkvividmodernboldmodernplayful

Bold Creative and Cyber Violet

Cyber Violet is the loudest palette here, built for game studios, Web3 products, and creative agencies that want an unmistakable identity. The deep violet canvas is the quietest element, and it gives the purple and cyan accents a dark stage. The electric purple primary should carry the main actions, with cyan reserved for the energetic secondary moments and data highlights.

High-saturation colors need restraint to stay credible. Once the primary and accent are placed, let the canvas cover at least half the layout, and let the white surface token introduce clean zones for cards and inputs. The lavender text tone on the violet canvas holds AA at most sizes, but verify small text against the actual background value shown on this page.

Palette colors

Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.

Background

rgb(19, 9, 31)

hsl(267, 55%, 8%)

oklch(16.8% 0.046 302.8)

Text

rgb(243, 232, 255)

hsl(269, 100%, 95%)

oklch(94.6% 0.033 307.2)

Primary

rgb(168, 85, 247)

hsl(271, 91%, 65%)

oklch(62.7% 0.233 303.9)

Secondary

rgb(109, 40, 217)

hsl(263, 70%, 50%)

oklch(49.1% 0.241 292.6)

Accent

rgb(34, 211, 238)

hsl(188, 86%, 53%)

oklch(79.7% 0.134 211.5)

Surface

rgb(30, 15, 48)

hsl(267, 52%, 12%)

oklch(20.9% 0.064 302.2)

Border

rgb(46, 26, 71)

hsl(267, 46%, 19%)

oklch(27.0% 0.082 301.7)

Muted

rgb(124, 111, 148)

hsl(261, 15%, 51%)

oklch(56.7% 0.058 300.6)

WCAG contrast checks

Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 16.38:1

AA pass

Primary on background

Ratio 4.88:1

AA pass

Accent on background

Ratio 10.69:1

AA pass

Export tokens

Six formats covering most design system workflows. Each copies cleanly to your clipboard.

tokens.css

:root {
  --color-background: #13091F;
  --color-foreground: #F3E8FF;
  --color-primary: #A855F7;
  --color-secondary: #6D28D9;
  --color-accent: #22D3EE;
  --color-surface: #1E0F30;
  --color-border: #2E1A47;
  --color-muted: #7C6F94;
}

Related Palettes

Midnight Brand

A deep midnight palette for premium SaaS: a near-black canvas, soft periwinkle primary, and amber accent for high-contrast CTAs.

Terminal Green

A terminal-inspired dark palette: deep black-green canvas, phosphor-green primary, amber accent for warnings. Built for developer tools.

Ocean Deep

A deep ocean palette: midnight-navy canvas, sky-blue primary, amber accent. For premium tech and finance brands.

Grapefruit

A soft pink palette: grapefruit background, burgundy text, coral accent. For food, lifestyle, and personal-brand sites that want warmth without sweetness.