Rainbow colors contain colors of the rainbow: red, green, blue, etc..
Brand colors typically match one set of the rainbow colors to achieve a consistent design. So if your brand color is blue, the brand and blue colors will match.
What's the difference? Brand colors and rainbow colors are used in different contexts. When showing the sky, it should usually have the color blue. When showing a button, it may have the action color. They can both be blue - or not. Some websites may define the action color to be green, for example. But this should not affect the color of the sky! We don't want green skies, most of the time. When developing applications, we don't yet know what color configuration the website will have, so we have a rich selection of color names to allow for correct customization.
Color names have the syntax colorName-shade, for example brand-500 or action-100.
See the available pairs listed below.