COLARITY (Colour Clarity) - Click Flag to start, then: Adjust Sliders to show a Colour (& its opposite). You can also click on the Colour Wheel to pick a colour. Click Flag or <-- for Scratch (HSB) Colours (H=Hue), Hit Space or --> for RGB colour codes. [Convert] converts one to the other. COLARITY adds "Clarity" to Scratch's 2 ways of setting a "Colour", by showing the colour selected by the sliders & its opposite in either system (RGB & Scratch/HSB) and enabling you to convert from one to the other (and back). NOTE: There is only one colour wheel so whenever a colour is selected by clicking it, it's a Scratch Colour but it affects both the RGB and Scratch Settings. If you are on the RGB screen when you click it, it uses the Scratch Colour, Saturation & Brightness settings to create the RGB equivalent colour. *** - It is Touch Screen compatible, too. - ***
Created by @gregatku for use in Coding Classes for Kids Unlimited. Recently converted to use the new 3.0 Scratch HSB Colour System. As a result it now converts all Scratch Colours to RGB perfectly, and the inverse conversion from RGB will always return the HSB settings to their original values when converted to RGB. This Project is an optional extension of the "Scratch Colour Picker" Project, introducing more advanced students to the RGB system of setting a Colour. Showing the Hex codes is an optional extra. [Convert] code is out of scope for kids to code but may interest some. Conversion algorithms derived from Wikipedia article "HSL and HSV" Note: HSB = HSV. HOWEVER ... the Internet couldn't tell me how take account of brightness and saturation when forming the complementary/opposite colour (so it is the same as the RGB complementary colour) using only the original (selected colour's) brightness & saturation, despite 20 hours of searching! So I thought stuff Google, I will work it out myself: First I wrote a ltttle bit of Code on the RGB side so that if you click on the inner, complementary/opposite RGB colour it swaps RGB and RGB' (I left that Code in if you want to try it). Then I converted using [Convert] that colour back to Scratch colours and recorded what the new Brightness and Saturation were for the RGB Complement (RGB'). Then I entered the results into a spreadsheet and observed patterns. I mapped 5 different original brightness values (0, 25, 50, 75, 100) against 9 different original saturation values (0, 12, 25, 37, 50, 63, 75, 88, 100) for 45 combinations and then using the process described above (converting to RGB, switching the inner and outer colours by clicking on the inner colour, then converting that back to Scratch), recorded the corresponding complementary values for saturation & brightness. From the patterns observed I then developed formulas in my spreadsheet, to calculate the complementary brightness (b') & saturation (s') until I had formulas that produced the same result as my recorded results using only the original values for brightness (B) & saturation (S) and the formulas were: b' = (100-B) + B*S/100 followed by: if not (b'=0) then s' = B*S/b' end NOTE: can't divide by 0 & irrelevant what s' is if b'=0 as that's pitch black for all s' And they work as well as one could possibly expect, as you can see, by converting any colour either way and now both RGB & HSV systems show the same complementary/opposite colour. NOTE Also: If the Scratch Colour is so close to Black (B = 0) or so close to White (S = 0) or a Grey that is imperceptibly a Hue of any particular colour, that the conversion to RGB results in R, G & B all being the same value then the conversion back to Scratch will result in the Colour changing to 0 regardless of what the original Colour was. Of course it won't look any different.
