Blog


Color Profiles in Firefox 3

April 29th, 2008

Deb Richardson wrote up an interesting piece today describing color profile support in Firefox 3. The result of a color profile is a more-accurate mapping from an original set of colors to better match the intended rendering. Profiles can be provided by the operating system (to provide better color distribution globally) or even locally by individual images.

For example, observe the following image which compares the difference between Firefox 2, Firefox 3 (with color profile support), and an image in Adobe Photoshop:

There is a noticeable difference between the rendering of the image in Firefox 2 compared to both Photoshop and Firefox 3 (in which they are rendered identically). All of this is due to the fact that Firefox 3 and Photoshop use the additional color profile information to get a better mapping of the resulting colors.

There's one tricky point, however: Color profile support is disabled, by default, in Firefox 3. However, it can be quickly enabled by installing the Color Management Add-on or by twiddling some options in about:config.

The reasoning for the feature being disabled was outlined for two particular issues:

  1. There was a large 10-15% drop in performance when this feature was enabled. The extra time spent on large images began to add up quite quickly. Obviously this will be a point that'll be worked on in upcoming releases - but introducing a regression that large was pretty much unacceptable.
  2. Plugins (such as Flash, Silverlight, Quicktime, etc.) did not do color profile correction, causing rough mis-renderings to occur. This correction is, unfortunately, left up to the plugins themselves - leaving this out of the realm of the browser itself. It's unclear as to how this will be resolved.

At the very least, however, you can grab the Color Management Add-on with your copy of Firefox 3 and begin to view your pictures with an extra level of color and crispness.

Tags: firefox, colors, mozilla, browser

Numbers, Hex, and Colors

May 2nd, 2007

Justin just made a post to his blog showing a nifty solution for converting an 8-bit number into a hex string, that's now built into Prototype.

I took the code, fleshed it out, and made a complementary function (converting from hex to a number). Here they are for you to enjoy:

// JS Hex/Number: Copyright 2007, John Resig
// http://www.opensource.org/licenses/mit-license.php
function toHex(){
  var ret = "";
  for ( var i = 0; i < arguments.length; i++ )
    ret += (arguments[i] < 16 ? "0" : "") + arguments[i].toString(16);
  return ret.toUpperCase();
}

function toNumbers( str ){
  var ret = [];
   str.replace(/(..)/g, function(str){
    ret.push( parseInt( str, 16 ) );
  });
  return ret;
}

And then they can be used like so:

toHex( 125, 255, 0 )
>> "7DFF00"
toNumbers( "7DFF00" )
>> [ 125, 255, 0 ]

I love using the "secret" extra argument to parseInt - allowing to specify the base of the number that you're parsing. You simply up it to 16 and you now have a dead-simple hex-to-number convertor.

If we had JavaScript 1.6 today we'd be able to use Array.map() to make some of the above less painful, like so:

return Array.map( arguments, function(num){
  return (num < 16 ? "0" : "") + num.toString(16);
}).join('');

and be able to have fun with the array comprehension of JavaScript 1.7:

function range(end) {
  for (let i = 0; i < end; i++)
    yield i;
}
[ i.toString(16) for ( i in range(16) ) ][ num & 0x0F ]

Update: So you can specify the base of a number in the number's .toString(). Huh, you learn something new everyday! In retrospect, I don't know why I was doing the array comprehension at all when I could've just done this:

num.toString(16)

Side Note: It really irks me that there's no built-in "range" utility for array comprehension. Maybe if the comprehension wasn't limited to just for..in loops, and it included normal for loops, instead? Oh well, water under the bridge at this point.

Tags: numbers, javascript, programming, colors

Delicious Colors

April 5th, 2005

On April 1st a new 'color' feature was added to del.icio.us and I am not a big fan of it (in it's current state). What follows is an email that I sent to the del.icio.us mailing list last night (and which has yet to illict a response, unfortunately).

Hello,

Let me start by saying that I'm not entirely sure if the 'colors:'
addition that appeared on April 1st was a joke, or not, but I think
it's the start of a good idea and can be improved upon. Now, with that
in mind, I have some very serious problems with 'color:'.

1) I was reading a delicious RSS feed of one of my friends and saw a
link to one of these new color: items, I clicked it (not thinking) and
was immediately treated to an error message. Up until this point I had
thought that this addition was amusing, and mildly interesting at best.
Now I was just annoyed and very upset. Essentially, this URI will only
work on delicious and will only ever have meaning to those who view
this information on the delicious web site. This is a serious problem.

2) There is no way to find other people who link to the same color
scheme, if the colors are in a different order. Or find color schemes
which have the colors that you wish to query. Or colors that are
frequently used with the colors that you pick. Nothing. It is
completely broken contextually.

Now, how to fix this:

Take a sample entry, as it exists right now:

url: color:FF0000,FFFFFF,0000FF
title: Red with and blue!
desc: Go america (or france)!
tags: colors america france

and now consider this:

url: http://del.icio.us/tag/color:FF0000+color:FFFFFF+color:0000FF/
title: Red with and blue!
desc: Go america (or france)!
tags: colors america france color:FF0000 color:FFFFFF color:0000FF

Note: You don't have to use the delicious tag URL at all - this simply
exists to give non-delicious users some context to what is being
discussed, another url discussing the color scheme could work equally
as well (such as the one generated by
http://wellstyled.com/tools/colorscheme2/index-en.html ). Additionally,
someone could even link to a web site and describe colors that relate
to that site (e.g. http://google.com/ and color:FFFFFF).

Now, what does this afford you?
1) You do not break the existing use of delicious. Currently, it is
exclusively used to store URLs and is easily transportable (from one
data source to another or from one person to another).

2) Someone who is viewing this information from an outside source (e.g.
NOT on delicious) can still get information on what the 'url' actually
means, as opposed to a meaningless string of text which provides
errors.

3) No modification to the existing form of delicious. You could make it
such that color:* items have a background color of that color - or
maybe the text becomes that color, regardless, it doesn't break
anything. It could even be a user option to enable/disable if it
bothers them.

4) The order of the colors no longer matters. Using the 'joins' (+) you
can find all matching tag groups, or as some people might like to call
them 'color schemes'.

5) You can now do very interesting searches:
/tag/color:FF0000/ will give you everything tagged with red
...and it will give you a list of related tags (and colors?) to red

/tag/color:FF0000+color:0000FF/ will give you everything tagged with
red and blue
/tag/color:0000FF+color:FF0000/ so will this

6) It's also important to note that the use of hex codes is not
exclusive:
color:255,255,255
color:white
color:FFF
color:FFFFFF
Should all mean the same thing (by definition). Granted, each tag may
mean different things to different people, which is an important
distinction, in my opinion (hex may mean more to a web designer, rgb
may mean more to a programmer, a name may mean more to a non-technical
person, for example)

I think it's really important that this feature be re-thought, because
as it stands right now it's breaking what delicious was intended for
(or what delicious is being used for). An article on this matter can be
found here:
http://juliamae.com/hci/information-architecture/delicious-color-
sharing/

I'm curious as to what other people have to say concerning this issue,
as it's really bothering me right now (even though it probably
shouldn't, this much) and can really be made into something rather
useful and positive, as a whole.

John Resig
http://ejohn.org/
jeresig@gmail.com

Tags: colors, delicious, del.icio.us, tags, links

Current Projects

jQuery JavaScript Library

jQuery

Comprehensive DOM, Event, Animation, and Ajax JavaScript Library.

Recent Projects

Pro JavaScript Techniques

JavaScript Book

The best techniques for professional JavaScript. Published by Apress.

More Projects...