CodePen - Explaining Hex 8 digits Tool

Inputs

Just as a heads up there is no complex validation, who knows how badly things will break if you enter incorrect values!

Colour Original Colour Original Colour Hex

Colour R
(0-255)

Colour G
(0-255)

Colour B
(0-255)

Colour H

Colour S

Colour L

Opacity Opacity Slider Opacity (0-100 as %)

Your Final Colour (#00000000) on black, grey and white stripes (assuming you have opacity less that 100%)

Opacity as 2 digit hex value: 00

Opacity Hex Explanation:

We convert our percentage to full integers (0-100) and then to a scale of 0-255 (with 255 being the same as opacity: 1)
We then convert that number to Hex (which is base 16 so 0123456789ABCDEF with "0" being 0 and "F" being 15)
We can then use this new hexadecimal number to set the opacity using the 7th and 8th digits of our 8 digit hexadecimal code!

Hex value: #00000000

Short Hex Value: #0000

To be able to use the short form of a hex code the values for each pair (RR, GG, BB, AA) must be the same.

So #33445566 is valid as each pair of values is the same so we can shorten that to #3456.

However #33435566 cannot be shortened as the "GG" pair is different (for clarity R1 = R2, G1 = G2, B1 = B2 and A1 = A2 must all be true!)