Colors Overview

Version 0.1.3

We define a set of color 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 color 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:

  • Colors from base00 to base07 should range from dark to light.
  • Colors base10 to base11 should span from light to dark, but still darker than base00.

• Light Theme:

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

Specific Colors and Their Usages

Each color (baseNN) serves a specific purpose or use case, such as background, foreground, variables, etc. Here is an overview; additional guidance is provided in the following sections.

Color	base0x	ANSI	Terminal	Text Editor
	base00	0	Black (Background)	Default Background
	base01	18	(Darkest Gray)	Lighter Background (Used for status bars)
	base02	19	(Dark Gray)	Selection Background
	base03	8	Bright Black (Gray)	Comments, Invisibles, Line Highlighting
	base04	20	(Light Gray)	Dark Foreground (Used for status bars)
	base05	7	White	Default Foreground, Caret, Delimiters, Operators
	base06	21	(Lighter 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	16	(Orange)	Integers, Boolean, Constants, XML Attributes, Markup Link Url
	base0A	3	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	Magenta	Keywords, Storage, Selector, Markup Italic, Diff Changed
	base0F	17	(Dark Red or 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 Magenta	NA

Note: The colors base00 through base05 are typically neutral. The colors from base08 and up are typically more colorful, and give the color scheme a distinctive "look".

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

Note: Bright colors can have a higher luminosity relative to its non-bright counterpart. Conventionally, the luminosity can be determined by looking at the L value in the HSL color space (for the best accuracy, OKHSL/OKHSV is recommended). Bright colors can also have increased saturation for stronger emphasis, but this is not a hard requirement.

Normal elements

Ordinary text uses foreground base05 and background base00. Choose these colors for high legibility, as the user does most of the reading and writing with these colors.

Compositors and display managers:

• Use foreground base00 and background base01 or base05 to label normal unfocused workspaces, clients, and tabs.
• Use base01 or base05 for the borders of those elements.

Focus elements

These colors indicate where the user is currently interacting.

Text editors use foreground base05 and background base01 to indicate the current line.

Compositors and display managers:

• Use foreground base00 and background base0D to label focused workspaces, clients, and tabs.
• Use base05 for the borders of those elements.

Inactive elements

base03 is used to indicate that something is not active.

Text editors use this as text foreground for comments. Ensure that it is legible against the normal background (base00).

Compositors and display managers:

• Use foreground base05 and background base01 to label inactive workspaces, clients, and tabs
• Use base01 or base03 for the borders of those elements.

Category elements

base08, base09, base0A, base0B, base0C, base0D and base0E are used to distinguish between different kinds of elements.

Text editors use these colors as text foregrounds for syntax highlighting. Ensure that they are legible against the ordinary background (base01).

Compositors use these colors for borders and tabs on windows in a tabbed arrangement.

Analysis apps (e.g., system monitors) use these colors in plots and charts to represent different variables.

Warning elements

base0F is used for elements that provide a warning.

Text editors use this as text foreground for warnings. Ensure that it is legible against the normal background (base00).

Alert elements

These colors indicate errors, alerts, and anything urgent.

Text editors use base08 as text foreground for errors. Ensure that it is legible against the normal background (base00).

Compositors and display managers:

• Use foreground base00 and background base08 to label urgent workspaces, clients, and tabs.
• Use base08 for the borders of those elements.

Menu elements

Normal menu options use base04 as text foreground and base00 for the background.

Selected elements

Currently selected menu options use base05 or base06 as text foreground and base02 for the background.

Matching elements

In applications where the user can search for text, base06 is used as foreground for the matching strings.

Some menus will filter the selections as the user begins typing.

• Use base06, base0D or base0E as foreground for the matching characters in unselected options.
• Use base0D as foreground for the matching characters in selected options.