Color recognition: extract dominant colors from any image automatically

Training your system to recognize colors in images can automate a lot of your routine processes, from image filing and database organization to palette creation. The thing is, building such a solution in-house isn’t something regular businesses would do — it’s challenging, time-consuming, and in most cases, might feel a bit like overkill.

Good news: Uploadcare has a Color Recognition feature that already knows how to extract colors from images, so you can take advantage of it without any additional effort. In this post, we’ll tell you what Color Recognition is, show some use cases, and walk you through the process of extracting color from images using Uploadcare.

What is color recognition and why would you need it?

Color Recognition is one of the built-in image processing operations in Uploadcare. This feature analyzes the image, automatically extracts the most prominent colors from it, and returns you an array of 8-bit RGB values specific to those colors. The entire setup takes no longer than a few minutes, saving you a bunch of time.

The feature allows you to specify the number of colors you’d like to extract. If not specified, it will return the four main colors by default.

Sounds nice, but how can it be used in practice? Let’s take a look at the most common use cases.

Building image-based palettes for website design

Creating color palettes for website design, banner ads, posters, or anything like that isn’t an easy task. Generally, a designer needs to carefully select colors by hand until they reflect the desired design aesthetic, look good together, and match the other elements on the page.

With the Color Recognition feature, you can easily borrow some inspiration from photos you need to use on your website and build your color palette around them. Or you can just grab some beautiful photo from Pinterest and pick some colors from it. Either way, it will take a lot less time compared to manual color picking.

Filtering products on ecommerce websites

Sometimes people shop without purpose and sometimes they know exactly what they want. In the latter case, a filter by color would save a ton of time for users and noticeably improve the experience on your website. You can use the Color Recognition feature to identify one dominant color in a photo and build your filtering system much faster.

Given that not all websites have such an option, this can become one of your competitive advantages.

Color search on image-based platforms

Color Recognition can be a great help for image-based platforms where users look for design inspiration or search for images, like Pinterest, Unsplash, Pexels, and so on. This would allow users to find exactly what they need much faster.

If your website features an extensive visual database, adding this filtering option will significantly improve your user experience.

Keeping a content management system in order

Whether you run an online store, a large online publication, or a corporate website, chances are your CMS stores a large collection of unstructured images. Using Color Recognition, you can automatically build a script to sort those images by color (of course, if that makes sense for you).

Also, you might want to use Object and Face recognition to make your system more intelligent and provide another degree of fine-tuning your filter results.

Creating placeholders automatically

If the user’s internet connection is slow, it can take a while for images to load. Instead of displaying a large whitespace or loading circle, you can use nice-looking placeholders that are the same dominant color as the images behind them.

You can use the Color Recognition feature to build a script that would generate such placeholders automatically.

You tell us!

Color recognition is a feature that automatically extracts colors from images. It can be used in various ways — your imagination is the only limit. It can be useful in applications for artists, services for home decoration or event planning, apps for colorblind people, etc.

If you have an interesting case of using Color Recognition by Uploadcare, share it in the comments below. Now, let’s make some magic happen!

How to extract colors from your images with Uploadcare

Let’s walk you through the process step-by-step. First off, you need to sign up for an Uploadcare account and create your first project from the dashboard. After that, you can start uploading your images.

All transformations at Uploadcare are done via CDN image operations. Once an image is uploaded, you receive a CDN link with its own unique identifier (UUID). The link looks like this:

https://ucarecdn.com/9c71f68a-3e48-4c89-8796-8e4730dab793/party.jpeg

Where:

• 9c71f68a-3e48-4c89-8796-8e4730dab793 — your unique file identifier (UUID).
• party.jpeg — the filename (it’s optional, you can remove it)

From there, implement any image transformations available in Uploadcare by adding simple URL parameters to the link. To extract colors from a photo, you need to add the parameters preview and main colors. Also, you can use the number of colors parameter if you need it.

After adding all the needed parameters, the link will look something like this:

https://ucarecdn.com/9c71f68a-3e48-4c89-8796-8e4730dab793/-/preview/-/main_colors/3/

Preview is the default operation for all image transformations. /-/ is the mandatory delimiter that tells operations from one another and other path components.

If everything is right, it will return a JSON containing the RGB values of the main colors found in the image:

{
  "id":"/9c71f68a-3e48-4c89-8796-8e4730dab793/-/preview/",
  "original":{
    "id":"9c71f68a-3e48-4c89-8796-8e4730dab793",
    "color_mode":"RGB",
    "orientation":null,
    "format":"JPEG",
    "sequence":false,
    "height":1253,
    "width":1880,
    "geo_location":null,
    "datetime_original":null,
    "dpi":[
      72,
      72
    ]
  },
  "width":1880,
  "height":1253,
  "main_colors":[
    [65, 126, 156],
    [38, 36, 32],
    [199, 170, 154]
  ]
}

That’s it! Now you can apply this feature to your own business processes and build different solutions around it.

Final thoughts

Color Recognition is a part of the Image Intelligence feature set, which also includes AI-based tools for Object and Face Recognition. All three features allow you to extract valuable insights from any photo and use them to organize large databases of images, moderate uploaded content, filter content, and much more.

If you're interested in automating your image handling to the max, you can read our docs to learn more or jump right into hands-on exploration.