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.
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 |
We offer guidelines for both dark and light themes:
-
Dark Theme:
- Colors from
base00tobase07should range from dark to light. - Colors
base10tobase11should span from light to dark, but still darker thanbase00.
- Colors from
-
Light Theme:
- Colors from
base00tobase07should range from light to dark. - Colors
base10tobase11should span from dark to light, but lighter thanbase00.
- Colors from
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.
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.
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
base00and backgroundbase01orbase05to label normal unfocused workspaces, clients, and tabs. - Use
base01orbase05for the borders of those 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
base00and backgroundbase0Dto label focused workspaces, clients, and tabs. - Use
base05for the borders of those 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
base05and backgroundbase01to label inactive workspaces, clients, and tabs - Use
base01orbase03for the borders of those 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.
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).
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
base00and backgroundbase08to label urgent workspaces, clients, and tabs. - Use
base08for the borders of those elements.
Normal menu options use base04 as text foreground and base00 for the background.
Currently selected menu options use base05 or base06 as text foreground and base02 for the background.
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,base0Dorbase0Eas foreground for the matching characters in unselected options. - Use
base0Das foreground for the matching characters in selected options.

