User:Lakelimbo/Colors

This page is related to the ongoing discussion about type Colors, but I will also go over technical details, which can then be applied to any "preset" colors (e.g types, game pairs, regions, etc.).

Moving from templates to CSS

Because Bulbapedia is considerably old, I assume during most of its lifetime, a lot of CSS (and JS) tools were not available, or were much worse. Currently, almost all of these "preset" colors use templates, which, IMO, is not necessary anymore.

Currently, with CSS, we have the option for CSS variables, which are, well, variables (aka they store an arbitrary value that can be used elsewhere). On a CSS page (like Common.css) we need to set a :root pseudoclass, which is not really a pseudoclass but it will make all variables inside of it available for use on any other class.

:root {
    --color-red: #ff0000;
    --color-blue: #0000ff;
    --color-green: #00ff00;
    ...
}

This then can be used on other classes, like this:

.my-class {
    background-color: var(--color-red);
}

Or like this on the actual HTML: <div style="background-color: var(--color-red)">...</div>. Of course, this example is extremely simple, and might not be as useful, which is also why we can define variables scoped to a class. Like this:

.my-class {
    --color: #ff0000;
    background-color: var(--color);
}

We scoped --color to .my-class with the Red color as a default ("fallback") value. When using this class on some element, we can override it like this: <div class="my-class" style="--color: #00ff00">...</div> (now the background-color is green!).

With this in mind, it's totally possible to move from the templates holding the colors to actual CSS, available globally. This will eliminate >200 templates afaik.

Varieties

On the current system, all colors have a "normal", "light", and "dark" varieties, and that's fine, but IMO we should try to always keep some varieties to specific contexts. So, the "light" variety could be a "background" variety, used only for the background colors, being very light and blending with the background. The "dark" variety would become "foreground", which would be a much darker color with a very high contrast on top of the "background" variety.

The colors themselves

Using the previous information, below we can see my proposed colors.

• Values in HSL for better visualization
• The regular colors are all the official SV colors.
• Tried to make the minimal amount of changes possible to the saturation
• Most changes are on lightness
• No hue changes
• BG-FG CR: Background to Foreground contrast ratio
• Minimum BG-FG contrast needs to be 7.00 (reasonable contrast for text <18pt)

Type	Regular	Background	Foreground	BG-FG CR
Normal	120° 1.64% 76.08%	120° 1.64% 91%	120° 1.64% 25%	8.40
Fighting	30.35° 100% 50%	30.35° 100% 79%	30.35° 100% 18%	7.59
Flying	209.17° 77.3% 72.35%	209.17° 77.3% 88%	209.17° 77.3% 26%	7.40
Poison	274.83° 58.85% 52.35%	274.83° 58.85% 83.4%	274.83° 58.85% 25.35%	7.64
Ground	26.92° 35.14% 56.47%	26.92° 35.14% 79.87%	26.92° 35.14% 21%	7.41
Rock	52.34° 23.15% 60.2%	52.34° 23.15% 82.12%	52.34° 23.15% 21%	7.49
Bug	67.03° 80.11% 35.49%	67.03° 80.11% 73.5%	67.03° 80.11% 14.52%	8.69
Ghost	300° 28.41% 34.51%	300° 28.41% 80.49%	300° 28.41% 23%	7.21
Steel	194.83° 38.86% 55.1%	194.83° 38.86% 78.34%	194.83° 38.86% 19%	7.52
Fire	359.69° 80.33% 52.16%	359.69° 80.33% 85.15%	359.69° 80.33% 21%	8.23
Water	212.73° 85.71% 69.8%	212.73° 85.71% 89.81%	212.73° 85.71% 26%	8.16
Grass	107.24° 63.82% 39.02%	107.24° 63.82% 76.14%	107.24° 63.82% 17.09%	7.60
Electric	46.27° 100% 48.82%	46.27° 100% 82.89%	46.27° 86% 18%	8.08
Psychic	339.89° 84.62% 59.22%	339.89° 84.62% 86.3%	339.89° 84.62% 23.71%	7.62
Ice	191.81° 100% 75.1%	191.81° 80% 90.1%	191.81° 88% 21%	7.42
Dragon	232.65° 71.01% 59.41%	232.65° 71.01% 89.18%	232.65° 49% 27.41%	8.89
Fairy	300° 82.28% 69.02%	300° 72.3% 90%	300° 96.24% 23%	7.89