How does CSS use color?
color
The color property represents the color of the specific element selected. For example, if this p element is given the color property of blue, then only the text of this paragraph on the page will change to blue.
background-color
The background-color property represents the color of the box behind the text representing the height and length bounds of the element. For example, if the p element used in the previous example is given the background-color property of lightblue, the text will remain blue as it was before, but the space behind the heading bound by the size of the text will now be a lighter blue than the text.
border-color
The border-color property represents the color of the perimeter of the text box or shape on the page. For example, following the previous transformations of the p element, the current paragraph has blue text with a lighter blue background. With the addition of border-color being set to black, the perimeter of the lighter blue box will have a black border. (You have to imagine this one. HTML won’t let the blog posts’ paragraphs have a border. At least nothing I could find would let me.)
How does CSS accept color values?
Named
As hinted toward in the examples above, a commonly used method of telling the computer what color you want specific content to be is just by the names of the colors. Red, blue, white, green, and even aquamarine, olivegreen, lightgray and hundreds of others. Follow the color property declaration with whatever name you want out of the existing list of names, and you can make it easy!
Hexadecimal
While Named colors are fantastic for their ease of use, particularly when there isn’t a set color scheme in mind, there are a lot of different kind of blues, yellows, and so on that cannot be completely captured within each name. Especially if you want to try to remember any system alongside it. In this case, the Hexadecimal color system provides a far wider range of possible colors through a 6 digit long, base-16 (0-9, A-F) sequence. This is how colors are outputted in code when using a full-range digital color palate. You will also find that online color scheme creators, such as Coolors.co, you can easily copy and paste the hex code for each color in a given palate into the code for an exact translation. Just declare the hex-color property and follow it with #enteryoursixdigitcodeafterthepound.
RGB
RGB is the color system utilized by computer monitors and screens which defined by the individual pixels having three individual lights: red, green, and blue. Each pixel light has an illumination value between 0, being turned off, to 255, which is fully illuminated. By using the rgb(r g b / a) color property, where the a at the end represents the alpha value, or color transparency from 0 to 1.
Color-mix
Color-mix() allows you to take two colors from any of the aforementioned color variants, names, hex, and RGB values and combine them. By declaring color-mix, you first select the color space you want to choose from. This could be RGB, names, HSL, or any other option. You then choose your color as well as the percentage distribution of how much of the first color you want in the mix compared to the remainder being the other color. Finally, pick the color you want to mix into the first color. The percentage at the end of the second color is optional.