paletta
PALETTE GALLERY

Dark mode color palette

A dark-mode palette is a surface-layering problem before it is a color problem. This set defines three distinct dark surfaces, void, elevated, and card, each a few percent lighter than the last, plus an electric blue primary and signal red for destructive actions.

Updated 2026-07-15

  • Electric BluePrimary
    #58A6FF
  • Signal GreenAccent
    #3FB950
  • Signal RedDanger
    #F85149
  • CardSurface
    #21262D
  • FogText
    #C9D1D9
  • VoidBackground
    #0D1117

Where this palette works

Developer tools and code editors

Layered dark surfaces with a single saturated accent is the established pattern for IDEs and terminal-adjacent products.

Media and video-heavy interfaces

A near-black background keeps video and image content the brightest element on screen.

Late-use products and accessibility-first apps

Lower overall luminance reduces eye strain in low-light use, provided text still clears AA against the darkest surface.

Accessible pairings

Fog is the workhorse text color here: it clears AAA against both card and void, so the same text token works whether copy sits on the base background or an elevated card.

Aa
Fog on void
Contrast 12.26 : 1AAA
Aa
Electric blue on void
Contrast 7.49 : 1AAA
Aa
Signal red on card
Contrast 4.54 : 1AA
EXPORT

Use these tokens

Copy as CSS custom properties or a Tailwind v4 @theme block.

:root {
  --palette-primary: #58A6FF; /* Electric Blue */
  --palette-accent: #3FB950; /* Signal Green */
  --palette-danger: #F85149; /* Signal Red */
  --palette-surface: #21262D; /* Card */
  --palette-text: #C9D1D9; /* Fog */
  --palette-background: #0D1117; /* Void */
}

Frequently asked questions

Related palettes

Neon palette

A neon color palette built from neon green, electric magenta, and cyber cyan on a near-black background, with hex codes and accessible pairings.

Monochrome palette

A true grayscale monochrome color palette from ink to cloud, six steps, with hex codes, accessible text pairings, and export-ready CSS variables.

Jewel tone palette

A jewel tone color palette built from emerald, sapphire, ruby, and amethyst, with hex codes, accessible text pairings, and export-ready CSS variables.

Build on this palette

Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.

Generate a palette