More experimenting with the "Blend Mode:Hard Light" Filter - using coloured text

[jonray]

Hi folks,
I’ve been experimenting with colours and the “Blend Mode:Hard Light” filter again.
So, I put a photo on V1:

and this image on V2 (which I created in Shotcut):

Then I applied a “Blend Mode:Hard Light” to the clip on V2 and I got this:

This was no surprise - I knew already that
a) the grey (which is a special grey, HALF GREY) becomes transparent.
b) the white and black remain solid.
(I already posted about this HERE):

Playing around with the Blend Mode filter, and a cool text title animation

Hi folks. I am excited to report and share how I made this rather cool animated text title (it’s part of a title sequence for an up and coming flute music video I’m making): [Animated text effect - Made in Shotcut] I did it with a custom-made HTML file. But first, my story begins with an experiment with Blend Modes and transparency… in which discovered something interesting. So in Shotcut, using three colours - black, grey and white, I exported a frame to produce this PNG file. […

So now I experimented with colours. In SC I made this PNG with random colours:

Then, the same as above (photo on V1 and this image on V2, applied “Blend Mode:Hard Light” to V2.
Result:

Aha - most colours have some transparency, apart from RED and BLUE, which are solid (opaque).

So I did a bit of thinking and some research into the science of colours and found some useful information …
I made another PNG. This time, all the colours are known as 100% colours, or fully saturated colours:

This was the result when the Hard Light Blend Mode was applied:. (All colours are solid).

There are only 8 of these 100% colours:
BLACK, WHITE, RED, GREEN*, BLUE, MAGENTA, YELLOW and CYAN*.

They’re called 100% colours because the 3 RGB values for each colour are combinations of either 0 (minimum) or 255 (maximum).
I’ve explained it in this PNG (maximise it to read the text):

This is all useful stuff to me because:

1. myself and @elusien have been working behind the scenes and we devised a 3rd method of drawing a revealing rectangle (used to highlight a section of a video eg a block of text or part of an image), which utilises HTML/CSS (as an alternative to @musicalbox’s Glaxinmate solution and @poisonedslice’s Mask solution) (I’ll post about this shortly), and knowing this information about colours will now allow me to achieve solid colours, without having to use the Chromakey filter, which produces low quality results,
   and

2. it enables me to design coloured animated text effects using HTML. (Yes folks, I’m still doing this…!!)

So here are two demo videos.

1. Showing an animated (spinning) video title I created with HTML/CSS with white, cyan, magenta, yellow, blue and red colours. The videos were created by recording the browser output feature in OBS (following @elusien’s method) and clearly show the clarity of the coloured text with virtually no colour bleed, both of the colours of the text itself and the black drop-shadow:

A Demo - made in Shotcut, with coloured text, with the BlendMode:Hard Light Filter (No audio)

2. This video is a work in progress but I’m posting it to highlight the opening coloured animated text title. Again, created with HTML files (two- one for the horizontal spinning text and the other for the vertical spinning text). For more details, read the YouTube description.

JUGGLERS! - A piece for flute and piano

PS I also found out two more pieces of useful info:

1. HTML colour “CYAN” is the same as HTML colour “AQUA”.
2. HTML colour GREEN is not the 100% saturated green. It has a value of RGB (0,128,0). For the saturated green I wanted, I had to type “LIME”.

I thought I’d share all this here in case anyone was interested. Cheers!

[Elusien]

A well explained and very useful thread. When using colours in HTML it is (usually) best to use the ‘#’ notation (#rrggbb), or RGB(r, g, b), or HSL(h, s, l), rather than names. Underlying values have changed names in the past. A good resource is:

HTML Color Codes

[jonray]

Thanks @elusien for this handy colour guide. I know you know this already but other users may like to see that the HTML hex colour codes correlate to the RGB colours, with “ff” meaning 255 (full) and “00” meaning 0 (zero):

White RBG (0, 0, 0 ) = #000000
Black RBG (255, 255,255) = #ffffff

Red RBG (255, 0, 0) = #ff0000
Green RBG (0, 255, 0) = #00ff00
Blue RBG (0, 0, 255) = #0000ff

Magenta RBG (255, 0, 255) = #ff00ff
Yellow RBG (255, 255, 0 ) = #ffff00
Cyan RBG (0, 255, 255,) = #00ffff.
Fascinating.

[Elusien]

Good idea. In fact, in CSS a color can be defined in any of the following ways:

• Using a keyword (such as blue or transparent). All existing keywords specify a color in the sRGB color space.

• Using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations). These always specify a color in the sRGB color space.

• Using the HSL cylindrical-coordinate system (via the hsl() and hsla() functional notations). These always specify a color in the sRGB color space.

• Using the HWB cylindrical-coordinate system (via the hwb() functional notation). These always specify a color in the sRGB color space.

• Using the LCH cylindrical coordinate system, via the lch() functional notation. This can specify any visible color.

• Using the Lab coordinate system, via the lab() functional notation. This can specify any visible color.

• Using the color() functional notation, to specify a color in a variety of predefined or custom color spaces.

The latter 3 are in the CSS specification, but not widely implemented in browsers yet. For more detail see:

- CSS: Cascading Style Sheets | MDN

[jonray]

Very useful! Thanks!