Below is a collection of writings, findings and notes on today's lecture (class 2.1)
Accessible tech colours
colour spaces research
colour space qualities (perceptual unity/uniformity, illumination, contrast ratio)
Colour technologies (bit depth, dynamic range)
css standards
colour vision impairments
colour psychology map
COLOUR SPACES
Colour is a definition of the human perception of specific visible light waves of the light spectrum, or of a single object illuminated with light (in this case, we see the light frequencies reflected by the surface of the object). Our retina has specific cells, rods and cones in particular, that are able to detect and perceive certain waves of the light spectrum (thus called "visible spectrum"), which can vary in wavelength, frequency, intensity and energy. We see a different colours depending on how much these variables and properties of light change (for example, longer waves that carry lower energy appear to be closer to colour red, whereas shorter waves with higher frequency and higher energy appear violet/blue). Colour is a definition of what happens in our body, on a physiological level, and even more on a psychological level that happens in our brain. The study of human colour perception is termed colourimetry: two objects that have different spectra, but produce the same physical sensation, might be perceived as being the same colour.
As mentioned in my last post, tri-chromatic theory can explain how our eyes physically perceive different light waves and then send signals to the brain; whereas colour opponency theory explains how the brain processes colours on a psychological level. Different species have different visual cells that operate differently, so they might perceive the same light frequencies in different ways (thus seeing different colours).
Image taken from today's lecture slides, showing the human perception of colour compared to that of other animals (dogs in particular)
It could be interesting to explore and use different types of colour spaces when working on my assignments this semester. It would be nice to explore different types of colour views and perception, for example those of people affected by colour-vision impairments, and implement these altered colours views in my environment. This could be a way of raising awareness on these different colour perspectives, and give to the audience an immersive representation of these altered colour perceptions in a 3D transformative environment.
COLOUR ATTRIBUTES
Colour can also be described as a collection of 3 main attributes (hue, saturation and value) that can be represented by mathematical values and percentages. Hue represents what the actual colour looks like (depending on what wavelength it is part of in the visible light spectrum: yellow, violet, red, green...). Saturation is about the intensity of the hue (how vibrant it is), whereas value represents the brightness of the hue (white, black, shades of grey)
COLOUR MODELS AND SPACES
When it comes to digital colour, we can see almost the exact same colour on different devices, only if they are calibrated to reproduce that specific colour code.
A colour space is a systematic way of representing colour on a mathematical space, represented by 2D or 3D geometric space. A colour space has perceptual unity when 2 colours are measured by the shortest distance, in any direction on the x axis, so that both colours can be perceived visually similar enough to each other. RGB, sRGB and HSL are not perceptually uniform, whereas CIELUV and CIELAB colour spaces are. Colour spaces can be based on human perception or physical/scientific studies. RGB and CMYK are based on human perception of colour, and are respectively:
additive (all other colours are created by mixing primary light colours Red, Green and Blue in different percentages. The more red, green and blue values we add together, the closer we get to pure white). This colour space is used a lot for visualising digital colour in workspaces like Adobe, Figma and Canva.
subtractive (all colours are created my mixing different amounts of Cyan blue, Magenta, Yellow and Black. The more we mix these colours, the closer we get to pure black). This is specifically used for printing, physical materials, dyes and pigments.
Generally speaking, a colour space is an organization of colours with respect to an underlying colourimetric model, so that there is a clear, objectively-measurable meaning for any colour in that colour space. The same colour can be expressed in multiple colour spaces, or transformed from one colour space to another, while appearing the same to our eyes.
RGB COLOUR SPACE
RGB colour space is a digital colour tool used to create all colour hues by combining different values of red, green and blue. This model uses these 3 primary colours of light, because it is based on human eye physiology and how it works to perceive and understand colours. Our eyes have 3 types of cones in the retina, and each type of cone is more sensible to one of the 3 types of light wavelength, so each type of cone "sees" a different colour (cones that are sensible to short wavelengths, see blue/violet; cones that perceive medium waves, see only greenish colours; cones that perceive long waves see red hues).These impulses are then sent from each type of cone independently to the brain. Our brain then compares each independent signal and its own magnitude (how much red is there? what/s the amount of green and blue?), and then finally summarises the information into 1 specific colour (which is the final colour we see and understand). Basically, the brain summarises and blends the amounts of signals received from each type of cones, to understand and represent any colour.
Digital screens and monitors are created to use the same colour-reception method we use naturally (tri-chromatic colour perception). All visual content we see on screen is made up by mixing different amounts of RGB triples (which result in Red, Green and Blue pixels or regions on screen, to create different colours).
A screenshot of Red, Green and blue pizels (zoomed in). Image taken from RGB color model | Color Science | Pixar in a Box | Khan Academy (youtube.com)
Representation of Yellow (yellow is created by mixing 100% value of Green and Red, and 0% Blue). Image taken from RGB color model | Color Science | Pixar in a Box | Khan Academy (youtube.com)
Representation of Pink (different percentages of Green, Red and Blue). Image taken from RGB color model | Color Science | Pixar in a Box | Khan Academy (youtube.com)
HSL COLOUR SPACE
HSL colour space is based on RGB colour space, works well with CSS standards and is compatible with CMYK as well. It is intuitive but not 100% accurate and non-uniform.
selecting colour, by choosing different amounts of HUE, SATURATION, LIGHTNESS. This colour chart is visually non-uniform, however can represent a wide variety of colours. Towards the centre of the wheel, colours are less saturated, almost tending to shades of grey (because the 3 colour contributes are almost if completely equal), whereas towards the outline of the wheel, colours are most saturated. At the very centre of the colour wheel, red becomes completely desaturated and achromatic (3 values are equal),
In order to find the right colour using this model, we first need to:
find the right hue, by moving the cursor around the wheel or by increasing/decreasing the percentage of HUE on the sidebar tool
We can then move to adjust the saturation, by moving along a straight, radial direction line towards the inner or outer part of the wheel
Finally we can adjust the lightness value (how much light there is, how white/bright those colours appear).
CONSIDERATIONS
I am not familiar with using HSL and 3D cube colour spaces, so this could be an interesting topic to explore further during the semester.
COLOUR GAMUTS
The image on the left represents our natural vision colour gamut (the range of colours we can see naturally with our eyes). The colour gamut chart on the right compares our natural colour perception space (the largest) with RGB (the smallest, at the centre of the image).
Colour gamut represents a certain subset of colours in a space. Gamuts are inherit and specific to each device, screen, visual system, and represent the amount of colours they can reproduce. Adapting the same image to a different colour gamut, might result in the alteration or complete loss of some specific hues (if the destination gamut is smaller, some original colours may be left outside of it).
CIE LAB CHROMATICITY
This colour model is approximately very close to human colour perception, however it is still not widely used in design practices. It has perceptual uniformity and has the widest colour gamut (compared to other colour spaces widely used).
CIELAB is brighter and has a wider variety of colour
CIELAB IS perceptually uniform, because has a constant of brightness, even when changing hue (RGB automatically changes contrast ratio and brightness when changing HUE)
COLOUR CONTRAST AND BRIGHTNESS
How we perceive contrast and brightness depends on what is surrounding the image. This is because our brain naturally adjusts (visual salience) to changes in brightness, focusing on objects that have a stronger hue, or are bigger in size, or move quickly. Movement is particularly important to capture viewers' attention in a digital environment. This is because, as humans, we have a natural instinct of following objects that move, as they could appear as potential danger. This is a particular aspect I would like to address in my work and assignments, by using different examples of movement, transformation, colour contrast changes (in brightness). (week 2.1 slides)
contrast of lightness/brightness
contrast ratio for good/adequate legibility and readability on screen
contrast in graphics and UI for accessible design
adequate brightness ensures good contrast between colours, in order to identify them as separate colours, or as background and foreground/background and image
brightness contrast explained through various colour spaces
Comparing different colour spaces, their positive and negative aspects and characteristics.
Image taken from week 2.1 slides
How can I use these tools to experiment with colour contrast relationships in a creative way? can we subvert the technical design standards in a creative way??
I will make a separate post (week 2.1 Homework, in which I will address how I intend to use these topics creatively in my TCRE practice).
The image above shows some experiments I've been doing to use colour creatively, by combining alternative, "weird", unusual colour combinations together. I will discuss those experiments and findings in my next post (Week 2.1 Homework).
REFERENCE LIST
Comments