Anytime I edit a css file in Visual Studio code, a list of colors shows up.
For example,
background-color: blue;
I appreciate the functionality and the ability to see and edit colors in the code editor.
The ability to type in the name of the colors is very useful.
However, I realize it’s not the easiest to find specific colors beyond the basic colors when I try filtering by name/IntelliSense.
There seems to be very long list of colors – is there pattern or complete list of colors that I can refer to? I’d like to see the full list so I can easily refer to the colors in the future.
2
Answers
Great question.
What you're seeing are
<named-color>which is a CSS data type.EDIT: You can use this page which groups then into color categories.
You can see a reference here.
In case you don't want to click through - here is the list - I'll split into the specs which was started in 1996 and most recently in 2014 with more recent edits.
CSS Level 1
CSS Level 2
CSS Level 3
Transparent is a shortcut for rgba(0,0,0,0). For those not familiar the that is 0 for red a red value, 0 for a green value, 0 for a blue value, and importantly 0 for the alpha value which the transparency value (lower is more transparent).
CSS Level 4
Source: mdn web docs
After you type the code, just hover with your mouse on top of the color – move your mouse pointer on top of the color name/code.
This is supposed to show you a panel where you can edit the color and its opacity.