CSS Hex Code Colors With Alpha Values

by

I use hex codes for color values - most of the part in my css than rgb or color name. We have limited named colors in css hence less color palette to work with so I generally don’t use them much frequently.

In rgb we have colors made of Red Green Blue channels. Values of each channel range from 0 to 255. In hex code, each digit contain values ranging from 0 - 9 and A - F - total 16 values. To represent each color channel we have two digit per channel that can provides us 256 combination of values.

Example:
FF is 240(15 * 161) + 15(15 * 160) = 255 (White)

Now we have #RRGGBB - two digit hex for each color channels.

Our rgb comes with another variant rgba where a represents an alpha channel of color. Alpha channel lets us change opacity or transparency of the color. This is not same as opacity property in css because opacity property affects opacity of element and its children. Alpha channel of color code affects opacity or transparency of color only.

//This affects opacity or transparency of element and its children, not color
.text{
opacity: 0.5;
}

You might also like: Show search button on safari keyboard in html

I can use rgba but I mentioned that most of part I use hexcodes so there must be a way to apply an alpha channel to hexcode too. I learnt that there is an alpha channel for our hexcode in css - #RRGGBBAA
{
color:#FA26A080;
}

You might also like: How to add social icons in Shopify programmatically?

You might also like: Mailto: Email Link Tricks

More Articles

Recommended posts