2

In hsl value, we can give opacity as

background: hsla(213, 34%, 12%, .5);

and in rgb as

background: rgba(134, 231, 54, .5);

I wonder how we can give opacity to hex value?

DMT
  • 51
  • 2
  • 9
  • 1
    Use an extra hex digit to specify opacity. #FFF8 or #FFFFFF88 – Dan Mullin Jun 15 '21 at 07:09
  • 1
    Try not to use hex, if possible. It is not flexible and becoming obsolete (it is creating problems) – Giacomo Catenazzi Jun 15 '21 at 08:04
  • @GiacomoCatenazzi Thank you. What do you prefer then? What should I use? rgb or hsl? – DMT Jun 16 '21 at 05:51
  • It depends on the question. RGB is nearer to the physical device, hsl is near to our vision. Javascript (by standard, so before optimisations) uses floating point for every number (also integer), so it doesn't matter much (string and "hex" are fixed precision). I prefer the classical scale: 0 to 1 or 0 to 100 (and as float). Note: there are screens which have 1024 (or more) value per channel (R, G, or B). Future HDR may require more value (less then 0, more then white, also for "full-range" RGB). – Giacomo Catenazzi Jun 16 '21 at 09:56

1 Answers1

2

You may use this way to convert the transparent for your current hex colour

For example, you want to set 40% alpha transparency to #000000 (black colour), you need to add 66 like this #66000000. The format is #AARRGGBB so you could use a format like #1C00ff00.

You could also check the full table hex -> transparent colour here https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Tony Tin Nguyen
  • 170
  • 1
  • 7