Converting hex colors into rgba to work with opacity, etc

#1

I was determined to crack this nut: Convert #ff9933 - style color values into rgba(255,100,50,1)-style color values, so that it would be easy to manipulate alpha opacity — and eventually to perform other regular transformations (such as color-rotations and contrast checks) easily, since [split[,]] is intuitive to work with…

The actual numeric conversion (in regexp) wasn’t too hard (and I reverse-engineered the steps needed to wrestle it into a javascript macro)… but I struggled a bit to figure out how to leverage those transformed color strings (as yielded by a javascript macro) within local css declarations. (It required plenty of trial-and-error to get the right alignment between a macro-invoking variable and the <$wikify> widget needed for the css.)

image
image1430×798 86.3 KB

I suspect I reinvented some wheels here, and stole other wheels there… and none of the work is efficient! Also, I still haven’t bundled opacity-specification into the javascript macro as a proper parameter; the opacity-fade illustration is currently achieved by search-replace.

But feel free to poke around, take what you like, and/or school me on how I could have done all of this much more simply!

2 Likes
#2

CSS allows you to use 8-digit hex colors to specify alpha opacity.

Thus:
#8fba1700 is totally transparent
#8fba177F is 50% opaque
#8fba17D9 is 85% opaque (hex D9 = decimal 217, and 217/255=0.850980)
#8fba17FF is totally opaque

-e

3 Likes
#3

That’s beautiful and almost makes me feel silly.

Still, I think I’m happy to have a tool for conversion into the rgba color-space, because it makes transformations more intuitive — swapping R and G channels, cutting the R brightness by half, etc. These operations are of course just as feasible in theory with hexadecimal values, but not nearly as easy (at leats for me) to program and troubleshoot.

#4

I hope you did notice this four wheel drive I tweaked into a plugin some time ago:

Cheers and happy coloring
Thomas

#5

Thanks, very cool!

With tools like this, one thing I think I finally got the hang of, by working on my own klugey version, was understanding how to use the output, inline, in style declarations.

If you could add a demo of how those output (colorAction) values can get leveraged within inline css, that would be very helpful to hacks like myself.

At any rate, I’m grateful for the link; I’m sure I’ll learn quite a bit from it!

#6

Basically you can use it in a style tag in any (normal TW5) tiddler like this:

<div class="foo">
bar
</div>
<style>
.foo { color: <<coloraction #f00 darken>>; }
</style>

A lot of advanced stuff can be found in https://tid.li/tw5/apps/bricks.html like readability tests or usage of coloraction macros in palettes.

1 Like
#7

OK, the question I think I’m really bumping up against is how to get macros like this to work not with hard-coded color values, but with dynamic (palette-responsive, or field-data-driven) inputs.

Would this still require some fancy variable-setting outside the scope of the coloraction macro itself?

#8

Are you looking for this?

<$macrocall $name=coloraction color=<<colour primary>> mod=darken value=5/>

It can be used in the same way as the simple example above.

#9

Have a colour value in a field? Use this:

<$macrocall $name=coloraction color={{!!mycolor}} mod=darken value=25/>
1 Like
#10

Also, CSS has the new color() function, which allows you to convert from any color format to any other, and modify things along the way:

1 Like