Nov 17th, 2018

Models / Color Detection

Color Detection

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

If you haven't already, create an account to get your own API keys. You should then install the SDK that corresponds to your programming language. You can also implement your own logic to interact with our API if you prefer. Have a look at our API reference for more details.


# 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's say you want to moderate the following image:

You can either upload a public URL to the image, or upload the raw binary image. Here's how to proceed if you choose to share the image's public URL:


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 API response (result)
}).catch(function(err) {
    // Handle error
});

The API will then return a JSON response:

                    
                    
{
    "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"
    }
}
                    
                

Any other needs?

See our full list of models for details on other filters and checks you can run on your images and videos.

Did you find this page helpful?

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

Let us know what you think