Helion

WCAG comfort for the eyes using colors that faded away

Helion is a WCAG-compliant mid-contrast color palette inspired by Solarized, as well as colors that faded away: pigments whose manufacture have been lost or replaced, either due to hard-to-find materials or, more often, toxicity.

Helion is built on eight desaturated base tones and eight vivid accents. It is designed to keep code legible while giving syntax and UI just enough color to breathe.

Screenshots

Visual Studio Code

Terminal (Lazygit)

Editors and IDEs

• Visual Studio Code
• Windows Terminal
• Vim (coming soon)

Implementation notes

Helion is still young as color palettes go, but has undergone several iterations to ensure it remains WCAG compliant. Each accent must match or exceed a certain contrast ratio against the base background for both light and dark theme variants.

For dark mode, prefer --gunmetal for primary backgrounds, reserving the darker colors for UI elements and emphasis.

Similarly, for light mode, prefer --french-grey for backgrounds.

:root {
  // Base tones
  --ivory-black:    #1a2a38;
  --dark-gunmetal:  #263849;
  --gunmetal:       #2d4354;
  --charcoal:       #40576b;
  --paynes-grey:    #4e7a98;
  --french-grey:    #a8b6c0;
  --alabaster:      #d8dad3;
  --lead-white:     #e4e6e0;
  // Accents
  --gamboge-yellow: #CE8900;
  --realgar:        #E06E41;
  --vermilion:      #F6606D;
  --fuchsine:       #D76AF1;
  --tyrian-purple:  #B163FF;
  --chartres-blue:  #40ABE5;
  --verdigris:      #3FA89D;
  --scheeles-green: #68A82C;
}