Skip to content

Latest commit

 

History

History
166 lines (119 loc) · 8.54 KB

File metadata and controls

166 lines (119 loc) · 8.54 KB

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

Red and Bright Red Example Red and Bright Red Grayscale Example

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.