digibury: martin jewiss - colour, creativity and running away
TRANSCRIPT
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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)
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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/
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Max Ronnersjöhttp://en.wikipedia.org/wiki/File:Aeonium_tabuliforme.jpg
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Andrew Baldwinhttp://en.wikipedia.org/wiki/File:Parthenon_night_view.jpg
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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%
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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.
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
Going round in circles
The HSL Colour Wheel
Use angles to calculate harmonious colour combinations:• Complementary
• Triadic
• Tetradic
• Analogic
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
Going round in circles
The HSL Colour Wheel
Use angles to calculate harmonious colour combinations:• Complementary
• Triadic
• Tetradic
• Analogic
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
Going round in circles
The HSL Colour Wheel
Use angles to calculate harmonious colour combinations:• Complementary
• Triadic
• Tetradic
• Analogic
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
Going round in circles
The HSL Colour Wheel
Use angles to calculate harmonious colour combinations:• Complementary
• Triadic
• Tetradic
• Analogic
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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…
Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
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