Skip to content

Commit

Permalink
Redefine specification for bright colors (#32)
Browse files Browse the repository at this point in the history
  • Loading branch information
musjj authored Nov 20, 2024
1 parent 21ac86b commit b56704e
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 24 deletions.
Binary file modified assets/red-and-bright-red-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/red-and-bright-red-grayscale-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 21 additions & 24 deletions styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,36 +51,33 @@ background, foreground, variables, etc. Here's a breakdown:
| ![Colour](https://placehold.it/25/abb2bf/000000?text=+) | base05 | - | Foreground | Default Foreground, Caret, Delimiters, Operators |
| ![Colour](https://placehold.it/25/e6e6e6/000000?text=+) | base06 | 7 | White | Light Foreground (Not often used) |
| ![Colour](https://placehold.it/25/ffffff/000000?text=+) | base07 | 15 | Bright White | The Lightest Foreground (Not often used) |
| ![Colour](https://placehold.it/25/e06c75/000000?text=+) | base08 | 9 | Bright Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted |
| ![Colour](https://placehold.it/25/d19a66/000000?text=+) | base09 | ~11 | (Orange) | Integers, Boolean, Constants, XML Attributes, Markup Link Url |
| ![Colour](https://placehold.it/25/e5c07b/000000?text=+) | base0A | 11 | Bright Yellow | Classes, Markup Bold, Search Text Background |
| ![Colour](https://placehold.it/25/98c379/000000?text=+) | base0B | 10 | Bright Green | Strings, Inherited Class, Markup Code, Diff Inserted |
| ![Colour](https://placehold.it/25/56b6c2/000000?text=+) | base0C | 14 | Bright Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes |
| ![Colour](https://placehold.it/25/61afef/000000?text=+) | base0D | 12 | Bright Blue | Functions, Methods, Attribute IDs, Headings |
| ![Colour](https://placehold.it/25/c678dd/000000?text=+) | base0E | 13 | Bright Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed |
| ![Colour](https://placehold.it/25/e06c75/000000?text=+) | base08 | 1 | Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted |
| ![Colour](https://placehold.it/25/d19a66/000000?text=+) | base09 | ~3 | (Orange) | Integers, Boolean, Constants, XML Attributes, Markup Link Url |
| ![Colour](https://placehold.it/25/e5c07b/000000?text=+) | base0A | 3 | Yellow | Classes, Markup Bold, Search Text Background |
| ![Colour](https://placehold.it/25/98c379/000000?text=+) | base0B | 2 | Green | Strings, Inherited Class, Markup Code, Diff Inserted |
| ![Colour](https://placehold.it/25/56b6c2/000000?text=+) | base0C | 6 | Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes |
| ![Colour](https://placehold.it/25/61afef/000000?text=+) | base0D | 4 | Blue | Functions, Methods, Attribute IDs, Headings |
| ![Colour](https://placehold.it/25/c678dd/000000?text=+) | base0E | 5 | Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed |
| ![Colour](https://placehold.it/25/be5046/000000?text=+) | base0F | - | (Dark Red or Brown) | Deprecated Highlighting for Methods and Functions, Opening/Closing Embedded Language Tags, e.g., `<?php ?>` |
| ![Colour](https://placehold.it/25/21252b/000000?text=+) | base10 | - | (Darker Black) | Darker Background |
| ![Colour](https://placehold.it/25/181a1f/000000?text=+) | base11 | - | (Darkest Black) | The Darkest Background |
| ![Colour](https://placehold.it/25/ff7b86/000000?text=+) | base12 | 1 | Red | NA |
| ![Colour](https://placehold.it/25/efb074/000000?text=+) | base13 | 3 | Yellow | NA |
| ![Colour](https://placehold.it/25/b1e18b/000000?text=+) | base14 | 2 | Green | NA |
| ![Colour](https://placehold.it/25/63d4e0/000000?text=+) | base15 | 6 | Cyan | NA |
| ![Colour](https://placehold.it/25/67cdff/000000?text=+) | base16 | 4 | Blue | NA |
| ![Colour](https://placehold.it/25/e48bff/000000?text=+) | base17 | 5 | Purple | NA |
| ![Colour](https://placehold.it/25/ff7b86/000000?text=+) | base12 | 9 | Bright Red | NA |
| ![Colour](https://placehold.it/25/efb074/000000?text=+) | base13 | 11 | Bright Yellow | NA |
| ![Colour](https://placehold.it/25/b1e18b/000000?text=+) | base14 | 10 | Bright Green | NA |
| ![Colour](https://placehold.it/25/63d4e0/000000?text=+) | base15 | 14 | Bright Cyan | NA |
| ![Colour](https://placehold.it/25/67cdff/000000?text=+) | base16 | 12 | Bright Blue | NA |
| ![Colour](https://placehold.it/25/e48bff/000000?text=+) | 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.

Note: In `HSL` terms, **Bright** refers to a colour with a Lightness (`L`)
value close to `50`, which is a balanced midpoint between dark and
light. It also typically has a Saturation (`S`) value close to `100`,
meaning the colour is vivid and not muted. This results in a colour that
appears bright and vivid compared to another colour. However, brightness
is relative, meaning one colour can be considered brighter than another
even if both are not particularly bright. For example, a colour with
higher saturation and a lightness closer to `50` may be perceived as
brighter than a less saturated or darker variant, even if neither is
intensely bright.
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`](https://bottosson.github.io/misc/colorpicker) is recommended).
Bright colors can also have increased saturation for stronger emphasis, but this
is not a hard requirement.

![Red and Bright Red Example](https://raw.github.com/tinted-theming/base24/main/red-and-bright-red-example.png)
![Red and Bright Red Example](https://github.com/tinted-theming/base24/blob/main/assets/red-and-bright-red-example.png?raw=true)
![Red and Bright Red Grayscale Example](https://github.com/tinted-theming/base24/blob/main/assets/red-and-bright-red-grayscale-example.png?raw=true)

0 comments on commit b56704e

Please sign in to comment.