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:
| Base24 | Base16 |
|---|---|
| base10 | base00 |
| base11 | base00 |
| base12 | base08 |
| base13 | base0A |
| base14 | base0B |
| base15 | base0C |
| base16 | base0D |
| base17 | base0E |
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:
| Colour | BaseNN | Ansi | Terminal/Colour Use | Text Editor |
|---|---|---|---|---|
| base00 | - | Background | Default Background | |
| base01 | 0 | Black | Lighter Background (Used for status bars) | |
| base02 | 8 | Bright Black | Selection Background | |
| base03 | - | (Grey) | Comments, Invisibles, Line Highlighting | |
| base04 | - | (Light Grey) | Dark Foreground (Used for status bars) | |
| base05 | - | Foreground | Default Foreground, Caret, Delimiters, Operators | |
| base06 | 7 | White | Light Foreground (Not often used) | |
| base07 | 15 | Bright White | The Lightest Foreground (Not often used) | |
| base08 | 1 | Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted | |
| base09 | 3 | Yellow | Integers, Boolean, Constants, XML Attributes, Markup Link Url | |
| base0A | ~11 | (Bright Yellow) | Classes, Markup Bold, Search Text Background | |
| base0B | 2 | Green | Strings, Inherited Class, Markup Code, Diff Inserted | |
| base0C | 6 | Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes | |
| base0D | 4 | Blue | Functions, Methods, Attribute IDs, Headings | |
| base0E | 5 | Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed | |
| base0F | - | (Dark Red/Brown) | Deprecated Highlighting for Methods and Functions, Opening/Closing Embedded Language Tags, e.g., <?php ?> | |
| base10 | - | ('Darker' Black) | Darker Background | |
| base11 | - | ('Darkest' Black) | The Darkest Background | |
| base12 | 9 | Bright Red | NA | |
| base13 | 11 | Bright Yellow | NA | |
| base14 | 10 | Bright Green | NA | |
| base15 | 14 | Bright Cyan | NA | |
| base16 | 12 | Bright Blue | NA | |
| base17 | 13 | Bright Purple | NA |
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.