Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Converting RGB to HSB

1. ## Converting RGB to HSB

http://stupidgamestuff.com/colorchanger.swf
My color changer is almost perfect, the only problem is that I can't get it to correctly find the color and translate to HSB when the user inputs the RGB values directly into the text box. Anyone think they can maybe correct my formula?
Code:
```function rgbtohsb(){
if(redV >= greenV && redV >= blueV){ foo = redV; clrhigh = 'red'}
else if(greenV >= blueV && greenV >= redV){ foo = greenV; clrhigh = 'green'}
else { foo = blueV; clrhigh = 'blue'}
if(redV <= greenV && redV <= blueV){ bar = redV; }
else if(greenV <= blueV && greenV <= redV){ bar = greenV; }
else { bar = blueV; }

brightnessV = Math.round(foo / 2.55);
saturationV = Math.round((255 - bar) / 2.55);

if(greenV == redV && redV == blueV){
hueV = 0;
} else if(greenV > redV && redV >= blueV){
hueV = Math.round(60 * (2 - (redV-blueV)/(greenV-blueV)));
} else if(blueV > redV && redV >= greenV){
hueV = Math.round(60 * (4 + (redV-greenV)/(blueV-greenV)));
} else if(blueV > greenV && greenV > redV){
hueV = Math.round(60 * (4 - (greenV-redV)/(blueV-redV)));
} else if(redV >= greenV && greenV >= blueV){
hueV = Math.round(60 * ((greenV-blueV)/(redV-blueV)));
} else if(redV >= blueV && blueV > greenV){
hueV = Math.round(60 * (6 - (blueV-greenV)/(redV/greenV)));
} else if(greenV >= blueV && blueV > greenV){
hueV = Math.round(60 * (2 + (blueV-redV)/(greenV/redV)));
} else {
hueV = 0;
}
if(hueV >= 360){ hueV = 360; }
if(hueV <= 0){ hueV = 0; }

}```

• Okay, nevermind, the formula is fine, but for some reason the hue doesn't change when I input RGB values. Here's the full code just in case anyone wants to read through it. I'll resolve this if I find the problem myself, though, it shouldn't be too hard to find.
Code:
```stop();
var hueV = 0, saturationV = 0, brightnessV = 0;
var redV = 0, greenV = 0, blueV = 0;
var redV2 = 255, greenV2 = 0, blueV2 = 0;
var hexV, hexV2, hexRGB, hexRGB2;

var hsbchange = false, rgbchange = false;
var a,b,c,d,e,f;
var a1,b1,c1,d1,e1,f1,a2,b2,c2,d2,e2,f2,a3,b3,c3,d3,e3,f3;
var foo,bar,moobar,fb3,clrhigh,clrmed,clrlow;
var hueBox,satBox,brightBox,redBox,greenBox,blueBox,hexBox;

function hexconvert1(x1){
return x1.toString(16).toUpperCase();
}
function rgbtohex(){
a1 = Math.floor(redV / 16);
a = hexconvert1(a1);
b1 = redV % 16;
b = hexconvert1(b1);
c1 = Math.floor(greenV / 16);
c = hexconvert1(c1);
d1 = greenV % 16;
d = hexconvert1(d1);
e1 = Math.floor(blueV / 16);
e = hexconvert1(e1);
f1 = blueV % 16;
f = hexconvert1(f1);

a3 = Math.floor(redV2 / 16);
a2 = hexconvert1(a3);
b3 = redV2 % 16;
b2 = hexconvert1(b3);
c3 = Math.floor(greenV2 / 16);
c2 = hexconvert1(c3);
d3 = greenV2 % 16;
d2 = hexconvert1(d3);
e3 = Math.floor(blueV2 / 16);
e2 = hexconvert1(e3);
f3 = blueV2 % 16;
f2 = hexconvert1(f3);
}
function rgbtohsb(){
if(redV >= greenV && redV >= blueV){ foo = redV; clrhigh = 'red'}
else if(greenV >= blueV && greenV >= redV){ foo = greenV; clrhigh = 'green'}
else { foo = blueV; clrhigh = 'blue'}
if(redV <= greenV && redV <= blueV){ bar = redV; }
else if(greenV <= blueV && greenV <= redV){ bar = greenV; }
else { bar = blueV; }
if((redV <= greenV && redV >= blueV) || (redV >= greenV && redV <= blueV)){
moobar = redV; clrmed = 'red';
} else if((greenV <= redV && greenV >= blueV) || (greenV >= redV && greenV <= blueV)){
moobar = greenV; clrhigh = 'green';
} else {
moobar = blueV; clrhigh = 'blue';
}

brightnessV = Math.round(foo / 2.55);
saturationV = Math.round((255 - (bar / (brightnessV / 100))) / 2.55);
if(clrhigh == 'red'){
if(clrmed == 'green'){
hueV = 0 + (60 * ((moobar * (brightnessV / 100)) / 255));
} else if(clrmed == 'blue'){
hueV = 360 - (60 * ((moobar * (brightnessV / 100)) / 255));
}
} else if(clrhigh == 'green'){
if(clrmed == 'blue'){
hueV = 120 + (60 * ((moobar * (brightnessV / 100)) / 255));
} else if(clrmed == 'red'){
hueV = 120 - (60 * ((moobar * (brightnessV / 100)) / 255));
}
} else if(clrhigh == 'blue'){
if(clrmed == 'red'){
hueV = 240 + (60 * ((moobar * (brightnessV / 100)) / 255));
} else if(clrmed == 'green'){
hueV = 240 - (60 * ((moobar * (brightnessV / 100)) / 255));
}
}

/*if(greenV == redV && redV == blueV){
hueV = 0;
} else if(greenV > redV && redV >= blueV){
hueV = Math.round(60 * (2 - (redV-blueV)/(greenV-blueV)));
} else if(blueV > redV && redV >= greenV){
hueV = Math.round(60 * (4 + (redV-greenV)/(blueV-greenV)));
} else if(blueV > greenV && greenV > redV){
hueV = Math.round(60 * (4 - (greenV-redV)/(blueV-redV)));
} else if(redV >= greenV && greenV >= blueV){
hueV = Math.round(60 * ((greenV-blueV)/(redV-blueV)));
} else if(redV >= blueV && blueV > greenV){
hueV = Math.round(60 * (6 - (blueV-greenV)/(redV/greenV)));
} else if(greenV >= blueV && blueV > greenV){
hueV = Math.round(60 * (2 + (blueV-redV)/(greenV/redV)));
} else {
hueV = 0;
}*/
}
function hsbfunc(){
var hue6 = hueV / 60;
//RED
if (hue6 > 4 && hue6 < 5){
redV = 255 * (hue6 - 4);
redV2 = Math.round(255 * (hue6 - 4));
} else if (hue6 > 1 && hue6 < 2){
redV = 255 - (255 * (hue6 - 1));
redV2 = Math.round(255 - (255 * (hue6 - 1)));
} else if (hue6 >= 5 || hue6 <= 1){
redV = 255; redV2 = 255;
} else {
redV = 0; redV2 = 0;
}
redV = Math.round(brightnessV/100 * (redV + ((255 - redV) * ((100 - saturationV) / 100))));
//GREEN
if (hue6 > 0 && hue6 < 1){
greenV = 255 * (hue6 - 0);
greenV2 = Math.round(255 * (hue6 - 0));
} else if (hue6 > 3 && hue6 < 4){
greenV = 255 - (255 * (hue6 - 3));
greenV2 = Math.round(255 - (255 * (hue6 - 3)));
} else if (hue6 >= 1 && hue6 <= 3){
greenV = 255; greenV2 = 255;
} else {
greenV = 0; greenV2 = 0;
}
greenV = Math.round(brightnessV/100 * (greenV + ((255 - greenV) * ((100 - saturationV) / 100))));
//BLUE
if (hue6 > 2 && hue6 < 3){
blueV = 255 * (hue6 - 2);
blueV2 = Math.round(255 * (hue6 - 2));
} else if (hue6 > 5 && hue6 < 6){
blueV = 255 - (255 * (hue6 - 5));
blueV2 = Math.round(255 - (255 * (hue6 - 5)));
} else if (hue6 >= 3 && hue6 <= 5){
blueV = 255; blueV2 = 255;
} else {
blueV = 0; blueV2 = 0;
}
blueV = Math.round(brightnessV/100 * (blueV + ((255 - blueV) * ((100 - saturationV) / 100))));
}
var mouseDownVar;
function mouseDownFunction(e:MouseEvent):void {
mouseDownVar = true;
} function mouseUpFunction(e:MouseEvent):void {
removeEventListener(MouseEvent.MOUSE_UP, mouseUpFunction);
mouseDownVar = false;
}
var enterDownVar;
function enterDownFunction(e:KeyboardEvent):void {
if (e.keyCode == 13 || e.keyCode == 9) {
enterDownVar = true;
}
} function enterUpFunction(e:KeyboardEvent):void {
removeEventListener(KeyboardEvent.KEY_UP, enterUpFunction);
enterDownVar = false;
}

function enterFrameFunction(event:Event) {
if((mouseDownVar == true || enterDownVar == true) && hsbchange == false){ //INPUT TEXT INTO TEXT BOXES
if(hueV != hueTB.text){
hueV = hueTB.text;
if(hueV >= 360){ hueV = 360; }
if(hueV <= 0){ hueV = 0; }
hsbchange = true;
} if(saturationV != saturationTB.text){
saturationV = saturationTB.text;
if(saturationV >= 100){ saturationV = 100; }
if(saturationV <= 0){ saturationV = 0; }
hsbchange = true;
} if(brightnessV != brightnessTB.text){
brightnessV = brightnessTB.text;
if(brightnessV >= 100){ brightnessV = 100; }
if(brightnessV <= 0){ brightnessV = 0; }
hsbchange = true;
} if(redV != redTB.text){
redV = redTB.text;
if(redV >= 255){ redV = 255; }
if(redV <= 0){ redV = 0; }
rgbchange = true;
} if(greenV != greenTB.text){
greenV = greenTB.text;
if(greenV >= 255){ greenV = 255; }
if(greenV <= 0){ greenV = 0; }
rgbchange = true;
} if(blueV != blueTB.text){
blueV = blueTB.text;
if(blueV >= 255){ blueV = 255; }
if(blueV <= 0){ blueV = 0; }
rgbchange = true;
} if(hexV != hexTB.text){
hexV = hexTB.text;
if(hexV >= 100){ hexV = 100; }
if(hexV <= 0){ hexV = 0; }
hexTB.text = hexV;
rgbchange = true;
}
}

var huechange = 255 * ((hueV % 60) / 60);
if(rgbchange == true){
rgbtohsb();
hsbfunc();
hsbchange = false;
rgbchange = false;
}
if(hsbchange == true){
hsbfunc();
hsbchange = false;
}
hsbchange = false;
rgbchange = false;

rgbtohex();
hexV = a+b+c+d+e+f;
hexV2 = a2+b2+c2+d2+e2+f2;
hexRGB = "0x"+hexV;

if(hueBox != hueV){
hueBox = hueV; hueTB.text = hueBox;
} if(satBox != saturationV){
satBox = saturationV; saturationTB.text = saturationV;
} if(brightBox != brightnessV){
brightBox = brightnessV; brightnessTB.text = brightBox;
} if(redBox != redV){
redBox = redV; redTB.text = redBox;
} if(greenBox != greenV){
greenBox = greenV; greenTB.text = greenBox;
} if(blueBox != blueV){
blueBox = blueV; blueTB.text = blueBox;
} if(hexBox != hexV){
hexBox = hexV; hexTB.text = hexBox;
}
}

function myButtonFunction(event: MouseEvent) {
var request:URLRequest = new URLRequest("http://stupidgamestuff.com");
navigateToURL(request, "_blank");
}

colorcursor.x = 25;
colorcursor.y = 349;
var colordrag = false;

function enterFrameColor(event:Event) {
if(colordrag == true){
saturationV = Math.round(100 * ((colorcursor.x - 25) / 249));
brightnessV = 100 - Math.round(100 * ((colorcursor.y - 100) / 249));
hsbchange = true;
} else {
colorcursor.x = 25 + Math.round(249 * (saturationV / 100));
colorcursor.y = 100 + Math.round(249 - (249 * (brightnessV / 100)));
}
}

function sbbtnPress(e:MouseEvent):void {
colordrag = true;
colorcursor.startDrag(true,new Rectangle(25, 100, 249, 249));
}

function sbbtnRelease(e:MouseEvent):void {
sbbtn.parent.stage.removeEventListener(MouseEvent.MOUSE_UP, sbbtnRelease);
if (e.currentTarget != sbbtn) {
colordrag = false;
colorcursor.stopDrag();
} else {
colordrag = false;
colorcursor.stopDrag();
}
}

huecursor.x = 298;
huecursor.y = 349;
var huedrag = false;
function hueFrameFunction(event:Event) {
if(huedrag == true){
hueV = 360 - Math.round(360 * ((huecursor.y - 100) / 249));
hsbchange = true;
} else {
huecursor.y = Math.round(349 - (249 * (hueV / 360)));
}
}

function huebtnPress(e:MouseEvent):void {
huedrag = true;
huecursor.startDrag(true,new Rectangle(298, 100, 0, 249));
}

function huebtnRelease(e:MouseEvent):void {
huebtn.parent.stage.removeEventListener(MouseEvent.MOUSE_UP, huebtnRelease);
if (e.currentTarget != huebtn) {
huedrag = false;
huecursor.stopDrag();
} else {
huedrag = false;
huecursor.stopDrag();
}
}
//startDrag(huecursor,true,-2,0,-2,249);

var myColor:ColorTransform;
updateBackColor();
function updateBackColor():void {
myColor=new ColorTransform(0,0,0,1,redV2,greenV2,blueV2,0);
backcolor.transform.colorTransform = myColor;
}
function enterColor3(event:Event) {
updateBackColor();
}

var myColor2:ColorTransform;
myColor2=new ColorTransform(0,0,0,1,redV,greenV,blueV,0);
swatch.transform.colorTransform = myColor2;
}
function enterColor3b(event:Event) {