469,366 Members | 2,241 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,366 developers. It's quick & easy.

Color computation

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

Sep 9 '06
59 6647

ASM написав:
sc********@gmail.com a écrit :
ASM написав:

ni poo ni my : написав
:-)
написав == wrote (Ukrainian)
Just using Ukrainian interface of Google Groups.
BTW "ni poo ni my" is very close to russian "don't understand" :)
How you know this?
But I didn't really understand what is inverse
(when speaking about colors)
>
If we have color1 and inverse it then would have color2 which is
complementary to color1. Complementary means that color1+color2=white
(in RGB) and color1+color2=black (in CMYK).

And that is in accordance with chroma wheel ?
It doesn't seem : #f00 (red) in inverse = #0ff (not green)
There is several slightly different color wheels. Real inverse color
for red is cyan (try in Photoshop).
Gasp !
I used your code based on hex colors !
(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16);
perhaps is it why I don't get complementary colors ?
I've explained this expression few posts ago.
0xFFFFFF is white.
Substract any color from white and you get inversed (complementary)
color

Val

Sep 12 '06 #51

Evertjan. написав:
wrote on 12 sep 2006 in comp.lang.javascript:
You can shorten it by using

var x =
(0x1FFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
return ("#"+x.substr(1)).toUpperCase()

Why .toUpperCase() ?

CSS seems quite happy with lowercase.
You right, it can be functionally equivalent but shorter without
..toUpperCase()

Val

Sep 12 '06 #52
ASM
Evertjan. a crit :
wrote on 12 sep 2006 in comp.lang.javascript:
>You can shorten it by using

var x =
(0x1FFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
return ("#"+x.substr(1)).toUpperCase()

Why .toUpperCase() ?
Oops ! code comming from my page where I wanted it in uppercase.
CSS seems quite happy with lowercase.
as JS can too do it (transform in) :-)

--
Stephane Moriaux et son [moins] vieux Mac
Sep 12 '06 #53
ASM
sc********@gmail.com a écrit :
ASM написав:
BTW "ni poo ni my" is very close to russian "don't understand" :)
So you did notice it :-)
How you know this?
I've spent few days in St Peter and Moscow very long time ago.
It is very useful when you only know and only read PECTOPAN :-)
>I used your code based on hex colors !
(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16);
perhaps is it why I don't get complementary colors ?

Substract any color from white and you get inversed (complementary)
color
And exactely equal to inverse in RGB ?
(red <-cyan) as it seems to be on my demo.

Now rest to work about complementary colors based on a chroma wheel

yellow
/\
/ \
green ---/ \--- orange
/ \
blue ---------- red
|
maroon

--
Stephane Moriaux et son [moins] vieux Mac
Sep 12 '06 #54
ASM
ASM a crit :
Evertjan. a crit :
> wrote on 12 sep 2006 in comp.lang.javascript:

Why .toUpperCase() ?

Oops ! code comming from my page where I wanted it in uppercase.
Oooops ? bis ? Probably Evertjan didn't speak to me ??
--
Stephane Moriaux et son [moins] vieux Mac
Sep 12 '06 #55
ASM wrote on 12 sep 2006 in comp.lang.javascript:
ASM a crit :
>Evertjan. a crit :
>> wrote on 12 sep 2006 in comp.lang.javascript:

Why .toUpperCase() ?

Oops ! code comming from my page where I wanted it in uppercase.

Oooops ? bis ? Probably Evertjan didn't speak to me ??
No, it was a general question.

;-}

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Sep 12 '06 #56
Substract any color from white and you get inversed (complementary)
color

And exactely equal to inverse in RGB ?
(red <-cyan) as it seems to be on my demo.
Yes it is. ;)
Now rest to work about complementary colors based on a chroma wheel

yellow
/\
/ \
green ---/ \--- orange
/ \
blue ---------- red
|
maroon
Try to draw the wheel by changing Hue (with max Saturation) in
Photoshop from 0 degrees to 360 degrees.
It shows the relation between RGB and CMY.
R<-->C
G<-->M
B<-->Y

Val

Sep 12 '06 #57
JRS: In article <11**********************@m73g2000cwd.googlegroups .com>,
dated Tue, 12 Sep 2006 05:52:19 remote, seen in
news:comp.lang.javascript, sc********@gmail.com posted :
>I've explained this expression few posts ago.
0xFFFFFF is white.
Substract any color from white and you get inversed (complementary)
color

No colour is its own inverse; but the inverse, in that sense, of gray
(#808080) is visually virtually indistinguishable (#7f7f7f).

The OP wanted to have two different colours for the elements, presumably
always distinguishable; so XOR with 0x808080 is the way to go.

But there is a further dichotomy not yet discussed.

Sometimes the coder cannot know what colour the "standard" cell will be
(because of allowing user's CSS "important" to override coder's
settings), and sometimes the coder will know what the standard colour
will be (by just imposing it).

In the latter case, one just needs
var StdColNum = 0x0000FF // blue - changeable at whim
var StdCol = HashIt(StdColNum)
var AltCol = HashIt(StdColNum^0x808080)

where HashIt is a function obvious from earlier posts here, and the
cells are set using either StdCol or AltCol.

In either case, if efficiency matters, it should usually be possible to
determine the alternate colour only once, instead of reading the
existing colour of each cell.

It's a good idea to read the newsgroup and its FAQ.
--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 12 '06 #58
Dr John Stockton ha scritto:
JRS: In article <11**********************@m73g2000cwd.googlegroups .com>,
dated Tue, 12 Sep 2006 05:52:19 remote, seen in
news:comp.lang.javascript, sc********@gmail.com posted :
I've explained this expression few posts ago.
0xFFFFFF is white.
Substract any color from white and you get inversed (complementary)
color


No colour is its own inverse; but the inverse, in that sense, of gray
(#808080) is visually virtually indistinguishable (#7f7f7f).
:(
>
The OP wanted to have two different colours for the elements, presumably
always distinguishable; so XOR with 0x808080 is the way to go.
That's a good idea. Usually one wants this transformation to make some
cursor or kind of current-row effect. It would be nice to establish
what is the best way to transform the original colors to this purpose.
In a previous post Fox proposed:

function
ComplementBackground()
{
var docColor = document.bgColor;
var bgcolor;
if(docColor.charAt(0) == "#") // converts from HTML color
bgcolor = parseInt(document.bgColor.substring(1),16);
else
bgcolor = document.bgColor; // sometimes stored as
integer value
var complement = ~bgcolor & 0xffffff;
complement = complement.toString(16);
while(complement.length < 6)
complement = "0" + complement;
return "#" + complement; // return as HTML color

}

-P

Sep 12 '06 #59
JRS: In article <11**********************@h48g2000cwc.googlegroups .com>,
dated Tue, 12 Sep 2006 15:59:26 remote, seen in
news:comp.lang.javascript, pa***********@libero.it posted :
>
That's a good idea. Usually one wants this transformation to make some
cursor or kind of current-row effect. It would be nice to establish
what is the best way to transform the original colors to this purpose.
ISTM perfectly clear that subtracting a fractional intensity from 1.0
maps 0.5 to 0.5, whereas adding 0.5 and taking the fractional part
always makes a change of 0.5; and that the biggest change possible for
an arbitrary shade occurs at shade 0.5, which cannot be changed by more
than 0.5.

The latter maps, in this application, to XORing each component with
0x80, i.e. XORing the lot with 0x808080 . Other than setting to a
constant, no operation changing the colour can possibly be significantly
faster, if the browser-maker knew his job and aimed for efficient
execution..

--
John Stockton, Surrey, UK. *@merlyn.demon.co.uk / ??*********@physics.org
Web <URL:http://www.merlyn.demon.co.uk/- FAQish topics, acronyms, & links.
Correct <= 4-line sig. separator as above, a line precisely "-- " (SoRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "" (SoRFC1036)
Sep 13 '06 #60

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.