• entries
    11
  • comments
    9
  • views
    13435

Color.. not that simple

Sign in to follow this  
tnovelli

1109 views

Last year when I started drawing characters for my "Cult RPG", I noticed how the standard RGB and HSL/HSV color pickers are no good at selecting real-world colors. So I studied up on color perception. The good news: this problem was solved 100 years ago. Bad news: software developers are still in the dark. So, fellow devs, check it out...

I won't go into all the details. Here's a good visual overview of the "color spaces" I'm talking about: http://www.colorbasics.com/ColorSpace/. And if you want to read some code, https://github.com/fponticelli/thx.color looks like one of the more complete colorspace conversion/manipulation libs, but I haven't looked closely.

To see just how bad RGB/HSL are, try to draw your skin color in a paint program. Using HSL, you have to guess at the closest hue (red-orange, if you're lucky) then adjust the saturation & lightness toward a tan or brown. Then tweak H toward red or yellow, then readjust S and L. Unfortunately there's no way to add a little pink, or vary between tan and brown; you have to move all 3 sliders blindly.

The crux of the problem: HSL shows a 2D gradient of shades for a given hue (e.g. black-white-orange) and a 1D scale of hues (a rainbow).

Can we have a 2D view of hues and a 1D black-white scale?
Yes. The old XYZ colorspace from 1931 does exactly that. LAB and LUV and LCH are improvements on it.

Color picker implementations

I wrote a JQuery perceptual colorpicker plugin (pictured above). I use it in my homebrew game graphics editor. It's not great but it's an improvement.

GIMP recently added one. It's too small and glitchy as of GIMP 2.8.10, but it's a start. I think Photoshop did it better and slightly sooner.

The ideal would be a huge perceptual colorpicker filling half the screen (with room to view your artwork in the other half), zoom controls for fine-tuning the hue, and smaller RGB/HSL/etc colorpickers so you have all the options.

What matters

RGB monitors can only represent a subset of the colors we can see in the world?
Yes, it's true, but there's nothing you can do about it when you're making game art.
"Wide gamut" monitors can represent more colors...
Most LCD monitors have bluish white backlight LEDs, but you can get professional color-calibrated monitors with wide-spectrum backlights and IPS panels; basically they fill out the red side of the spectrum. I have one (Dell U2413) and it's nice... a huge improvement over cheap monitors. But for gaming I'd opt for a high-refresh TN panel instead. I have one of them as well, and I can barely tell the difference, and I have eagle eyes (when I'm wearing my glasses).
So, a "pro" monitor is nice to have, but any decent monitor will do.

Which colorspace - LAB vs LCH vs LUV?
CIE LAB is the standard colorspace you'd use to tell someone an exact color. But the math is more complicated. LUV is simpler and corresponds more closely to RGB monitors. LCH is a more uniform version of LUV, with fancy math.
LUV is good enough for picking colors for game art.

Saving colors... RGB or perceptual colorspace coordinates?
Standard 24-bit RGB "#aabbcc" notation is adequate for any color a monitor is capable of displaying.

Colorspace conversion math is overkill.
To convert RGB to LUV (etc), you do a matrix transform to XYZ then another transform to get to LUV.
That's overkill for a color picker. I could probably come up with a simpler colorspace with a one-step RGB conversion formula but I haven't gotten around to it. Maybe someone else has.
Sign in to follow this  


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now