Digibury: Martin Jewiss - Colour, Creativity and Running Away

Colour, creativity, &… running awayExploring the impact of colour on psychological function to create a colour palette for code editors

Martin JewissLead DeveloperMpjdesign

Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.

This will get better, I promise

Text editors, code editors, IDEs.

Developers• programming

Creative writers• concentrate on words not formatting

Designers• designing in the browser

• when design needs creating

Colour themesHelp di!erentiate di!erent code elements and languages.


Scratch that itch

New languages for designing and developing websites appear all the time.

No theme for my favourite code editor that would work correctly with the languages we had started using.

Solarized• A rigorously designed theme

• Intended for use in di!erent environments

• Almost constant contrast ratio between light and dark themes


Coding Screens are bad for you

Who does not spend too much time in front of their screen?• Eye strain

• Chronic eye damage

A theme that's kind to your eyes?• Could it help reduce eye strain?

• Green is supposed to be restful for your eyes

• Where's the research?

(A lot of) colour theory is gu!• Creative & scientific folklore

• Old research with simple, possibly faulty methodology

• Subconscious cultural or ethnic bias


Coding Screens are bad for you

Who does not spend too much time in front of their screen?• Eye strain

• Chronic eye damage

A theme that's kind to your eyes?• Could it help reduce eye strain?

• Green is supposed to be restful for your eyes

• Where's the research?

(A lot of) colour theory is gu!• Creative & scientific folklore

• Old research with simple, possibly faulty methodology

• Subconscious cultural or ethnic bias


Some fine people thought the same…

Stephanie Lichtenfeld, University of MunichAndrew Elliot, University of Rochester, New YorkMarkus Maier, University of MunichReinhard Pekrun, University of Munich

A lack of scientifically rigorous theory about colour psychology.

A general model of colour and psychological functioning.

Assumptions• Colours can communicate specific meanings

• We are biologically predisposed to respond to di!erent colours in di!erent ways in particular situations (Nature)

• Learned associations play a part (Nurture)


So they experimented on guinea pigs people…

Basic methodology1. Expose test subjects to a colour (e.g. red

door)

2. Ask subjects to perform tasks which measure intellectual or creative performance (e.g. solve an anagram, list how many ways can a tin can be used?)

3. Measure activity in specific regions of the subject’s brain

4. Debrief the subject to confirm age, gender, ethnicity, and their conscious reaction to the test


And they found…

Red• Reduced intellectual performance but

increased mental e!ort

• Undermined analytical performance

• No influence on creativity

• May help with basic detail-oriented cognitive tasks requiring little mental processing

Green• Improved performance in creative tasks

• No influence on analytical performance

• E!ects were sub-conscious


Run Away! or Come Here!

• Very di!erent results in social situations

• Context is key

• Research may be refined or disproved, both leading to di!erent conclusions

• What about colour blindness?

• What about physiological e!ects?

• Other factors will probably a!ect you more - the flu anyone?

But it’s the best information available now.


1.6180339887…

Also known as:• The Golden Section

• Phi

• Golden Ratio

• Medial Section

• Divine Proportion

• etc.

a:b is the same ratio as a+b:b

Used, seen, or experienced in:• Art

• Architecture and Design

• Music

• Nature

• Mathematics

• Perception studies

http://onlyhdwallpapers.com/high-definition-wallpaper/spiral-golden-ratio-desktop-hd-wallpaper-379454/


1.6180339887…


• Phi

• Golden Ratio

• Medial Section


• etc.




• Music

• Nature

• Mathematics


Max Ronnersjöhttp://en.wikipedia.org/wiki/File:Aeonium_tabuliforme.jpg


1.6180339887…


• Phi

• Golden Ratio

• Medial Section


• etc.




• Music

• Nature

• Mathematics


Andrew Baldwinhttp://en.wikipedia.org/wiki/File:Parthenon_night_view.jpg


It's colour Jim, but not as we know it

Colour spaces are imperfect scientific models to work with and communicate colour information.

Calculations to translate a colour between colour spaces are also imperfect.

sRGB(red, green, blue)Used in monitors, televisions, cameras…

HSL(Hue, Saturation, Lightness)Variant of the classic colour wheel.

CIE L*a*b*(Lightness, a-axis, b-axis)Approximates human perception of colour.
















The Golden Section meets L*a*b*

L* = +50Best colour “purity”

a* axisNegative: 128/φ" = -49

b* axisPositive: 128/φ = +79

ConversionsRGB: 53, 137, 0Hex: 358900

Hue: 97°Saturation: 100%Lightness: 27%

Luminance: 43%


Enlightenment

Contrast ratio: the perceived brightness of foreground against background.

Contrast ratio for AAA web accessibility: 7:1Contrast ratio AA web accessibility: 4.5:1

1. Use Golden Section to calculate points on the L* axis, starting at L*=50.

2. Contrast trials using combinations of dark green background and light green text.

3. Final choice: a judgement made under o#ce lighting.

A lower contrast alternative may will be useful for working in lower light.


Enlightenment

Contrast ratio: the perceived brightness of foreground against background.

Contrast ratio for AAA web accessibility: 7:1Contrast ratio AA web accessibility: 4.5:1

1. Use Golden Section to calculate points on the L* axis, starting at L*=50.

2. Contrast trials using combinations of dark green background and light green text.

3. Final choice: a judgement made under o#ce lighting.

A lower contrast alternative may will be useful for working in lower light.


Foundation colours

Text colour• L*a*b* values: 76, -49, +79

• HSL values: 82°, 100%, 41%

• RGB hex value: 85d000

• Luminance value: 69%

Background colour• L*a*b* values: 15, -49, +79

• HSL values: 114°, 100%, 10%

• RGB hex value: 053100

• Luminance value: 14%

Contrast ratio• 7.6:1


Going round in circles

The HSL Colour Wheel

Use angles to calculate harmonious colour combinations:• Complementary

• Triadic

• Tetradic

• Analogic





• Triadic

• Tetradic

• Analogic





• Triadic

• Tetradic

• Analogic





• Triadic

• Tetradic

• Analogic


Going round in more circles

1. Plot colours 30° apart

Visually perceived brightnessWe don't perceive all colours of the same lightness to have the same brightness.

2. Luminance: 43%

3. Remove some coloursIncrease the di!erence in hue between those that remain.

4. Tinkering with contrast ratios

5. Replace red with grey





2. Luminance: 43%








2. Luminance: 43%





Wallace: the not-so-final colour palette

There is still a lot to do:• Revisit perceived brightness values and

conversion algorithms

• Complete Wallace for Espresso

• Translate Wallace to Textmate and Sublime

• Create a lower contrast version

• License questions

• Publish on Github

• Does it work? A nice research project…


https://github.com/martinjewiss/wallace

Contact@[email protected]

ReferencesLichtenfeld, S., Elliot, A.J., Maier, M.A., & Pekrun, R. (2012). Fertile Green: Green Facilitates Creative Performance. Personality and Social Psychology Bulletin, 38, 784–797.

Elliot, A.J., & Maier, M.A. (2007). Color and Psychological Functioning. Current Directions in Psychological Science, 16, 250–254.

ThanksJohn: workwithcolor.comTobias Stamm: manderim.chIan Beck: macrabbit.comKieran Patel: @kieranajp

Other Toolsleaverou.github.io/contrast-ratioethanschoonover.com/solarized

