Colours Overview

March 16, 2024 ยท View on GitHub

We define a set of colour codes organized into shades ranging from dark to light. These codes are commonly used in software development and design for creating themes or styling user interfaces.

Base24 Fallbacks

We provide a mapping between Base24 and Base16 colour codes for reference:

Base24Base16
base10base00
base11base00
base12base08
base13base0A
base14base0B
base15base0C
base16base0D
base17base0E

Usage Guidelines

We offer guidelines for both dark and light themes:

  • Dark Theme:

    • Colours from base00 to base07 should range from dark to light.
    • Colours base10 to base11 should span from light to dark, but still darker than base00.
  • Light Theme:

    • Colours from base00 to base07 should range from light to dark.
    • Colours base10 to base11 should span from dark to light, but lighter than base00.

Specific Colours and Their Usages

Each colour (baseNN) serves a specific purpose or use case, such as background, foreground, variables, etc. Here's a breakdown:

ColourBaseNNAnsiTerminal/Colour UseText Editor
Colourbase00-BackgroundDefault Background
Colourbase010BlackLighter Background (Used for status bars)
Colourbase028Bright BlackSelection Background
Colourbase03-(Grey)Comments, Invisibles, Line Highlighting
Colourbase04-(Light Grey)Dark Foreground (Used for status bars)
Colourbase05-ForegroundDefault Foreground, Caret, Delimiters, Operators
Colourbase067WhiteLight Foreground (Not often used)
Colourbase0715Bright WhiteThe Lightest Foreground (Not often used)
Colourbase081RedVariables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
Colourbase093YellowIntegers, Boolean, Constants, XML Attributes, Markup Link Url
Colourbase0A~11(Bright Yellow)Classes, Markup Bold, Search Text Background
Colourbase0B2GreenStrings, Inherited Class, Markup Code, Diff Inserted
Colourbase0C6CyanSupport, Regular Expressions, Escape Characters, Markup Quotes
Colourbase0D4BlueFunctions, Methods, Attribute IDs, Headings
Colourbase0E5PurpleKeywords, Storage, Selector, Markup Italic, Diff Changed
Colourbase0F-(Dark Red/Brown)Deprecated Highlighting for Methods and Functions, Opening/Closing Embedded Language Tags, e.g., <?php ?>
Colourbase10-('Darker' Black)Darker Background
Colourbase11-('Darkest' Black)The Darkest Background
Colourbase129Bright RedNA
Colourbase1311Bright YellowNA
Colourbase1410Bright GreenNA
Colourbase1514Bright CyanNA
Colourbase1612Bright BlueNA
Colourbase1713Bright PurpleNA

Note: Items in parenthesis for the Terminal/Colour Use do not have an identified terminal use and are a more generic colour description. Implementation may vary depending on the Base24 scheme.