Color computation

P

pamelafluente

Hi,

If I have:

<div style="background:anyColorHere"> Hi </div>

where anyColorHere is any hex string that represent a valid color.

How can I invert that background color "anyColorHere" ? Can you point
(or suggest) a script
that does that in a proper way ?

-P
 
B

Bart Van der Donck

<div style="background:anyColorHere"> Hi </div>
where anyColorHere is any hex string that represent a valid color.
How can I invert that background color "anyColorHere" ? Can you point
(or suggest) a script that does that in a proper way ?
Click to expand...

<html>
<head>
<script type="text/JavaScript">
function bla(){
var b = document.getElementsByTagName('body')[0];
var bg = b.style.backgroundColor;
alert('present background is '+b.style.backgroundColor)
alert('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 = 255-Number(oldCol);
}
b.style.backgroundColor
= 'rgb('+newCol[0]+','+newCol[1]+','+newCol[2]+')';
alert('new background is '+b.style.backgroundColor)
}
onload=bla
</script>
</head>
<body style="background-color: rgb(0,204,255)">
</body>
</html>

Soli Deo Gloria:
http://www.codingforums.com/archive/index.php?t-47335.html

Hex/RGB converter:
http://www.google.com/search?q=convert+hex+rgb+javascript
 
E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
If I have:

<div style="background:anyColorHere"> Hi </div>

where anyColorHere is any hex string that represent a valid color.

How can I invert that background color "anyColorHere" ? Can you point
(or suggest) a script that does that in a proper way ?
Click to expand...

try:

<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
x.style.backgroundColor =
x.style.backgroundColor.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
</script>

<div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:50px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
 
P

pamelafluente

x.style.backgroundColor.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
Click to expand...
....

I replay here to you both, Bart and Evertjan.

Both solution works fine.

Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string. But it is nice indeed to have this method also.

The script proposed by Evertjan is a precide reply to my question
and I feel the logic it implements is quite smart. It has also
the advantage to shield from then many complexities of a possible
parsing.
I like it a lot.

btw What is this : <div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'> Click me to invert my background</div>

in IE it does displays nothing. Is this code to test some other
browser?


-P
 
B

Bart Van der Donck

[...]
Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string.
[...]
Click to expand...

Yes, you'ld need to convert from hex to rgb (and back if necessary).
That shouldn't be too tough; see hyperlink at the end of my previous
post.
 
E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
...

I replay here to you both, Bart and Evertjan.

Both solution works fine.

Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string. But it is nice indeed to have this method also.

The script proposed by Evertjan is a precide reply to my question
and I feel the logic it implements is quite smart. It has also
the advantage to shield from then many complexities of a possible
parsing.
I like it a lot.
Click to expand...

Inverting all seperate hexadecimal characters
will give a inversion of the total number,
while the # is replaced by itself.

Regular expression is IMHO preferrable to JS looping.

btw What is this : <div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'> Click me to invert my background</div>
Click to expand...

It seems you have to learn HTML and CSS before you try Javascript.
invertMe() is the function
in the <script type='text/javascript'>...</script>

Did you run my code in a test.html ?
in IE it does displays nothing.
Click to expand...

Oh, but it does.
Did you put my code in a seperate test.html as I expect you to do?
Or did you put other lines in it? Don't.
Is this code to test some other
browser?
Click to expand...

No, IE works fine.
 
P

pamelafluente

It seems you have to learn HTML and CSS before you try Javascript.
invertMe() is the function
in the <script type='text/javascript'>...</script>

Did you run my code in a test.html ?


Oh, but it does.
Did you put my code in a seperate test.html as I expect you to do?
Or did you put other lines in it? Don't.


No, IE works fine.
Click to expand...

:)) Hi Evertjan ,

I tried pasting it in my code:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<div style="position: absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
&nbsp;</div>

<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
x.style.backgroundColor =
x.style.backgroundColor.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

</script>

<div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'>
1. Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:50px;'
onclick='invertMe(this)'>
2. Click me to invert my background</div>


</body>

</html>


I had the impression there was a block missing (perhaps was somehow
covered).

Is "background" the same as "background-color" I see you use the
latter. I always used the first. Is this a mistake?

-P
 
E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
:)) Hi Evertjan ,

I tried pasting it in my code:
Click to expand...

You should not, until you tested my code for yourself AS IS.
Only if you agree it "works", proceed.
Talking about my code "not working" in your application will not be
usefull before that.
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<div style="position: absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
&nbsp;</div>
Click to expand...

Why this? perhaps it covers the following, I did not test that.
Leave the above div away!
<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
x.style.backgroundColor =
x.style.backgroundColor.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

</script>
Click to expand...

Scripts like thease should be in the said:
<div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'>
1. Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:50px;'
onclick='invertMe(this)'>
2. Click me to invert my background</div>


</body>

</html>


I had the impression there was a block missing (perhaps was somehow
covered).
sorry?


Is "background" the same as "background-color" I see you use the
latter. I always used the first. Is this a mistake?
Click to expand...

No. Please read up on CSS, this are CSS basics.

CSS "background" is the shortcut for different background properties.

Only use those shortcuts, when you understand CSS completely.
 
P

pamelafluente

You should not, until you tested my code for yourself AS IS.
Only if you agree it "works", proceed.
Ok

Talking about my code "not working" in your application will not be
usefull before that.
Click to expand...

:) I am always sure the code you provide works. My first though is try
to find what I am doing in the wrong way.
Why this? perhaps it covers the following, I did not test that.
Leave the above div away!
Click to expand...

Yes I tried without that. It works just fine.
Scripts like thease should be in the <head> section.
Click to expand...

Yes I noticed the scripts are sometimes in the head and sometimes in
the
body. But I am not sure what difference it makes. And if there is a
difference
would it also apply to referenced JS files like in
sorry?
Click to expand...

Yes am talking about my code: The first block (mine) was covering your
first one. I did not expect that: I though your blocks would have just
follow my existing block. But assumed wrong...
No. Please read up on CSS, this are CSS basics.
Click to expand...

with masters like you guys in this group every other source is just
useless.
I have visited several group and this one is the most "simpatico"
(dont' know the right translation) !!

Thanks,

-P
 
E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
Yes I noticed the scripts are sometimes in the head and sometimes in
the body. But I am not sure what difference it makes.
Click to expand...

For the current browsers, which are very forgiving, it is not necessary I
believe.

However part of coding sanity is to make code that is pleasing to the eye
and logical with indenting etc. Putting all javascriipt that does not
document.write() in the <head> section is at least one such convention.

The above simplifies debugging and is joyful per se.
And if there is a difference
would it also apply to referenced JS files like in
<script language="javascript" src="someFile.js"></script> ?
Click to expand...

That is the same, put that in the head too.

Do not use referenced js until you are confortable with the infile code.
it is far more bothersome to debug.
 
E

Evertjan.

Jim Land wrote on 09 sep 2006 in comp.lang.javascript:
Hmmm. Try:

<SCRIPT TYPE="text/javascript">

function showMe(x){
alert('backgroundColor = '+ x.style.backgroundColor);
}

</SCRIPT>

<div style='background-color:#c0c0c0;width:150px;'
onclick='showMe(this)'>
Click me to show my background color
</div>

MSIE shows "#c0c0c0"

FF shows "rgb(192,192,192)"
Click to expand...

Damn!

Couldn't we persuade the powers-that-be to provide access to the 3 basic
colours seperately?

like:

this.style.backgroundColor.red
this.style.backgroundColor.green
this.style.backgroundColor.blue
 
P

pamelafluente

Damn!
Click to expand...

Right.
I just tried it: with Firefox your nice function seems to quit working.
:(

After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...

So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?

-P
 
E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
Right.
I just tried it: with Firefox your nice function seems to quit working.
:(

After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...

So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
Click to expand...

I hate "best" approaches.


<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>

<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
 
R

Richard Cornford

Evertjan. said:
Jim Land wrote on 09 sep 2006 in comp.lang.javascript:

Damn!

Couldn't we persuade the powers-that-be to provide access
to the 3 basic colours seperately?

like:

this.style.backgroundColor.red
this.style.backgroundColor.green
this.style.backgroundColor.blue
Click to expand...

The "powers-that-be" have defined a - RGBColor - interface which can be
used to extract separate RGB colors form - style - objects. Eventually
we may get to the point where browsers consistently implement that
facility.

Richard.
 
P

pamelafluente

Wow!
I am so fashinated how one can do some complex task
in just a couple of lines of code in javascript !

If I had to do it, I would probably used both functions (Bart's and
yours)
after checking the first char. Which, if works, is probably less
elegant ...

It will probably take me some days to understand exactly
what's going on there :)

Fantastic!

-P

Evertjan. ha scritto:
wrote on 09 sep 2006 in comp.lang.javascript:
Right.
I just tried it: with Firefox your nice function seems to quit working.
:(

After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...

So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
Click to expand...

I hate "best" approaches.


<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>

<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
Click to expand...
 
P

pamelafluente

btw
what is the purpose of that statement:
x = +x
is that some kind of conversion or what?

-P


(e-mail address removed) ha scritto:
Wow!
I am so fashinated how one can do some complex task
in just a couple of lines of code in javascript !

If I had to do it, I would probably used both functions (Bart's and
yours)
after checking the first char. Which, if works, is probably less
elegant ...

It will probably take me some days to understand exactly
what's going on there :)

Fantastic!

-P

Evertjan. ha scritto:
wrote on 09 sep 2006 in comp.lang.javascript:
MSIE shows "#c0c0c0"

FF shows "rgb(192,192,192)"

Damn!

Right.
I just tried it: with Firefox your nice function seems to quit working.
:(

After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...

So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
Click to expand...

I hate "best" approaches.


<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>

<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
Click to expand...
Click to expand...
 
S

scriptguru

Evertjan. напиÑав:
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>

<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
Click to expand...

I believe that inverting color must be simpler.
Just an idea:

var hexColor="FFAA55"
var invertedColor=0xFFFFFF-parseInt(hexColor,16)
//now we just have to set leading zeroes if needed

In RGB color+invertedColor=white, isn't it?
Then invertedColor=white-color
 
S

scriptguru

(e-mail address removed) напиÑав:
Evertjan. напиÑав:
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>

<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
Click to expand...

I believe that inverting color must be simpler.
Just an idea:

var hexColor="FFAA55"
var invertedColor=0xFFFFFF-parseInt(hexColor,16)
//now we just have to set leading zeroes if needed

In RGB color+invertedColor=white, isn't it?
Then invertedColor=white-color
Click to expand...
//I forgot: we need to convert it to hex string
var invertedColor=(0xFFFFFF-parseInt(hexColor,16)).toString(16)
//now we just have to add leading zeroes if needed
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Sat, 9 Sep 2006 02:41:12 remote, seen in
news:comp.lang.javascript, (e-mail address removed) posted :
How can I invert that background color "anyColorHere" ? Can you point
(or suggest) a script
that does that in a proper way ?
Click to expand...

You read the initial colour numerically; you invert the number; you
write the number back.

BUT : Think carefully about what inversion should mean.

Consider first just the pure red component, which will be a number in
the range 0x00 to 0xFF.

If you want to make light be dark, dark be light, and middling be
middling, then subtract the number from 0xFF.

If you want to change any colour to be a substantially different colour,
then XOR the number with 0x80.


In each case you might either treat the whole colour as being
represented by three separate components, and do three small
arithmetics; or you can treat it as one Hex number and use one large
arithmetic - XOR with 0x808080 or subtract from 0xFFFFFF.
 
E

Evertjan.

wrote on 09 sep 2006 in comp.lang.javascript:
what is the purpose of that statement:
x = +x
is that some kind of conversion or what?
Click to expand...

[please do not toppost on usenet]

Conversion of string to number.
The + here is an unary +.

These values come as a string
and comparing strings would give unexpected results.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Changing a background-color 2
How to position the *tooltip* comment on these buttons? 9
<Button ...> display is fine, except for two things 1
"input-group-text" help 7
Positioning CSS components 1
Uhhhhh, What can I do next? 6
Can I modify the tooltip display on an <input type="xx"> statement? 2
How can I add arrows to my FAQ 0

Members online

No members online now.
Total: 25 (members: 1, guests: 24)
Robots: 356

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top