41 coaches online • Server time: 01:17
* * * Did you know? The most touchdowns in a single match is 23.
Log in
Recent Forum Topics goto Post Grotty Little Tourna...goto Post The Light and The Da...goto Post TournyS(3!):Slaughte...
Christer
Online
Khemri Tomb Kings
Star
Khemri Tomb Kings
Record
59/24/37
Win Percentage
59%
Shambling Undead
Super Star
Shambling Undead
Record
51/5/10
Win Percentage
81%
Overall
[R]
Star
Overall
Record
229/56/79
Win Percentage
71%
Archive

2019

2019-04-14 23:33:08
rating 6
2019-04-07 16:59:39
rating 6
2019-04-07 00:55:26
rating 6
2019-01-08 15:27:38
rating 5.9
2019-01-05 02:58:18
rating 5.8

2018

2018-08-17 17:28:31
rating 6
2018-08-15 00:05:40
rating 6
2018-07-17 20:17:40
rating 6
2018-06-28 14:28:08
rating 5.9
2018-05-23 17:55:10
rating 6
2018-05-10 22:42:46
rating 6
2018-05-09 19:42:28
rating 6
2018-04-30 10:44:23
rating 5.8
2018-04-23 12:33:02
rating 5.8

2017

2017-04-23 18:06:35
rating 6
2017-04-06 23:00:56
rating 6
2017-04-03 19:06:00
rating 6
2017-03-29 22:35:46
rating 6
2017-03-25 16:18:39
rating 6
2017-03-11 21:24:26
rating 6
2017-02-14 14:23:58
rating 6
2017-02-10 14:54:03
rating 6

2016

2016-11-30 00:04:21
rating 6
2016-11-27 23:40:04
rating 6
2016-11-17 18:18:07
rating 6

2015

2015-09-06 23:59:26
rating 6
2015-01-24 15:56:29
rating 6
2015-01-22 13:10:32
rating 6
2015-01-19 21:20:53
rating 6
2015-01-10 19:03:45
rating 6

2014

2014-09-09 15:35:53
rating 6

2013

2013-04-26 11:48:40
rating 5.7

2012

2012-12-18 17:37:29
rating 5.9
2012-11-18 18:19:19
rating 6
2012-09-25 13:47:16
rating 5.6
2012-08-15 12:31:53
rating 5.9
2012-08-10 23:12:22
rating 5.9
2012-06-27 22:53:48
rating 5.9
2012-04-10 11:56:38
rating 5.9
2012-03-07 13:52:00
rating 5.9
2012-02-16 16:59:56
rating 5.9
2012-02-04 19:00:41
rating 5.3

2011

2011-07-25 23:32:43
rating 5.6
2011-05-23 13:12:52
rating 5.6
2011-02-04 14:26:18
rating 5.4

2010

2010-03-26 11:38:41
rating 5.1
2010-03-01 12:16:53
rating 5.6

2009

2009-12-08 16:40:30
rating 5.8

2008

2008-09-11 14:47:19
rating 4.1
2008-02-26 21:16:54
rating 5.3
2008-01-21 01:01:58
rating 5.6

2007

2007-11-06 21:23:14
rating 5.1
2007-10-16 00:26:11
rating 5.4
2007-09-30 17:10:03
rating 5.4
2007-09-30 12:01:42
rating 5.3
2007-08-09 12:14:57
rating 4.5
2007-08-06 12:02:52
rating 4.9
2007-08-03 17:56:21
rating 5.4
2012-12-18 17:37:29
37 votes, rating 5.9
Colours are complicated
Over the last couple of weeks, I've been playing around with a little piece of technology that I cann the "Icon Builder". I've been posting this on the IRC chat a couple of times, but figured I'd write a blog about how complicated some random things can get at times.

Before I get to that, though, let me give you a bit of background:

I have a pretty high resolution screen (2560x1440, 27"). The FFB client currently runs at a fixed size which is designed for 1024x768 screens. This is all good, except that the combination of these two make the client appear really small on my screen. The icons, in particular, are very small and I have a hard time telling the icons apart.

A while ago, Kalimar brought up that he's considering a HTML5 version of the client, and the matter of scalability was brought up once more. Add to this that I have been talking a bit loosely with WhatBall about the possibility of having player icons in a scalable format (SVG).

Since Kalimar is working on HTML5 stuff, I decided that this would be a good time to look into HTML5 myself, and I decided to make a framework that takes a set of SVG icon parts (think paper doll style body parts here) and combine them into a single image.

I spent some time to build this framework, slowly improving the framework itself and I now have a relatively powerful proof of concept page set up (http://playground.fumbbl.com/IconBuilder).

Now.. I wanted to have the ability to change the colours on the images, and to do this, the source images are encoded using specific series of colours. These special colours are set up so that the graphic artist has access to three 8-bit (255 levels) intensity levels which are mapped to the selected colours. In the Icon Builder page, you will see these three shades as "Primary", "Secondary" and "SkinTone".

After playing around with this for a while, I came to the conclusion that the way I applied this colour "intensity" to the specific colour was less than ideal.

To give you more detail about this, I'll explain some really basic things about colours on a traditional monitor. Basically, a colour on your screen has three "channels": Red, Green, and Blue. Each channel has an intensity from 0 to 100%. For example, [0%, 0%, 0%] is black, [100%, 100%, 0%] is yellow and [100%, 100%, 100%] is white.

So, my first approach to applying the shade to the colour was to simply multiply each channel with the intensity level. So for example, a red colour [100, 0, 0] with a 50% intensity would end up as [50, 0, 0], while another one [100, 50, 30] with the same 50% intensity would end up as [50, 25, 15].

Unfortunately, this isn't really a very good formula. With most of us being human, our eyes ability to perceive colours varies depending on the frequency of the light (or effectively the colour of it). This quickly becomes complicated.

At this point, I thought to myself: "I've seen this HSV colour picker thing on Photoshop", and vaguely remember this acronym standing for "Hue, Saturation, Value". So I look up the information on this and it turns out there are two variations of the same concept (HSV and HSL), where Value and Lightness are the respective last letter of the acronym. In short, "Hue" is the type of colour (red, blue, yellow, etc), "Saturation" is the depth of colour (going from a grayish orange to a bold, powerful orange) and finally Lightness and Value is how bright it is.

"Great", I think, "That's exactly what I want". So.. I make the application convert from RGB (which is the name of the "colour space" used by the screens) to HSV and HSL respectively, multiply the intensity level to the "Lightness" and "Value" channels and then convert back to RGB.

Unfortunately, it turned out to not be spectacular either. The colours tended to go through a grayish boring shade, or go super saturated in certain cases making it look strange.

Ok then.. Since I was already on track to check out different colour spaces, I kept on looking. I remembered that there was something called LAB colours in Photoshop as well (L is lightness in that acronym as well as it turns out), so I look that up. And what do I see? There are different versions of this as well (Hunter LAB, standard LAB, etc). Fine.. I implemented both of those and ran tests. These were promising, but still not great. The blue channel in particular seemed to act up and not get dark enough.

At this point, I took a break from this. I've had had enough of colour spaces for the time being. The next day, I was back at it and ran across something called CIECAM02. This is a relatively new standard (I'm expecting 02 designating 2002), and it looked really primising. It's a state of the art colour space designed to match the colour response of the human eye. There are lots of complexities here (for example two intermediate colour spaces called XYZ and LMS, and white points and all sorts of things) and it's also pretty hard to find actual information on it.

In the end, I found a patch from October 02 to the "RawTherapee" open source image editing application that had an implementation of conversions to and from this CIECAM02 colour space. Mind you, this isn't actually in the official program yet as far as I can tell. Either way, I took this source and converted it to Javascript (it's GPLed, so it's fine) and tested it with my code. The first tests were really bad (again, in the blue channel), and it looked like this wasn't working properly.

But.. I persisted and ran some tests and found that taking a pure blue colour and progressively going darker not only reduces the "Lightness" channel in the CIECAM02 colour space, but also affected the saturation channel. So I ended up reducing the saturation in a linear manner together with the lightness and ended up with something that looks really really well.

If you want to play around with this, you can open the Icon Builder app and change over to the "Test" template in the top left dropdown. Then click one of the layer buttons and select the "Test Pattern" image. Finally, choose the colour space you want to see in the rightmost dropdown for the primary, secondary and skin tone rows. Click OK and you can then switch colours around using the buttons on the top.

I find it interesting to see how the different shades of the selected colour appear based on the colour space used to make them darker. Maybe that's just me though :)

That's it for this blog entry. Colours are more complicated than they appear...
Rate this entry
Comments
Posted by BlizzBirne on 2012-12-18 18:53:26
if ever in my life i need to work with colors i will likely get back to this post. what i really do not understand (apart from chinese) is ... where do you get the energy from to go through all this, just so that the colors look nicer?

you've just again shown us the ultimate dedication. i know your posts always get high ratings - but how could i rate this anything else in the light of such awesomeness?
Posted by The_Murker on 2012-12-18 19:16:40
So if WhatBall were doing new icons, he'd have to decide on what parts of his design (for each body part) were to be "primary colour", "secondary," and possibly "not changeable." (like the outlines, shadows, etc.) Sound about right?

Sure makes reworking icons sound like a daunting task.
Posted by Mr_Foulscumm on 2012-12-18 19:20:00
Yupp, add to this the fact that all colours look different depending on what colours they are placed in relation to. So you might think your blue is blue but once you put it next to an red it might not be the blue you wanted anymore.

I wish you well Christer! :D
Posted by neoliminal on 2012-12-18 19:24:25
As always, Christer, you have gone well beyond the call of duty. The icon maker is perfect and the color picker is great. I don't think you need more than what you have there (except the pickers).

Note that you will need a home/away jersey because if both teams have the same colour there will be a problem. I suggest that you not allow the "home" jersey to have white (or anything near it) and force the primary colour of the away jersey to be white. This would allow for teams to easily differentiate and is basically the NFL uses. (Actually they force the home team to use the white, but most people will want their home team colors when they play.)
Posted by Foad on 2012-12-18 19:47:18
Informative as always, you guys are awesome... I love the fact that you still seem to love this site more than we do :)

Once, just once though, I'd love to see a Christer blog post that was "And then he rolled a (1,1) and then I killed all of his menz!!!"

I'd probably still rate it a 6...
Posted by Elliott_the_Lame on 2012-12-18 20:04:36
"6" for the post, another "6" for the idea of Home/Away jerseys, and one last "6" for the hope that whatever programming it will take to alloy custom kits for in game use magically happens.
Posted by garyt1 on 2012-12-19 03:39:15
A fountain of knowledge Christer. Great work!