Aesthetics
IdeasKamil Szczerba

Pick­ing a pleas­ant colour palette re­mains a chal­lenge, even at com­pa­nies with a de­sign de­part­ment.

The start menu in­tro­duced with Win­dows 8. In my in­for­mal sur­vey, none of the tile colours were found pleas­ant.

Let us see:

1. De­fault colour space
   Why that hap­pens
2. Per­cep­tu­ally uni­form colour space
   A per­cep­tion-based so­lu­tion
3. Op­po­nent-process colour space
   An op­po­nent-process-based so­lu­tion
4. Phys­i­o­log­i­cal colour space
   A phys­i­ol­ogy-based so­lu­tion
5. Kamil’s colour space
   How we com­bine them into a bet­ter colour sys­tem

Ul­ti­mately, colours are en­coded on com­put­ers with 3 com­po­nents, called (im­pre­cisely): red, green, and blue. These colours are not psy­cho­log­i­cally pure, but rather a wave­length eas­ily emit­ted by pix­els. Here is the sim­plest hue picker fol­low­ing that model (called HSL) :

You can no­tice how the hue is not lin­early uni­form: there are wide swathes of the same green and blue; and nar­row but vis­i­ble swathes of yel­low, ma­genta, and cyan. This leads some de­sign­ers to favour them, while there are a bit ag­gres­sive:

There are much bet­ter spaces for our pur­pose, called per­cep­tu­ally uni­form. The goal is to be uni­form in the eye of the hu­man, in­stead of the com­puter. A re­cent ex­am­ple is Ok­lab (lu­mi­nos­ity and chroma at 80%):

The hue gra­di­ent is more vis­i­ble. It yields the fol­low­ing palette:

What has hap­pened? We have lost the pri­mary colours, and are left with laven­der, elec­tric pink, or­ange, olive… The un­for­tu­nate colours of the start menu. We can as­sume the de­signer wanted a palette that max­imised ac­ces­si­bil­ity, with a con­stant lu­mi­nos­ity, at the cost of aes­thet­ics. In­deed, lu­mi­nos­ity is part of the essence of a colour; yel­low is the bright­est, for ex­am­ple. And a dark yel­low is more ugly be­cause it dis­torts that essence. What about an es­sen­tial­ist ap­proach?

Some colours can­not be mixed: while we can imag­ine a green yel­low, we can­not imag­ine a green red. That is the ba­sis of the op­po­nent-process colour the­ory:

By ask­ing peo­ple “what is red?”, “what is green”, it is pos­si­ble to find the hue of psy­cho­log­i­cally pure colours. The Nat­ural Colour Sys­tem is an ex­am­ple:

Fi­nally, beau­ti­ful colours!

You can find a the­o­ret­i­cal ex­pla­na­tion of the rea­son why sim­pler, pure colours are more pleas­ant here.

How­ever, a deeper in­ves­ti­ga­tion re­veals that the space is not uni­form:

The bot­tom-left quad­rant changes slowly, while the bot­tom-right changes quickly. Un­for­tu­nately, spaces usu­ally do not put hues at the right an­gle in the colour wheel. Ex­cept for rare per­cep­tu­ally-uni­form spaces (like CAM16-UCS), most spaces with a data-based ap­proach (like Ok­lab), are er­ro­neous be­cause their hue data is not per­cep­tu­ally uni­form (Mun­sell for Ok­lab hues). So, how can we find the an­gle of a colour? What should be the blue on the op­po­site side of yel­low?

This prob­lem has de­feated the bright­est de­sign­ers, who use sub­op­ti­mal colour spaces. How can we solve it? The sim­ple but bril­liant so­lu­tion comes from the pa­per The colour wheels of art, per­cep­tion, sci­ence by Nick Har­ness:

Us­ing this tech­nique, we can pro­duce the fol­low­ing palette:

Fi­nally, can we com­bine the ad­van­tages of these colour spaces?

• We still en­code pure hues at ref­er­ence an­gles, like the RGB colour space.
• To know which hue to se­lect, we use Mr Har­ness’s phys­i­o­log­i­cal process.
• To find the proper lu­mi­nos­ity and sat­u­ra­tion for a hue, we look at the data from the Nat­ural Colour Sys­tem
• To in­ter­po­late be­tween pure colours, we use a per­cep­tu­ally uni­form space: a com­bi­na­tion of CIELAB for lu­mi­nos­ity and CAM16 for hue called HCT.

By in­creas­ing/​de­creas­ing the lu­mi­nos­ity by half (still in the HCT colour space), we can also get brown at 45°, pink at 0°, pas­tel blue at 225°, etc.