CarrierWave Processing DominantColor

Adds the dominant color of an image to your database whenever you upload it with the CarrierWave gem.


Add this line to your application's Gemfile:

gem "carrierwave-processing-dominant_color"

And then execute:

$ bundle

Add the dominant color attribute

To store the color, you need an attribute on the Rails model where you attach your uploader. Call it dominant_color_{uploader}.

For example if you have the following model:

class Article
  mount_uploader :photo, PhotoUploader

You need to add a `dominant_color_photo` column to the `articles` table. You
would then create a migration by executing:

$ rails g migration AddDominantColorToArticles dominant_color_photo
$ rake db:migrate

Add the processor in your uploader

In your uploader, include the module and call the processor:

class PhotoUploader < CarrierWave::Uploader::Base
  include CarrierWave::Processing::DominantColor

  process :store_dominant_color

  # …

If you do any resizing or if you have several versions of your uploader, add it after you have resized the smallest version so that processing goes faster. For example:

# …
version :medium do
  process resize_to_fill: [200, 200]

version :thumb, from_version: :medium do
  process resize_to_fill: [42, 42]
  process :store_dominant_color
# …

Using your dominant color

An easy way of using your dominant colors is to put them as a background to your image tags:

<%= image_tag(, style: "background: #{article.dominant_color_photo}") %>

For example, on cults3d:

Cults 3D Animated Screenshot with dominant colors during image load


  1. Fork it ( )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request