How would you name your CSS variables for Black hue color, White hue color and Gray hue color?

[bendqh1]

:root {

	/* Black, Gray, White */

	--blackColor: black;
	--greyColor: whitesmoke;
	--whiteColor: white;

}

I don’t speak English natively and particularly wasn’t sure about grey or gray but Google gave me 1,260,000,000 results for "grey" and 1,280,000,000 results for "gray" (both searches with quote marks).

How would you name your CSS variables for Black hue color, White hue color and Gray hue color?

[Gandalf]

Why worry if it’s your website? So long as you know what you mean.

Generally speaking grey is the real English spelling and gray is the spelling in American.

[Thallius]

would say gray is the more common one used in source code. Funny thing: CSS has defined both

[m_hutley]

I dont particularly like using “blackColor” for the variable name. Looks an awful lot like “backColor” when you’re in a hurry; but that’s just me.

[PaulOB]

@bendqh1

:root {

	/* Black, Gray, White */

	--blackColor: black;
	--greyColor: whitesmoke;
	--whiteColor: white;

}

That looks like a problem waiting to happen

What happens when you decide that the site needs a new theme and you want to use three different colours or reverse colours. You can change the variable of course but then you will have something like.

--blackColor: white;
--whiteColor: black;

If you change the variable name then you have to do a sitewide search and replace over many pages which is no fun and prone to error.

Much better to define the logic for your colours and use things like this:

--primaryTextColor: black;
--highlightColor: whitesmoke;
--primaryBgColor: white
--warning:red;

Then when you decide on a scheme change the html needs no adjustments at all and still makes perfect sense.

I know its not such a big issue on your own designs but I ran into this many times when developing for clients. Even after months of development the clients boss suddenly says he doesn’t like the colour scheme. Can you change it by 5pm

[m_hutley]

Quasi-off-topic, but…

@PaulOB

Even after months of development the clients boss suddenly says he doesn’t like the colour scheme. Can you change it by 5pm

You get until 5 PM? Lucky.

[SamA74]

@PaulOB

What happens when you decide that the site needs a new theme and you want to use three different colours or reverse colours.

I recall learning this lesson early (for me) before variables were a thing in CSS. Then it referred to naming classes.
The class should describe what the thing is, not necessarily how it looks, as you may later change how it looks and the name no longer makes sense.

But this is now especially important when it comes to variables, as variables by purpose are subject to change. That is change within the document, not just in future incarantions of it.

@bendqh1

	--blackColor: black;
	--greyColor: whitesmoke;
	--whiteColor: white;

This to me seems quite redundant.
If --blackColor will always be black, why make it a variable?
Use:-

background: black;

instead of the more verbose:-

background: var(--blackColor);

If however --blackColor may at some point be changed to purple, the the name will cease to may any sense at all and only cause confusion.

root {
     --blackColor: black;
     --whiteColor: white;
}
@media (prefers-color-scheme: dark) {
      --blackColor: white;  /* What?? */
      --whiteColor: black;
}

Do you see the problem here?