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: inverse of hex value

1. ## inverse of hex value

I have created a spreadsheet system using js/php. The user has the ability to change the background color of a cell. Now I wish for the text color in the cell to be the inverse of the hex value which is set as the background.

Currently I just convert the hex to bin, flip the bits and then go back to hex. But if the value is 000000 or 0* or *0 I lose the 0s. I was thinking perhaps I could pad the value with a 1 at either end and remove it later, unless there is a way to stop js trimming off these values.

• Try modify your script to return strings instead of numbers when converting back in hexa. Anyway you will use the hexa result as a string in your javascript code.

• How do I go about doing that? I'm not exactly a js guru, I only ever declare variables as var.

• well... firts at all I don't think you put the problem in an appropiate manner. The "opposite" color, as you said must be treated, I guess, in a RGB manner, which means you don't need to converty bunary, but decimal.

Assuming that you have the hexa color

#00CCFF
that means you must split that in 3 and convert to decimal

00 Hex = 0; Red
CC Hex = 204; Green
FF Hex = 255; Blue

parseInt(hex,16) will do that job

Now the "opposite" color could be the difference between 255 and the correspondend RGB value

255-0 = 255 = FF Hex ; Red
255-204 = 51 = 33 Hex; Green
255-255 = 0 = 00 Hex; Blue

to convert in hexa you need a function

In fact you don't need to convert it back to hexa, but use them as well in you CSS on-the-fly code

object.style.color='rgb(255,51,0)';

That means
#FF3300

In conclusion I think you must split in 3, convert each in decimal, substract each from 255, and if you want hexa by all means, convert each back in hexa, reasamble and adding # to the result string. It would not be very difficult, can you manage it by yourself?

• I just realize that....By the way... Why not using RGB CSS from the begining, and save al lot of unecessary converting problems?

• PHP Code:
``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script language="JavaScript" type="text/JavaScript"> function bla(){ var b = document.getElementsByTagName('body')[0]; var bg = b.style.backgroundColor; alert('the present background is '+b.style.backgroundColor) alert('the present background will be change into inversed RGB color') var oldCol = bg.split('(')[1].split(')')[0].split(','); var newCol = new Array() for(var i=0;i<oldCol.length;i++){ newCol[i] = 255-Number(oldCol[i]); } b.style.backgroundColor = 'rgb('+newCol[0]+','+newCol[1]+','+newCol[2]+')'; alert('the new background is '+b.style.backgroundColor) } onload=bla </script> </head> <body style="background-color: rgb(0,204,255)"> </body> </html>  ```

• Actually, I don't know why I didn't go that direction. I guess I didn't really think about it, I just said to myself- need to invert the color, just invert the binary representation, that's easy enough. I mean, converting base to base is not exactly complex.

Thanks very much for your help (and I actually figured out the string bit) ..

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•