Color Manager - Save Opacity Adjustment

[strobley]

Hi Themeco,

Colour Manager is awesome - I do have a question/feature.

The power of color manager is “set once, reuse anywhere”; and once set, changing the color setting in color manager all elements which are set to that colour inherit the change in color - magic!

However, this awesome behaviour stops when an opacity is applied to the base color in the color picker/selector for any elements color options.

Once any opacity/transparency is used the color no longer inherits from the base color in Color Manager. I’d understand this is effectively treating like a different new color - however it would be great if this inheritance behaviour remains when changing only the opacity/transparency, as it effectively still the same base color.

I appreciate when actually changing the color in the color picker/selector for an element it is clearly a different color with no inheritance.

Currently I’m creating multiple variations of the same color in Color Manager, with only opacity/transparency changes - it does get confusing!

[rad]

Hi @strobley,

Thanks for reaching out.

The transparency is always part of the color, so when you set a transparency, you’re also setting a new color and it’s CSS standard. Example, the main color is white

rgb( 255, 255, 255 )

Then you wanted to change its opacity to 50%

rgba ( 0, 0, 0, 0.5 );

It will then change it to black with 50% transparency since there is no a(0.5) (from rgba() ) that only changes the opacity value. And it’s not the same as applying opacity: 0.5, it works as a whole when it comes to color. The color picker also uses an existing library in which impossible to change since it’s not made by us. But noted this as a request

RGBA means Red, Green, Blue, Alpha (opacity).

Thanks!

[strobley]

Thanks for explaining Rad, I always set all my base colors to either rgba or hsla in the Color Manager.

That is the reason I’m saying it is effectively the same color with 1 opacity in the Color Manager… in the color picker, when change this to be 0.5 for the example - it is only changing the opacity part of the base color.

I know understand what my point is. This becomes more relevant when dealing with Interaction colors - which are often just a variation in opacity of the base color. As they do not inherit when opacity is changed they have to be set as different colors to use the power of color inheritance… which leads to at least 2 or more colors for every one color… like I said it does get confusing!

[friech]

Hi Strobley,

I understand your confusion, It is confusing when you’re dealing with things (colors) that looks almost identical. However, it is what it is a different colors. The color picker will treat any changes in color channel (r,g,b,a) as a different color (like Rad said above its how color picker works, regretfully there isn’t much we can do here).

What you can do to reduce your confusion, is give your color template a descriptive name, like appending the alpha value on your color name

(e.g. link 05, headline 025, brand-color 075)

Thank you for understanding,