Is it possible to convert rgba color to hex using LESS

Question

I have an element(<div>) with transparent background color: rgba(96, 96, 96, .1) and I assume my element has a wrapper with white background.

Is there any way to convert transparent color to hex using LESS css? For example, rgba(96, 96, 96, .1) should be equal to #efefef.

I've read the color function article, but have not found a suitable answer.

how could you transpose the transparency information with hex format? — Fabrizio Calderan, Apr 16 '15 at 14:19
@FabrizioCalderan http://stackoverflow.com/questions/15852122/hex-transparency-in-colors There is somewhat limited support for that. — TylerH, Apr 16 '15 at 14:21
@TylerH that looks to be for android - transparency in hex isn't usually possible for CSS. — Alexander Lozada, Apr 16 '15 at 14:27
'why do you want to do that?' - in my application I have a palette that contains colors definition. For example, `@base_color: #606060; @hovered_state_color: fade(@base_color, 10%);` In some cases I can't use transparent colors and I want to use the similar colors but in hex or rgb format. — Sergey, Apr 16 '15 at 14:53

seven-phases-max · Accepted Answer · 2015-04-16T19:57:00.533

2

If I understand the question correctly you're looking for a function that calculates result of compositing/layering of one color (e.g. rgba(96, 96, 96, .1)) with/over another (e.g. white). In Less it's supposed to be one of the blending functions family, but since the name of such function in current naming convention has to be normal (which is rather weird) this function is not included. But if one of colors is always white you still can get the desired result via multiply:

multiply(white, rgba(96, 96, 96, .1))

edited Apr 16 '15 at 19:57

answered Apr 16 '15 at 14:58

seven-phases-max

11,765
1
45
57

You're completely right! It works fine, thanks a lot! – Sergey Apr 16 '15 at 15:42

Is it possible to convert rgba color to hex using LESS

1 Answers1