Hue/Saturation/Luminance

[Avaphi]

~Hue/Saturation/Luminance~
A Complete Tutorial

~What Is HSL?~
HSL. First of all, we must understand the acronym. 'H' Stands for Hue. 'S' Stands for Saturation and 'L' Stands for Luminance. HSL is basically a method of describing a color that was created using the three elements of HSL(Hue, Saturation & Luminance). To take a closer look at the meaning, we must look at the three elements individually.




Hue
Hue can only be described as your main color. In HSL, Hue will always be the same, it doesnt matter if you change the Saturation or the Luminance. It is a particular gradation of color.

Notice how the hue changed according to me moving the mouse left or right... and does not when I move up or down(Since that is Saturation, which we will learn about later :) ) Also notice how each individual color has its own hue...:
Hue Representation (http://img186.imageshack.us/my.php?image=70272363uy1.swf)



Saturation
Saturation is basically the "Purity" of a color. The value itself determines how pure the color is. When the values are low (1-10ish) It is very hard to distinguish that it is any color at all, it infact looks *very* gray. As the value of saturation rises, you can see that it gains more distinguishable color.

Take a look here in my example of what a Saturated & Un-Saturated Red looks like, Be sure to pay attention to how when the saturation level(And my mouse) decreases, the purity decreases as well and the color itself becomes more gray, here it is..:
Saturation Representation (http://img213.imageshack.us/my.php?image=22092139ew7.swf)


Luminance

Luminance. I really consider Luminance to be the "Brightness" of the color. As if you set luminance to the lowest settings you will receive black, and on if you set it to the highest available setting, then you would receive white. The value describes the intensity of the light of the color.

Take a look at my example in which it will show you the many shades of Red(Through changing luminance values) here :
Luminance Representation (http://img393.imageshack.us/my.php?image=14504493vl6.swf)



A Representation of HSL
http://img300.imageshack.us/img300/3660/asdfxc2.png



Now that you have a better understanding of HSL, lets explore the options we have of using it to our advantage !{Coming Soon}

Special Thanks

Lorax for inspiring me to create this tutorial and revisit HSL !

[bullzeye95]

Copicat :p

No offense Lorax, but I understood this much better. Although, this wouldn't have been created without you :)

Can't wait for the second part!

[Avaphi]

Indeed, Lorax was the one who inspired me to create this + he got me reinterested in HSL ! Which I <3 him long time for... :) It completley passed over my mind that HSL could be used with scar until I saw something a week or so ago about it ! Then I saw Lorax's tutorial which told my mind... Lorax = Good Scripter... A good scripter would NOT use a bad technique.. So then I remembered when my teacher shoved some HSL down my throat.. Guess it wasnt useless after all :)

+ Remember, Lorax's first language is not english, so he could not explain to the best extent.

[YoHoJo]

Yea i understand it much better now too.
Good pics.
But i STILL don't get the damn point of this stuff...

[Boreas]

Log in to a bunch of worlds and color pick something. Say water color. The numbers you get from the color picker will be millions apart. But if you convert to HSL or RGB, the values will be very close. So it can be used to find similar colors, and autocolor things, better than tolerance can.

Edit: look here uppit.com/QWMMW

[Avaphi]

Yohojo ! Just be patient and wait for me to develop some Functions with it, you will be amazed (I am planning a object finder + mapwalker maybe).

[TheGodfather]

Much like RGB, nice tutorial.

EDIT:
Question: What's scar's color based on Nowadays

[Boreas]

program New;
type rgbcolor =record
red,green,blue:integer;
end;
var
color2:rgbcolor;
//---------Setup--------
const
color=16777215;
//-------------------


function color2rgb(color:integer):rgbcolor;
begin
result.red:=(color mod 256);
result.green:=((color/256) mod 256);
result.blue:=((color/256) / 256);
end;

function rgb2color(rgb:rgbcolor):integer;
begin
result:=(((rgb.blue*256)+rgb.green)*256)+rgb.red
end;


begin
writeln('----------------');
writeln(inttostr(color));
writeln(' ');

color2:=color2rgb(color)
writeln(inttostr(color2.red));
writeln(inttostr(color2.green));
writeln(inttostr(color2.blue));
writeln(' ');
end.


RS colors are created from HSL.

[Avaphi]

Much like RGB, nice tutorial.

EDIT:
Question: What's scar's color based on Nowadays

RGB, you must convert the colors.

[Lorax]

Thanks Avaphi for making this,
I know I'm no good at explaining things to others..
That's in general and when I have to do it in English..
I didn't know that Runescape was made in HSL, I would be very suprised if it was infact.. HSL is just superior to any other way of defining colors..
I will look forward to seeing some auto coloring, I never thought of doing that..

[Avaphi]

Lorax no biggie ! I am just happy that you got me thinking about HSL again, I didnt realize how much stuff you could do with it in SCAR. Thanks again.

Avaphi

[Boreas]

You can do bruteforce autocoloring now, it's just that it will be faster when Freddy builds it into a future version of Divi. It's just 3 nested repeat loops with H,S, and L going from mins to maxs to make combinations that are searched for. More advanced autocoloring can be done with HSL if you find a smaller pattern than just ranges of components (like tarajunky did with RGB), however finding the pattern is more work :p

[JokeAss]

Nice!

Now all we need is a RGB2HSL conversion function ;)

[Starblaster100]

Nice!

Now all we need is a RGB2HSL conversion function ;)

its already in SCAR divi

[Widget]

Question: What's scar's color based on Nowadays
To build on Avaphi's explanation...

SCAR Colors are RGB that are converted to decimal form.

Let's take the SCAR color 15855597. To find it's RGB value, all we need to do is paste it into our scientific calculator like so:
http://img.photobucket.com/albums/v244/chaossliver/rgbcalc1.png

Then click on the button in the top left that says 'Hex':
http://img.photobucket.com/albums/v244/chaossliver/rgbcalc2.png

Oh look, it's a hex color!

Try it yourself with 16711680

[Starblaster100]

Where the hell did you get this mega calculator from lol, Vista?

[legendaryhero90]

Where the hell did you get this mega calculator from lol, Vista?

vista more than likely

[lordsaturn]

Uh, its just a calculator on any normal computer under accessories, just go to the viewtab, and hit 'Scientific'.

[Starblaster100]

Uh, its just a calculator on any normal computer under accessories, just go to the viewtab, and hit 'Scientific'.

man no i feel stupid :P
Thanks for that

[Bam Bam]

For those of you who still don't fully understand HSL check out my HSL Utility, it really helped me: http://www.villavu.com/forum/showthread.php?t=8639

[omgh4x0rz]

How do you figure out what the HSL numbers are for a color you are trying to find?

[Boreas]

ColortoHSL(Color, H, S, L);

http://www.villavu.com/forum/showthread.php?t=8639

[lordsaturn]

For those of you who still don't fully understand HSL check out my HSL Utility, it really helped me: http://www.villavu.com/forum/showthread.php?t=8639


Damn, can't view it.

[omgh4x0rz]

Ok, i'm still confused at how you use this. Even if you convert the water color to HSL so it won't be millions of numbers different, there is no FindHSL() like there is for FindColor().

And how do you know what the range of hue/saturation/luminence you want should be?

This is part of the Lorax+Sumilion chopper:

if(Hue > 14)and(Hue < 34)then
begin
if(arLuminance[0] < arLuminance[1] - 1.5)or
(arLuminance[0] > arLuminance[1] + 1.5)then
aCount := 0
else
aCount := aCount + 1;
end else
aCount := aCount + 1;


Normally I'm able to understand other people's code pretty well, but I saw this and just went "wtf?!"

[Boreas]

There are find HSL stuff in Divi.

For 2.03, you need to do it the same way that passwords hashs are cracked, convert both the unknown and the known in the same direction, and compare the results. Take a color on the screen, and find the HSL. Then compare that to HSL you are trying to find. First you need to get lots of colors from something you want to find, and get the HSLs for those. Then get the MinH, MaxH, MinS etc

function GetSymbolBackgroundColor:integer;
var
TmpBmp,lilbmp,MyX,MyY:integer;
MyColor,tx,ty: integer;
MyCanvas:tcanvas;
TmpBool:boolean;
MyH,MyS,MyL:extended;
begin
TmpBmp:= BitmapFromString(100,90,'');
lilbmp:=bitmapfromstring(2,2,' ');
MyCanvas:=GetBitmapCanvas(TmpBmp)

CopyCanvas(GetClientCanvas,MyCanvas,598,39,698,129 ,0,0,100,90)
for MyY:=0 to 99 do
begin
for MyX:=0 to 89 do
begin
MyColor:= MyCanvas.pixels[MyX,MyY];
ColortoHSL(MyColor,MyH,MyS,MyL);
if MyS <40.0 then
begin
if MyL > 65.0 then
begin
if MyH<60.0 then
begin
if MyL<100.0then
begin
if MyH>0.0 then
begin
FastDrawClear(lilbmp,MyColor);
if FindBitmapIn(lilbmp,tx,ty,mmx1,mmy1,mmx2,mmy2) then
begin

// tmpTPA1:=GetPixelsD(MyColor,mmx1,mmy1,mmx2,mmy2,0) ;
// tmpAOTPA:=SplitTPA(tmpTPA1);

// writeln(inttostr(getarraylength(tmpAOTPA)));
TmpBool:=true;
//mmouse(tx,ty,0,0);
end;
end;
end;
end;
end;
end;
if TmpBool then break;
end;
if TmpBool then break;
end;
if TmpBool then result:=MyColor;
end;

[omgh4x0rz]

Okay, I think i'm starting to get it. I'll probably be back with more questions later though.

see you soon