Color Detection

Last updated November 17th, 2017

Table of contents

Overview

The Color Detection Model is useful to extract the dominant and most relevant colors within an image.

Use cases

  • Create a visually appealing design, by automatically adapting font colors, borders or other items to image colors
  • Select images that have certain color properties
  • Group or classify images by color

Principles

The objective of the Color Detection Model is to list the most important colors within an image. Those include 3 types of colors: the dominant color, the accent colors, and the secondary colors.

Dominant color

The dominant color is the color that would be perceived as being the dominant one in an image by a human viewer. This takes into account:

  • the area covered by the color
  • the way this area is distributed in the image
  • the "intensity" of the color as perceived by humans

For instance highly saturated colors, or colors close to red / yellow / orange will stand out more than duller colors. This is accounted for in the color detection.

Dominant color:

#7693be

Accent colors

Accent colors are colors that are not dominant in the image, that sometimes occupy a small area of the image, but that still draw the human eye's due to their intensity, contrast or saturation.

In this image, the boy's red tee-shirt is small in area but has an impactful color. Accent colors are:

#cb2318
#1c8780
#105b84

Secondary colors

Secondary colors are colors that are important in the image but that are neither the dominant one nor accent colors.

Secondary colors:

#304651
#864039
#6c978a
#887745
#a28a68

Use the model

To start, you need to create an account to retrieve your API keys. Then you must install the SDK that corresponds to your programming language.


# install cURL: https://curl.haxx.se/download.html


pip install sightengine


composer require sightengine/client-php


npm install sightengine --save

Detect the properties of an image

Let say you want moderate the following image:

You can either upload a public URL to the image, or upload the raw binary image. Here's how to upload the


curl -X GET -G 'https://api.sightengine.com/1.0/check.json' \
    -d 'models=properties' \
    -d 'api_user={api_user}&api_secret={api_secret}' \
    -d 'url=https://d3m9459r9kwism.cloudfront.net/img/examples/example-prop-c1.jpg'


 # if you haven't already, install the SDK with 'pip install sightengine'
from sightengine.client import SightengineClient
client = SightengineClient('{api_user}','{api_secret}')
output = client.check('properties').set_url('https://d3m9459r9kwism.cloudfront.net/img/examples/example-prop-c1.jpg')


// if you haven't already, install the SDK with 'composer require sightengine/client-php'
use \Sightengine\SightengineClient;
$client = new SightengineClient('{api_user}','{api_secret}');
$client->check(['properties'])->set_url('https://d3m9459r9kwism.cloudfront.net/img/examples/example-prop-c1.jpg');


// if you haven't already, install the SDK with 'npm install sightengine --save'
var sightengine = require('sightengine')('{api_user}','{api_secret}');
sightengine.check(['properties']).set_url('https://d3m9459r9kwism.cloudfront.net/img/examples/example-prop-c1.jpg').then(function(result) {
    // The result of the API
}).catch(function(err) {
    // Error
});

Here is the result:

                    
                    
{
    "status": "success",
    "request": {
        "id": "req_0zrbHDeitGYY7wEGncAne",
        "timestamp": 1491402308.4762,
        "operations": 0
    },
    "sharpness": 0.995,
    "contrast": 0.886,
    "brightness": 0.522,
    "colors": {
        "dominant": {
            "r": 135,
            "g": 127,
            "b": 84,
            "hex": "#877f54"
        },
        "accent": [
            {
                "r": 163,
                "g": 149,
                "b": 41,
                "hex": "#a39529"
            },
            {
                "r": 119,
                "g": 127,
                "b": 32,
                "hex": "#777f20"
            }
        ],
        "other": [
            {
                "r": 50,
                "g": 48,
                "b": 20,
                "hex": "#323014"
            },
            {
                "r": 232,
                "g": 222,
                "b": 204,
                "hex": "#e8decc"
            },
            {
                "r": 218,
                "g": 198,
                "b": 145,
                "hex": "#dac691"
            },
            {
                "r": 84,
                "g": 62,
                "b": 25,
                "hex": "#543e19"
            }
        ]
    },
    "media": {
        "id": "med_0zrbk8nlp4vwI5WxIqQ4u",
        "uri": "https:\/\/d3m9459r9kwism.cloudfront.net\/img\/examples\/example-prop-c1.jpg"
    }
}
                    
                

Did you find this page helpful?

We're always looking for advice to help improve our documentation!

Let us know what you think