Download as PDF, PPTX
![>>> 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']](https://image.slidesharecdn.com/pycon-colourcopy-120819070853-phpapp02/85/Graphic-design-colour-trends-30-320.jpg)
Uploaded byDennis Hotson
Graphic design colour trends
The document discusses various aspects of graphic design, focusing on color trends and the extraction of colors from images using a tool called Colorific. It highlights color theory and provides examples of using the Colorific library to analyze images and generate color palettes. Additionally, it touches on indexing design data using R-trees for efficient spatial data management.
Graphic design colour trends
- 1.
- 2.
- 3. Graphic design colourtrends
- 4. Design is ourbusiness
- 5. How do youtrack the elements of design?
- 6. What is the DNAof design?
- 7.
- 8. How do weextract colours from a design?
- 11.
- 13.
- 18.
- 19.
- 20. Lab Lab is designedto approximate human vision.
- 21. L is forLightness
- 22. a and bare for color-opponent dimensions, based on nonlinearly compressed CIE XYZ colour â Wikipedia
- 25.
- 26.
- 27.
- 28. $ echo some_image.png| colorific some_image.png #0047f1,#e61b31,#3e7bf4,#00b018,#f9a600
- 29. $ find .-name '*.jpg' | colorific >myphotos.colors
- 30. >>> from colorificimport 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']
- 31.
- 32.
- 33.
- 34. Indexing 100,000 designs efficiently
- 35. Rtree Rtrees are forindexing spatial data
- 38.
- 39.
- 40. >>> index =Rtree() >>> index.insert(âdesign1â, â#ff0000â) >>> index.nearest(â#ff0001â) âdesign1â
- 44.
- 45.
- 46. 2007 2008 2009 2010 2011
- 47. 2007 2008 2009 2010 2011
- 48.
- 52.
- 53. 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
- 54. 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ââ
- 55. 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ââ
- 56. 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ââ
- 58.
- 59. Colorific http://github.com/99designs/colorific/ ColorDB http://github.com/dhotson/colordb 99designs tech blog http://99designs.com/tech-blog/
Editor's Notes
- #2Â \n
- #3Â Hi everyone, I’m Dennis Hotson and this is Lars Yencken.\n
- #4Â We work at 99designs, which is a marketplace for graphic design.\n
- #5Â 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
- #6Â 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
- #7Â 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
- #8Â 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
- #9Â Colour is a significant part of graphic design.\n
- #10Â How can we break down a design into its component colours?\n
- #11Â You might ask, how do we take a logo like the one above—and turn it into something like this?\nExcellent question!\n
- #12Â You might ask, how do we take a logo like the one above—and turn it into something like this?\nExcellent question!\n
- #13Â 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
- #14Â Let’s start with something simple. What is the main colour in this image?\n
- #15Â \n
- #16Â 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
- #17Â Quiz time: How many colours in this logo? 4?\n
- #18Â 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
- #19Â 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
- #20Â It turns out there’s some useful colour theory that we can take advantage of.\n
- #21Â You may have used the RGB colour space before.\nRGB is not bad, but we can do better..\n
- #22Â For comparing and aggregating colours it’s better to use the Lab colour space.\nLab is designed to approximate human vision.\n
- #23Â 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
- #24Â 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
- #25Â 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
- #26Â \n
- #27Â \n
- #28Â Coming back to our example from before, we can see that by grouping colours\n
- #29Â \n
- #30Â \n
- #31Â \n
- #32Â 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
- #33Â For example, this style makes it easy to run across an entire folder of images.\n
- #34Â It can also be used as a Python library.\n
- #35Â 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
- #36Â We want our users to be able to choose a colour...\n
- #37Â .. and find designs featuring that colour.\n
- #38Â In our case, we want to do this at a pretty large scale. So how can we achieve this?\n
- #39Â 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
- #40Â Let’s take a look at brief look at how you use an Rtree.\nSo here’s our Rtree.\n
- #41Â You can insert colours into it.\n
- #42Â And then you can search for a colour...\n
- #43Â And find colours that are nearby.\n
- #44Â 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
- #45Â Here’s a quick demo of what we managed to build.\nWe used a combination of colorific, Rtree, colormath and Flask.\n
- #46Â 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
- #47Â Now Lars is going to talk about how we can gain insight into how colour is being used on our site.\n
- #48Â 120,000 designs, run through colorific (top 5+1 colors for each)\n450,000 distinct colours\n\n
- #49Â \n
- #50Â \n
- #51Â \n
- #52Â 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
- #53Â \n
- #54Â \n
- #55Â \n
- #56Â overrepresented\n
- #57Â \n
- #58Â overrepresented\n
- #59Â \n
- #60Â \n
- #61Â green\n
- #62Â blue\n
- #63Â Conclusion.\n
- #64Â \n
- #65Â \n
- #66Â \n