Color computation

R

Richard Cornford

(e-mail address removed) ha scritto:

:)) No just hex strings. The necessity to deal with rgb()
also came from the observation (jim) that Firefox does an
automatic conversion to rgb().
Click to expand...
<snip>

The observation that one browser 'normalises' CSS color values into a
standard CSS color format does not mean that it is necessary to handle
two formats, it means that it can be expected that any browser could
'normalise' any CSS color value into any CSS color format, or not, at
the whim of the browser's programmers. You cannot assume any single
format when you read the properties of the style object, and the only
set of formats that can be assumed is the entire CSS set. (with known
extensions such as IE's liberal set of additional color names).

Richard.
 
P

pamelafluente

Translate, please ;)
Click to expand...

Quite OT

At the time KUBRICK made 2001: A SPACE ODYSSEY the year 2000 seemed to
be far away and we imagined that the world should be completely
different. Traveling in space-time, cars flying and so on, ... and now,
in the 2006, we find ourself sitting on a chair, fighting with CSS to
be able to vertically align a couple of text lines ... that's kind of
ridiculous ...

http://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(film)

-P
 
S

scriptguru

ASM напиÑав:
(e-mail address removed) a écrit :

But I didn't really understand what is inverse
(when speaking about colors)
Click to expand...
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).
I made a demo page with what I could see here :
<http://stephane.moriaux.perso.orange.fr/truc/convertisseur_couleurs>
Click to expand...
It works fine and seems to be handy!

Val Polyakh
 
S

scriptguru

You can shorten it by using

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

instead of

var x = (0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16);
x = x.length<4? '0000'+x : x.length<6? '00'+x : x;
return '#'+x.toUpperCase();
 
P

pamelafluente

It works fine and seems to be handy!
Click to expand...

To me (IE on xp) it gives error when I load the page: row 28: Object
necessary.
Similar error on row 27 if click on the button.


BTW

When I reference a JS script in my <head> and the script is not there,
how can I have the load to proceed without the error message. Is there
a way to avoid it ? e.g. load without complaint, just ignore it?

-P
 
A

ASM

(e-mail address removed) a écrit :
To me (IE on xp) it gives error when I load the page: row 28: Object
necessary.
Similar error on row 27 if click on the button.
Click to expand...

No error with my IE 5.2 Mac ...

There is no table in this page !
But, by 'row', perhaps IE wants to mean 'line' ?

line 27 :
$('c1').style.background = $('col1').value;
where $() is a shortcut for doc.gEBI()
line 28 :
something similar but longer

Would have IE Win xp to need backgroundColor ?

One time IE accepts in css rules .foo { color= blue }
or is glad with a name when we call an id
One time it could not accept a color if we do in JS :
foo.background = '#ff0'
? ?

I've fixed it
Is it OK now ?
When I reference a JS script in my <head> and the script is not there,
how can I have the load to proceed without the error message. Is there
a way to avoid it ? e.g. load without complaint, just ignore it?
Click to expand...

it is in browser's preferences
onglet : Contenu Web (web containt ?)
[ ] Activer les scripts (active scripts)
[ ] Activer les erreurs de scripts (active errors)

But ... errors can't be ignored
an error would have to stop all the JS (IE, FF, and others)
 
E

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()
Click to expand...

Why .toUpperCase() ?

CSS seems quite happy with lowercase.
 
A

ASM

(e-mail address removed) a écrit :
ASM напиÑав:
Click to expand...

ni poo ni my : напиÑав
:)
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).
Click to expand...

And that is in accordance with chroma wheel ?
It doesn't seem : #f00 (red) in inverse = #0ff (not green)

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 ?
 
S

scriptguru

ASM напиÑав:
(e-mail address removed) a écrit :

ni poo ni my : напиÑав
:)
Click to expand...
напиÑав == 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?
And that is in accordance with chroma wheel ?
It doesn't seem : #f00 (red) in inverse = #0ff (not green)
Click to expand...
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 ?
Click to expand...

I've explained this expression few posts ago.
0xFFFFFF is white.
Substract any color from white and you get inversed (complementary)
color

Val
 
S

scriptguru

Evertjan. напиÑав:
wrote on 12 sep 2006 in comp.lang.javascript:


Why .toUpperCase() ?

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

Val
 
A

ASM

(e-mail address removed) a écrit :
ASM напиÑав:
BTW "ni poo ni my" is very close to russian "don't understand" :)
Click to expand...

So you did notice it :)
How you know this?
Click to expand...

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 :)
Substract any color from white and you get inversed (complementary)
color
Click to expand...

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
 
S

scriptguru

Substract any color from white and you get inversed (complementary)
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
Click to expand...

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
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Tue, 12 Sep 2006 05:52:19 remote, seen in
I've explained this expression few posts ago.
0xFFFFFF is white.
Substract any color from white and you get inversed (complementary)
color
Click to expand...


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.
 
P

pamelafluente

Dr John Stockton ha scritto:
JRS: In article <[email protected]>,
dated Tue, 12 Sep 2006 05:52:19 remote, seen in



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.
Click to expand...

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
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Tue, 12 Sep 2006 15:59:26 remote, seen in
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.
Click to expand...

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..
 

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: 29 (members: 0, guests: 29)
Robots: 310

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,008
Latest member
HaroldDark

Latest Threads

Top