labs.cooperhewitt.orgCooper Hewitt

Labs Labs Technology + Media + Experience Menu Home Topics CH 3.0 Backends Education Collection data Tablets Meta Issues Publishing Digitization Published Papers Making ‘Dive into Color’ Leave a reply Guest post by Olivia Vane ‘Dive into Color’ is an interactive timeline for exploring the collection by colour/colour harmony and time. It is exhibited in ‘ Saturated: The Allure and Science of Color ’ 11 May 2018 – 13 Jan 2019. Since spending time at last year on a fellowship, I returned to London where I’m a PhD student at Royal College of Art (RCA) in Innovation Design Engineering supervised by Professor Stephen Boyd Davis . At , I developed a prototype timeline tool for visualising the museum collection by tags . This post describes further work on that prototype, shifting the tool to exploring the collection by colour. As a curator explained: [visualising by] colour, I think, is useful for the purposes of the study of the taste for different colours, but it’s also a more interesting exercise for the public just to be able to do and get pleasure out of .” Colour is enjoyable – it’s eye-catching and vibrant – and it offers a visual, intuitive way to explore a digitised collection without needing specialist knowledge. With a design collection like ’s, tracing colour through history is also interesting for looking at fashions and innovation in colour technology. I’ve been asked a few times recently what my process is for designing visualisations. So in this post I’m going to step though the early prototypes and retrace my design decisions. Along the way, I will talk over practical points for working with colour (and colour harmonies!) in collection data, and working between digital and artist colour systems. Previous colour-collections visualisations Colour has previously been used both as a facet for search and for visualising collections. Geoff Hinchcliffe’s ‘ Tate Explorer ’ offers colour as a search facet paired with a timeline. This prototype from the Swedish National Heritage Board (write-up forthcoming) combines colours and tags for exploring a fashion collection. Richard Barrett-Small’s ‘ ColourLens ’ searches over Rijksmuseum and Walters Art Museum data by colour with a graphic for each item visualising its colour proportions. And Google Arts & Culture’s ‘ Art Palette ’ is a search engine that finds artworks based on a chosen colour palette. Collections visualised by colour include the Library of Congress, where Laura Wrubel created this tool for overviewing the colour palettes of objects over a collection and Jer Thorp visualised the colour names present in the titles of works . Also using data, Rubén Abad created this visualisation of the colours present by decade in ’s objects. Lev Manovich has visualised artworks, for example Mondrian and Rothko paintings, by colour characteristics including hue and saturation. Everardo Reyes visualised Paul Klee’s paintings by hue. And Brian Foo’s visualisation of the New York Public Library digitised collection has an option to organise items by colour. I was interested to explore colour alongside the time dimension. And since was preparing for an exhibition, ‘ Saturated ’, focusing on colour theory and design, I was intrigued to see if I could trace colour harmonies across the collection. Colour harmonies are combinations of colours that are pleasing to the eye. The relative positions of colours in a colour wheel can be used to describe different harmonies like complementary colours (opposites on the colour wheel), or analogous colours (neighbours on the colour wheel). Artists and designers create different visual effects and contrasts with different harmony types. Colour harmony examples, image from studiobinder Extracting colours across the collection It’s already possible to search by colour on ’s collection site. Colour data was extracted using Giv Parvaneh’s great tool RoyGBiv (described in this Labs post ). Roughly, RoyGBiv works by checking the colour value of each pixel in an image, clustering colour values that are similar enough to be considered the same and returning up to 5 dominant colours in an image. The colours extracted from ’s collection with RoyGBiv are good on the whole, but errors sometimes occur. The background colour is sometimes picked up. The effect of light and shadow on a 3D object can introduce multiple, illusory colours: As always there are quirks working with digitised collections, like these Dutch tiles which had coloured stickers on them when they were photographed: Or lace photographed against a dark background for contrast: Since the possible number of unique colours extracted across the collection is huge, searching by colour on the website is simplified by snapping extracted colours to the closest value in a standardised palette (the default is the CSS4 web colour palette, but the CSS3 and Crayola palettes are also options). On the website, you can search the collection by 116 CSS4 colours. Both the original and ‘snapped to’ colour palettes are available in the data – all stored as hex codes (six hexadecimal digits representing the levels of red, green and blue). Colour search on the website , Aug 2018 Prototyping As a first step, I adapted my code to visualise collection items matching a CSS4 colour on a timeline (see visualisations below). Although has an API (an Application Programming Interface: a way for someone to make use of ’s data through a set of pre-defined requests made over the web), there is no method for returning all the objects matching a colour. Instead, I used collection data had put on GitHub – an argument for institutions to offer both! ‘Orangered’ ‘Steelblue’ ‘Olivedrab’ I then started exploring how I might visualise objects featuring a colour harmony, first trying complementary colours (opposites on the colour wheel). I initially tried to do this by matching a chosen CSS4 colour with the nearest CSS4 colour of opposite hue. The HSL and HSV (hue, saturation, lightness/value) colour systems define hue as an angle round a circle (0-360°), so I inverted hues by converting hex codes to HSL. The visualised results were unsatisfying though, as often the search failed to find any matches. This doesn’t mean to say there was a lack of objects with complementary colours, but that my search was too precise (and artificially precise since which CSS4 palette colours you can consider to be complementary is fuzzy, and the colour data is imprecise anyway e.g. the illusory colours extracted for 3D objects). I tried extending the reach of my search to matching several colours close to the inverted hue, but it felt very frustrating not to have a visual reference to the range of colours in a region and what colours were being searched over. So I started experimenting with using a colour wheel input as a way to pick colour combinations and simultaneously see possible hue relations. I first tried mapping the colours from the standardised palettes by HSL round a circle. ‘Snapped to’ colours in the collection. CSS4 (left) and Crayola (right) palettes mapped by hue (in HSL). Angle = hue, radius = lightness. And to make it easier to see the possible colours, I wrote some code to map the CSS4 palette colours to a wheel. CSS4 palette colours → mapped round a wheel. Hue (HSL) = angle, ordered by lightness I realised at this point, though, that the resulting design doesn’t match a typical artist’s/pigment colour wheel (which has red, yellow, blue – RYB – primary colours). HSL is a simple transformation of RGB colour space, and therefore the wheel has red, green, blue primaries. If this colour wheel is used to search over design artefacts, surely it would be more appropriate to use a design closer to the norm for artists and designers? (These in-depth articles by David Briggs – part 1 , part 2 – explain the differences between traditional and modern colour theory, and colour training for artists). There is no ‘correct’ colour wheel to adopt, but converting my HSL...