Please tell me why, when writing CSS snippets, I cannot use hsl/hsla everywhere when specifying colors?
In some cases, such as --canvas-color-1, hsl/hsla is simply not accepted. Moreover, even rgb written in the format rgb(0, 0, 0) is not accepted. Instead, you must specify rgb written as 0, 0, 0,.
In some other cases, you must use hex – #000000.
What is the reason for this mess in CSS, and is there a way to solve it so that hsl/hsla can be used everywhere?
Personnally, I haven’t experienced such issues. Can you show a piece of code that “doesn’t work”?
Perhaps untitled means something like this?
.theme-light {
--canvas-color-1: hsla(6, 93%, 71%, 1);
}
That won’t work in this case. Using the inspector or looking in the app.css, --canvas-color-1 is defined here:
which points to (in both light and dark color schemes):
Obsidian is expecting RGB values, a RGB tuple, for the value.
Yes, ariehen correctly understood what I meant.
--canvas-color-1 is written as rgb values, but not in the rgb(0, 0, 0) format.
For example, --color-base-30 is written as hex.
And other color assignment formats are simply not supported.
As a result, you don’t always know whether the selectors are specified incorrectly or whether the problem lies in how the color is written.
And I don’t understand why there is this mess in CSS — why can’t a single format be used to define colors so that there is no confusion?
I just want to use hsl/hsla everywhere because it is intuitive and does not require third-party tools when choosing colors.
Rgb / hex does.
As far as I understand, it is used this way, because these variables are not used directly as a value, but as a part of various color values.
For example, you can have different elements having colors like these:
This way you can create variations of the same color with various opacities from the same rgb tuple. It will not work if a variable would use an actual color value instead if the tuple.
Hex colors are used for colors that are not supposed to have opacity variants. The rainbow colors, for example, have two versions of variables:
–color-red — hex or any other color format, you can use value directly;
–color-red-rgb — rgb tuple, can be used with different opacities.
