Skip to content

Commit 21ac86b

Browse files
JamyGoldenJamyGolden
authored
Specify bright colours first to match base16 specification (#30)
1 parent 600ecb4 commit 21ac86b

File tree

2 files changed

+50
-27
lines changed

2 files changed

+50
-27
lines changed

‎assets/red-and-bright-red-example.png‎

4.83 KB
Loading

‎styling.md‎

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
# Colours Overview
22

3-
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.
3+
**Version 0.1.0**
4+
5+
We define a set of colour codes organized into shades ranging from dark
6+
to light. These codes are commonly used in software development and
7+
design for creating themes or styling user interfaces.
48

59
## Base24 Fallbacks
610

7-
We provide a mapping between Base24 and Base16 colour codes for reference:
11+
We provide a mapping between Base24 and Base16 colour codes for
12+
reference:
813

914
| Base24 | Base16 |
1015
| ------ | ------ |
@@ -22,19 +27,22 @@ We provide a mapping between Base24 and Base16 colour codes for reference:
2227
We offer guidelines for both dark and light themes:
2328

2429
- **Dark Theme**:
25-
- Colours from base00 to base07 should range from dark to light.
26-
- Colours base10 to base11 should span from light to dark, but still darker than base00.
30+
- Colours from base00 to base07 should range from dark to light.
31+
- Colours base10 to base11 should span from light to dark, but still
32+
darker than base00.
2733

2834
- **Light Theme**:
29-
- Colours from base00 to base07 should range from light to dark.
30-
- Colours base10 to base11 should span from dark to light, but lighter than base00.
35+
- Colours from base00 to base07 should range from light to dark.
36+
- Colours base10 to base11 should span from dark to light, but lighter
37+
than base00.
3138

3239
## Specific Colours and Their Usages
3340

34-
Each colour (baseNN) serves a specific purpose or use case, such as background, foreground, variables, etc. Here's a breakdown:
41+
Each colour (baseNN) serves a specific purpose or use case, such as
42+
background, foreground, variables, etc. Here's a breakdown:
3543

36-
| Colour | BaseNN | Ansi | Terminal/Colour Use | Text Editor |
37-
| ------ | ------ | ---- | ------------------- | ----------- |
44+
| Colour | BaseNN | Ansi | Terminal/Colour Use | Text Editor |
45+
| ------------------------------------------------------- | ------ | ---- | ------------------- | ----------- |
3846
| ![Colour](https://placehold.it/25/282c34/000000?text=+) | base00 | - | Background | Default Background |
3947
| ![Colour](https://placehold.it/25/3f4451/000000?text=+) | base01 | 0 | Black | Lighter Background (Used for status bars) |
4048
| ![Colour](https://placehold.it/25/4f5666/000000?text=+) | base02 | 8 | Bright Black | Selection Background |
@@ -43,21 +51,36 @@ Each colour (baseNN) serves a specific purpose or use case, such as background,
4351
| ![Colour](https://placehold.it/25/abb2bf/000000?text=+) | base05 | - | Foreground | Default Foreground, Caret, Delimiters, Operators |
4452
| ![Colour](https://placehold.it/25/e6e6e6/000000?text=+) | base06 | 7 | White | Light Foreground (Not often used) |
4553
| ![Colour](https://placehold.it/25/ffffff/000000?text=+) | base07 | 15 | Bright White | The Lightest Foreground (Not often used) |
46-
| ![Colour](https://placehold.it/25/e06c75/000000?text=+) | base08 | 1 | Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted |
47-
| ![Colour](https://placehold.it/25/d19a66/000000?text=+) | base09 | 3 | Yellow | Integers, Boolean, Constants, XML Attributes, Markup Link Url |
48-
| ![Colour](https://placehold.it/25/e5c07b/000000?text=+) | base0A | ~11 | (Bright Yellow) | Classes, Markup Bold, Search Text Background |
49-
| ![Colour](https://placehold.it/25/98c379/000000?text=+) | base0B | 2 | Green | Strings, Inherited Class, Markup Code, Diff Inserted |
50-
| ![Colour](https://placehold.it/25/56b6c2/000000?text=+) | base0C | 6 | Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes |
51-
| ![Colour](https://placehold.it/25/61afef/000000?text=+) | base0D | 4 | Blue | Functions, Methods, Attribute IDs, Headings |
52-
| ![Colour](https://placehold.it/25/c678dd/000000?text=+) | base0E | 5 | Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed |
53-
| ![Colour](https://placehold.it/25/be5046/000000?text=+) | base0F | - | (Dark Red/Brown) | Deprecated Highlighting for Methods and Functions, Opening/Closing Embedded Language Tags, e.g., `<?php ?>` |
54-
| ![Colour](https://placehold.it/25/21252b/000000?text=+) | base10 | - | ('Darker' Black) | Darker Background |
55-
| ![Colour](https://placehold.it/25/181a1f/000000?text=+) | base11 | - | ('Darkest' Black) | The Darkest Background |
56-
| ![Colour](https://placehold.it/25/ff7b86/000000?text=+) | base12 | 9 | Bright Red | NA |
57-
| ![Colour](https://placehold.it/25/efb074/000000?text=+) | base13 | 11 | Bright Yellow | NA |
58-
| ![Colour](https://placehold.it/25/b1e18b/000000?text=+) | base14 | 10 | Bright Green | NA |
59-
| ![Colour](https://placehold.it/25/63d4e0/000000?text=+) | base15 | 14 | Bright Cyan | NA |
60-
| ![Colour](https://placehold.it/25/67cdff/000000?text=+) | base16 | 12 | Bright Blue | NA |
61-
| ![Colour](https://placehold.it/25/e48bff/000000?text=+) | base17 | 13 | Bright Purple | NA |
62-
63-
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.
54+
| ![Colour](https://placehold.it/25/e06c75/000000?text=+) | base08 | 9 | Bright Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted |
55+
| ![Colour](https://placehold.it/25/d19a66/000000?text=+) | base09 | ~11 | (Orange) | Integers, Boolean, Constants, XML Attributes, Markup Link Url |
56+
| ![Colour](https://placehold.it/25/e5c07b/000000?text=+) | base0A | 11 | Bright Yellow | Classes, Markup Bold, Search Text Background |
57+
| ![Colour](https://placehold.it/25/98c379/000000?text=+) | base0B | 10 | Bright Green | Strings, Inherited Class, Markup Code, Diff Inserted |
58+
| ![Colour](https://placehold.it/25/56b6c2/000000?text=+) | base0C | 14 | Bright Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes |
59+
| ![Colour](https://placehold.it/25/61afef/000000?text=+) | base0D | 12 | Bright Blue | Functions, Methods, Attribute IDs, Headings |
60+
| ![Colour](https://placehold.it/25/c678dd/000000?text=+) | base0E | 13 | Bright Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed |
61+
| ![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 ?>` |
62+
| ![Colour](https://placehold.it/25/21252b/000000?text=+) | base10 | - | (Darker Black) | Darker Background |
63+
| ![Colour](https://placehold.it/25/181a1f/000000?text=+) | base11 | - | (Darkest Black) | The Darkest Background |
64+
| ![Colour](https://placehold.it/25/ff7b86/000000?text=+) | base12 | 1 | Red | NA |
65+
| ![Colour](https://placehold.it/25/efb074/000000?text=+) | base13 | 3 | Yellow | NA |
66+
| ![Colour](https://placehold.it/25/b1e18b/000000?text=+) | base14 | 2 | Green | NA |
67+
| ![Colour](https://placehold.it/25/63d4e0/000000?text=+) | base15 | 6 | Cyan | NA |
68+
| ![Colour](https://placehold.it/25/67cdff/000000?text=+) | base16 | 4 | Blue | NA |
69+
| ![Colour](https://placehold.it/25/e48bff/000000?text=+) | base17 | 5 | Purple | NA |
70+
71+
Note: Items in parenthesis for the Terminal/Colour Use do not have an
72+
identified terminal use and are a more generic colour description.
73+
Implementation may vary depending on the Base24 scheme.
74+
75+
Note: In `HSL` terms, **Bright** refers to a colour with a Lightness (`L`)
76+
value close to `50`, which is a balanced midpoint between dark and
77+
light. It also typically has a Saturation (`S`) value close to `100`,
78+
meaning the colour is vivid and not muted. This results in a colour that
79+
appears bright and vivid compared to another colour. However, brightness
80+
is relative, meaning one colour can be considered brighter than another
81+
even if both are not particularly bright. For example, a colour with
82+
higher saturation and a lightness closer to `50` may be perceived as
83+
brighter than a less saturated or darker variant, even if neither is
84+
intensely bright.
85+
86+
![Red and Bright Red Example](https://raw.github.com/tinted-theming/base24/main/red-and-bright-red-example.png)

0 commit comments

Comments
 (0)