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 */
}

FAQ

Frequently asked questions

A single flat dark background makes elevation invisible, cards and modals disappear into the page. Void, elevated, and card give a lightness ladder so stacked surfaces stay visually distinct without relying on shadows, which read poorly on dark backgrounds.

Technically yes for contrast, since anything reads well against #000000, but pure black causes halation, a glow-like blur, around light text on OLED screens. Void (#0D1117) is close enough to black for the dark aesthetic while avoiding that artifact.

Push the lightness up from what would be used on a light background. Electric Blue here sits noticeably lighter than a typical light-mode primary blue, because a mid-tone blue that reads fine on white can drop under 3:1 against a near-black page.

Related palettes

Build on this palette

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