All posts by Stephanie Kim

Create a Custom Color Scheme From Your Favorite Website

Pink hair woman

In a recent Algorithm Spotlight post we introduced the Color Scheme Extraction algorithm which retrieves the top 15 colors that best approximates the color scheme of an image.

The Color Scheme Extraction algorithm is a great way to retrieve the colors of an image quickly with a serverless API call in a few lines of code using the programming language of your choice.

This recipe allows you to pipe in several images, including ones that are a montage of other images in order to get a personalized color scheme.

While there are plenty of online color scheme generators, none can generate random color palettes from multiple images found on your favorite design blog or shopping site.

Maybe you’re looking for a unique and compelling color palette for your website or looking to design a living room that has been inspired by the latest trends in fashion. Perhaps you are selling your house and want to see what the best selling houses are using for their color schemes and come up with your own unique palette based on those images.

This recipe will show you how to extract image links from a url that has multiple images on it, get the color schemes from those image urls and generate a new custom color scheme made of five random hexadecimal colors. Then you can plug them into Adobe Color Wheel or another online color scheme creator and visualize your new color scheme.

Step 1: Install the Algorithmia Client

This tutorial is in Python. But, it could be built using any of the supported clients, like Scala, Ruby, Java, Node and others. Here’s the Python client guide for more information on using the Algorithmia API.

Install the Algorithmia client from PyPi:

pip install algorithmia

You’ll also need a free Algorithmia account, which includes 5,000 free credits a month.

Sign up here, and then grab your API key.

Step 2: Retrieve Image Urls

After you’ve gotten your API key, you’ll want to call the Get Image Links algorithm that retrieves all the image url’s from a web page. These are the images that will be used to create your custom color palette.

"""Get image URL's from a site and extract unique color palette from images."""
import Algorithmia

client = Algorithmia.client("YOUR_API_KEY")


def get_image(url):
    """Retrieve images from site."""
    algo = client.algo("diego/Getimagelinks/0.1.0")
    if url.startswith("http:") or url.startswith("https:"):
        try:
            response = algo.pipe(url).result
            print(response)
            return response
        except Algorithmia.algo_response.AlgoException as e:
            print(e)
    else:
        raise Exception("Please pass in a valid url")

The code above does a very simple check to make sure that the url passed is valid and then calls the algorithm, piping in the URL as its input. The output is a list of image urls:

['http://n.nordstrommedia.com/id/84c91f6a-acb1-4251-85f7-b5ef95ac602b.jpeg?w=2560&h=723', 'http://n.nordstrommedia.com/id/19addc67-3fc2-4460-b962-f7e6acaf1b9c.jpeg?w=760&h=855', 'http://n.nordstrommedia.com/id/3561c21c-3ae7-4e0d-84da-b1151cf1dff7.jpeg?w=760&h=640', 'http://n.nordstrommedia.com/id/999eea01-4072-4366-ac3f-6d1f59e81e3f.jpeg?w=760&h=638', 'http://n.nordstrommedia.com/id/32daaaac-410f-4075-9995-10847b00e737.jpeg?w=760&h=644', 'http://n.nordstrommedia.com/id/242715f5-cf11-4c1e-864f-6bcb6ae7dfec.jpeg?w=760&h=649', 'http://n.nordstrommedia.com/id/c5d5f797-08bc-45b4-9cec-c4a8f83d74b1.jpeg?w=2560&h=995', 'http://n.nordstrommedia.com/id/87c47e87-5e21-48b4-9d1a-e8cf3dca6342.jpeg?w=760&h=955', 'http://n.nordstrommedia.com/id/f96fb198-d426-48fe-a222-319a4b78bcc5.jpeg?w=940&h=106', 'https://secure.nordstromimage.com/images/store/common/flagicons/US.gif']

Step 3: Extract Colors

Next you’ll call the Color Scheme Extraction algorithm which choses the top 15 colors from each image that the previous function found from your url.

def color_extractor(url):
    """Extract top 15 colors from images."""
    urls = get_image(url)
    algo = client.algo("vagrant/ColorSchemeExtraction/0.2.0")
    try:
        response = [algo.pipe({"url": path}).result for path in urls]
        print(response)
        return response
    except Algorithmia.algo_response.AlgoException as e:
        print("Exception ")
        print(e)

The previous snippet iterates over each image and outputs a nested list of colors in both rgba and hexadecimal form and here’s a sample of the output generated:

[{'colors': [{'rgb': [255, 255, 255], 'hex': '#ffffff'}, {'rgb': [196, 85, 104], 'hex': '#c45568'}, {'rgb': [237, 207, 176], 'hex': '#edcfb0'}, {'rgb': [100, 43, 32], 'hex': '#642b20'}, {'rgb': [184, 130, 95], 'hex': '#b8825f'}, {'rgb': [181, 35, 56], 'hex': '#b52338'}, {'rgb': [116, 116, 116], 'hex': '#747474'}, {'rgb': [203, 177, 162], 'hex': '#cbb1a2'}, {'rgb': [0, 0, 0], 'hex': '#000000'}, {'rgb': [209, 56, 78], 'hex': '#d1384e'}, {'rgb': [155, 99, 64], 'hex': '#9b6340'}, {'rgb': [240, 236, 231], 'hex': '#f0ece7'}]

Step 4: Create your Custom Color Palette

Finally you’ll create a function for creating a custom color palette, pulling five colors from the color schemes created by the Color Scheme Extraction.

import random

def shuffle_colors(url):
    """Create unique color palette from images passed in."""
    data = color_extractor(url)
    a_list = []
    for c in data:
        for hex in c["colors"]:
            a_list.append(hex["hex"])

    new_color_scheme = random.sample(set(a_list), 5)
    print(new_color_scheme)

shuffle_colors(
    "http://shop.nordstrom.com/c/designer-collections?origin=topnav&cm_sp=Top%20Navigation-_-Designer%20Collections")

This code iterates over all the colors that the Color Scheme Extraction algorithm created and randomly generates five hexadecimal colors that create your custom color palette.

['#ece9e5', '#f0cfc8', '#08030b', '#b58297', '#d0a695']

Now comes the fun part, checking to see what your custom color scheme is.

Go ahead and check out Adobe Color Wheel or another color palette visualization tool and use the custom option on the color wheel. Then simply type in your hex colors and now you can see your custom color palette.

We used Nordstrom’s Designer Collections Spring 2017 splash page to generate our color scheme and it came out pretty nice!

Custom Adobe Color Wheel Color Palette

 

This recipe showed you how to extract images and their colors in order to create a random color scheme using the Algorithmia API. Once you’re done you can take it a step further by creating a plugin to generate random color schemes or use the Get Zilllow Image algorithm to find image palettes from top selling houses in your neighborhood.

Resources:

For ease of reference here is the whole script (also available in Algorithmia’s sample-apps repository on Github):

"""Get image URL's from a site and extract unique color palette from images."""
import Algorithmia
import random

client = Algorithmia.client("YOUR_API_KEY")


def get_image(url):
    """Retrieve images from site."""
    algo = client.algo("diego/Getimagelinks/0.1.0")
    if url.startswith("http:") or url.startswith("https:"):
        try:
            response = algo.pipe(url).result
            print(response)
            return response
        except Algorithmia.algo_response.AlgoException as e:
            print(e)
    else:
        raise Exception("Please pass in a valid url")


def color_extractor(url):
    """Extract top 15 colors from images."""
    urls = get_image(url)
    algo = client.algo("vagrant/ColorSchemeExtraction/0.2.0")
    try:
        response = [algo.pipe({"url": path}).result for path in urls]
        print(response)
        return response
    except Algorithmia.algo_response.AlgoException as e:
        print("Exception ")
        print(e)


def shuffle_colors(url):
    """Create unique color paletted from images passed in."""
    data = color_extractor(url)
    a_list = []
    for c in data:
        for hex in c["colors"]:
            a_list.append(hex["hex"])

    new_color_scheme = random.sample(set(a_list), 5)
    print(new_color_scheme)

shuffle_colors(
    "http://shop.nordstrom.com/c/designer-collections?origin=topnav&cm_sp=Top%20Navigation-_-Designer%20Collections")

An Emotion Recognition API for Analyzing Facial Expressions

Using Emotion Recognition AlgorithmsReading emotional expression is one of the most difficult tasks for humans, let alone computers. Two people looking at the same photo might not agree whether someone is grimacing or grinning. Until recently, computers weren’t much better at the job, either.

Fortunately advances in deep learning has brought us speed, efficiency and accuracy in detecting people’s emotions in photos.

Read More…

How to Retrieve Tweets By Keyword and Identify Named Entities

Identifying named entities in tweetsLast week we introduced the named entity recognition algorithm for extracting and categorizing unstructured text.

In this post we’ll show you how to get data from Twitter, clean it with some regex, and then run it through named entity recognition. With the output we get from the algorithm, we can then group the data by the category each named entity is assigned to, and then extract the categories we are interested in.

Read More…

Using Named Entity Recognition to Categorize Text Data

Use Named Entity Recognition to Categorize Unstructured TextUnstructured text content is rich with information, but it’s not always easy to find what’s relevant to you.

With the enormous amount of data that comes from social media, email, blogs, news and academic articles, it becomes increasingly hard to extract, categorize, and learn from that information.

Read More…

A Fast Way to Scrape Image URLs from Webpages

smart-image-download-extraction

Let’s say you’ve created an awesome application that colorizes images. Everybody loves it, but some users are getting errors.

You realize they’re trying to pass a URL to a webpage with an image on it, instead of a direct path to the image itself. Your app is expecting a .JPG, or .PNG. Read More…

Introduction to Machine Learning for Developers

Understanding Machine LearningToday’s developers often hear about leveraging machine learning algorithms in order to build more intelligent applications, but many don’t know where to start.

One of the most important aspects of developing smart applications is to understand the underlying machine learning models, even if you aren’t the person building them. Whether you are integrating a recommendation system into your app or building a chat bot, this guide will help you get started in understanding the basics of machine learning. Read More…