Advertisement
Graphic design colour trends
Report
Dennis HotsonFollow
Aug. 19, 2012•0 likes•4,076 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
Graphic design colour trends
Aug. 19, 2012•0 likes•4,076 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Business
Detecting and visualising large scale colour trends by Dennis Hotson and Lars Yencken Presented at PyConAU 2012 in Hobart, Tasmiania. http://2012.pycon-au.org/schedule/41/view_talk?day=sunday
Dennis HotsonFollow
Advertisement
Graphic design colour trends
- G’day! Dennis Hotson Lars Yencken
- 99designs Graphic design marketplace
- Graphic design colour trends
- Design is our business
- How do you track the elements of design?
- What is the DNA of design?
- Colour
- How do we extract colours from a design?
- Colorific
- White!
- Colour theory
- RGB
- Lab Lab is designed to approximate human vision.
- L is for Lightness
- a and b are for color-opponent dimensions, based on nonlinearly compressed CIE XYZ colour — Wikipedia
- Colorific http://github.com/99designs/colorific
- Examples of use
- pip install colorific
- $ echo some_image.png | colorific some_image.png #0047f1,#e61b31,#3e7bf4,#00b018,#f9a600
- $ find . -name '*.jpg' | colorific >myphotos.colors
- >>> from colorific import extract_colors, rgb_to_hex >>> palette = extract_colors('some_image.png') >>> hex_colors = [] >>> for color in palette.colors: ... hex_colors.append(rgb_to_hex(color.value)) >>> hex_colors ['#0047f1', '#e61b31', '#3e7bf4', '#00b018', '#f9a600']
- Search by colour
- Search by colour
- Search by colour
- Indexing 100,000 designs efficiently
- Rtree Rtrees are for indexing spatial data
- ?
- ?
- >>> index = Rtree() >>> index.insert(“design1”, “#ff0000”) >>> index.nearest(“#ff0001”) “design1”
- Colour trends
- Time
- 2007 2008 2009 2010 2011
- 2007 2008 2009 2010 2011
- Location
- Industry
- accounting construction medical agriculture cosmetics photography animals dating physical architectural education politics art entertainment realestate attorney environment religious automotive fashion restaurant bar floral retail business food security children games spa cleaning home sports communications industrial technology community internet travel computer landscaping wedding
- environment environment landscaping children 0% 7% 0% floral floral dating wedding wedding cosmetics cosmetics bar fashion spa architectural automotive landscaping landscaping accounting industrial industrial politics computer security 0% 10% 0% politics attorney attorney accounting accounting medical
- ding floral automotive oral restaurant games 0% 8% 0% 20% 0% ment landscaping agriculture ping agriculture landscaping ture environment floral dren cleaning environment oral accounting spa rney entertainment automotive ment photography attorney hion fashion business ding dating children ting wedding bar 0% 9% 0% 12% 0% dren games games ment bar children oral food restaurant
- tics environment spa spa 0% 5% 0% 7% ing politics art attorney bar accounting ing business ren sports rity food ogy cosmetics ive photography rial landscaping ion floral 0% 2% 0% 7% ing landscaping cal environment spa
- Thank You
- Colorific http://github.com/99designs/colorific/ ColorDB http://github.com/dhotson/colordb 99designs tech blog http://99designs.com/tech-blog/
Editor's Notes
- \n
- Hi everyone, I’m Dennis Hotson and this is Lars Yencken.\n
- We work at 99designs, which is a marketplace for graphic design.\n
- In this talk, we want to show you how we were able to analyse hundreds of thousands of designs—and get a glimpse into colour usage in our design community.\n
- So we’ve got tens of thousands of designers submitting designs. There’s a design submitted every 3 seconds.\nWe track all kinds of stats on our customers and designers, trying to make sure the design community is thriving.\n
- But—none of these metrics give us any insight into the type of design that is happening. How can we know what is “hot” right now?\n
- We want to break down designs into their fundamental elements. We want to break each design down so we can judge it objectively. We looked at various design elements such as typography, geometry, texture. However, the design element we chose to investigate is of course— .... colour.\n
- Colour is a significant part of graphic design.\n
- How can we break down a design into its component colours?\n
- You might ask, how do we take a logo like the one above—and turn it into something like this?\nExcellent question!\n
- You might ask, how do we take a logo like the one above—and turn it into something like this?\nExcellent question!\n
- Lars and I started working on a project called colorific, which is designed to extract a colour palette from an image. I’ll give you a taste of how it works.\n
- Let’s start with something simple. What is the main colour in this image?\n
- \n
- So it turns out if you just count the pixels the background colour dominates—but that’s not really very interesting. In colorific we discard background by comparing the colours of the pixels in the corners.\n
- Quiz time: How many colours in this logo? 4?\n
- There’s actually 255 colours in this image. If you look closely you can see there are gradients with various shades of blue and artefacts around the edges.\n
- You can see we end up with something like this, we’ve got two blues that are similar but look about the same. We want to group these colours together somehow.\n
- It turns out there’s some useful colour theory that we can take advantage of.\n
- You may have used the RGB colour space before.\nRGB is not bad, but we can do better..\n
- For comparing and aggregating colours it’s better to use the Lab colour space.\nLab is designed to approximate human vision.\n
- The L channel represents lightness. Colours in Lab with the same Lightness will appear to be the same brightness to the eye.\nWhen using RGB, colours such as yellow appear lighter than others. Lab is able to adjust for this.\n
- The a and b components..... well, it’s complicated. :-)\n\nThese components describe the colour. But the magic is that when you describe colours in this way, the distance between colours corresponds to the distance for the human eye. The distance in Lab space is called the delta-E and it’s backed by research into human vision.\n
- The Lab model is a little hard to visualise but hopefully this will help.\n\nLab is three dimensional and it’s a little hard to visualise in 2d but here’s a few slices.\nYou can hopefully see that all the colours within each slice look to be the same lightness.\n
- \n
- \n
- Coming back to our example from before, we can see that by grouping colours\n
- \n
- \n
- \n
- Colorific is designed to be run in a streaming manner, you feed in filenames and it spits out filenames and their colours. It might seem a bit weird, but the reason is that it works well when running it over lots of images.\n
- For example, this style makes it easy to run across an entire folder of images.\n
- It can also be used as a Python library.\n
- So now that we’re able to extract colours from a design we can start to do some more interesting things.\nOne application we’ve been experimenting with is...search by colour.\n
- We want our users to be able to choose a colour...\n
- .. and find designs featuring that colour.\n
- In our case, we want to do this at a pretty large scale. So how can we achieve this?\n
- In order to index colours, we’re using an rtree to efficiently index and search by colour.\nRtree’s are a really useful data structure for indexing spatial data.\nNormally you use them to index spatial data such as the location of nearby coffee shops, but in our case we’re using it to index colours since they’re also kind of three dimensional.\n
- Let’s take a look at brief look at how you use an Rtree.\nSo here’s our Rtree.\n
- You can insert colours into it.\n
- And then you can search for a colour...\n
- And find colours that are nearby.\n
- Here’s an example of what it might look like in code. It’s really quite simple. One additional detail is that we index and search using the Lab colour space so that distances in the Rtree space correspond to differences in your eyes perception.\n
- Here’s a quick demo of what we managed to build.\nWe used a combination of colorific, Rtree, colormath and Flask.\n
- So isn’t that cool? By using a clever combination of computer science and Python libraries we’ve managed to achieve something quite sophisticated with not very much code.\n
- Now Lars is going to talk about how we can gain insight into how colour is being used on our site.\n
- 120,000 designs, run through colorific (top 5+1 colors for each)\n450,000 distinct colours\n\n
- \n
- \n
- \n
- seasonal trends in fashion, but not in graphic design\n\nwhilst finer-grained colours might vary over time, broadly speaking colour usage tends to be the same\n\nour take: people choose designs which will work for them for years, hence less seasonal\n
- \n
- \n
- \n
- overrepresented\n
- \n
- overrepresented\n
- \n
- \n
- green\n
- blue\n
- Conclusion.\n
- \n
- \n
- \n
Advertisement