The Font Opacity Level Developers Want

Variables could be defined as slots to store data. That makes it possible to reuse data in multiple places.

Colors are no exception. So, to save time and improve the code's structure, developers create variables that store colors.

Instead of having #23B6DA as the background of that button, you may have something like $color-blue-primary.

Not so scalable:

button { background-color: #23B6DA; }

More scalable:

button { background-color: @color-primary-blue; }

What if the brand is updated, and now the right blue is #96D9FF? No problem. Instead of editing the 37 lines of code that mention #23B6DA, the only thing that needs to be changed is the color value associated with $color-blue-primary.

Before the brand's update:

@color-primary-blue: #23B6DA;

After the update:

@color-primary-blue: #96D9FF;

So far, I've shown colors as HEX codes, and most developers will prefer to use it as the default. HEX is easier to spot and only require one input, instead of the multiple ones necessary in RGB, for example. The problem is that for up until recently, there was little browser support for HEX alpha transparency.

That's why usually, RGB format will be involved when opacity is needed. When I found out about these implications, I thought I could switch to RGB, and everything would be fine. Not at all.

Although there's more support from browsers, it's considered good practice to adopt color variables based on HEX. Since then, I still use opacity to find the colors that I need, but once I get the result I want, I use the color picker to get the "real" color. That's how now I deliver a file that only has colors with opacity set to 100%.

How I used to deliver:

• White text with 80 or 90% to smooth the contrast with the background
• Primary branding colors with different opacity levels to "find" subtle color variations
• Grey backgrounds based on lower opacity levels (3 to 10%)
• Thin lines and borders that used lighter shades of the primary color achieved with lower opacity levels

How I deliver now:

• All the colors have opacity set to 100%