Laravel dominantColor(): Extract Image Colors | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ home ](https://msaied.com) [ articles ](https://msaied.com/articles) Extract an Image's Dominant Color in Laravel 13.24 On this page 1. [ Extract an Image's Dominant Color in Laravel 13.24 ](#extract-an-images-dominant-color-in-laravel-1324) 2. [ Setup ](#setup) 3. [ Getting the Dominant Color ](#getting-the-dominant-color) 4. [ Storing the Color at Upload Time ](#storing-the-color-at-upload-time) 5. [ Using the Color as a Placeholder ](#using-the-color-as-a-placeholder) 6. [ Readable Text Over the Placeholder ](#readable-text-over-the-placeholder) 7. [ Letterbox and Rotation Fills ](#letterbox-and-rotation-fills) 8. [ What It Is Not ](#what-it-is-not) 9. [ Key Takeaways ](#key-takeaways) ![Extract an Image's Dominant Color in Laravel 13.24](https://cdn.msaied.com/516/850cdb7ffa533b75462e7b29e8b25eb4.png) [ Laravel ](https://msaied.com/articles?category=laravel) [ Tips & Tricks ](https://msaied.com/articles?category=tips-tricks) #Laravel #Image Processing #PHP #Laravel 13 #Intervention Image Extract an Image's Dominant Color in Laravel 13.24 ==================================================== 5 Aug 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 9 sections 1. [ 01 Extract an Image's Dominant Color in Laravel 13.24 ](#extract-an-images-dominant-color-in-laravel-1324) 2. [ 02 Setup ](#setup) 3. [ 03 Getting the Dominant Color ](#getting-the-dominant-color) 4. [ 04 Storing the Color at Upload Time ](#storing-the-color-at-upload-time) 5. [ 05 Using the Color as a Placeholder ](#using-the-color-as-a-placeholder) 6. [ 06 Readable Text Over the Placeholder ](#readable-text-over-the-placeholder) 7. [ 07 Letterbox and Rotation Fills ](#letterbox-and-rotation-fills) 8. [ 08 What It Is Not ](#what-it-is-not) 9. [ 09 Key Takeaways ](#key-takeaways) Extract an Image's Dominant Color in Laravel 13.24 -------------------------------------------------- Laravel 13.24 shipped `dominantColor()` as part of the first-party image API, giving you an averaged hex color from any image without reaching for a third-party package. The most practical use case is filling the space a lazy-loaded image will eventually occupy, so the layout looks intentional before a single pixel of the real photo arrives. Setup ----- The image API is backed by Intervention Image, which is a suggested dependency. Install it first: ```bash composer require intervention/image:^4.0 ``` Both the GD and Imagick drivers support dominant color detection. Getting the Dominant Color -------------------------- Call `dominantColor()` on any image instance to receive a hex string: ```php use Illuminate\Support\Facades\Image; $color = Image::fromPath(storage_path('app/photo.jpg'))->dominantColor(); // "#8a6f4c" ``` Internally, the image is resized to a single pixel and that pixel's value is read. This produces an average rather than the most-frequent color, which is exactly what you want for a full-image placeholder. Images with an alpha channel return an eight-digit hex (`#rrggbbaa`), so size your database column to 9 characters. Transformations applied before `dominantColor()` affect the sampled result: ```php $color = Image::fromStorage('uploads/photo.jpg') ->crop(800, 600, x: 200, y: 0) ->dominantColor(); ``` Storing the Color at Upload Time -------------------------------- Compute the color once during upload and persist it on the model. Add a nullable column: ```php $table->string('dominant_color', 9)->nullable(); ``` In the controller, call `store()` before `dominantColor()`. `store()` caches the processed bytes on the instance, so the subsequent color call samples those bytes at no extra cost: ```php $photo = $request->image('photo') ->orient() ->scale(width: 1600) ->optimize(); return Photo::create([ 'path' => $photo->store('photos'), 'dominant_color' => $photo->dominantColor(), ]); ``` Reversing those two lines forces the pipeline to run twice — same result, double the work. Using the Color as a Placeholder -------------------------------- With the color stored on the model, render a colored box that holds the correct aspect ratio while the image loads: ```xml ``` This pairs well with `loading="lazy"` in long galleries: the colored box is painted immediately, the image fades in over it, and the page never reflows. Readable Text Over the Placeholder ---------------------------------- A small helper using Rec. 709 relative luminance picks the right text color automatically: ```php class Color { public static function isLight(string $hex): bool { [$r, $g, $b] = sscanf(substr($hex, 0, 7), '#%02x%02x%02x'); return (0.2126 * $r + 0.7152 * $g + 0.0722 * $b) > 140; } } ``` ```xml {{ $photo->caption }} ``` Letterbox and Rotation Fills ---------------------------- Pass `'dominant'` to `contain()` or `rotate()` to fill exposed areas with the image's own color: ```php Image::fromUpload($request->file('photo')) ->contain(1200, 800, background: 'dominant') ->store('photos'); $image->rotate(8, background: 'dominant'); ``` Sampling happens at that point in the pipeline, so an earlier crop changes the fill color. What It Is Not -------------- `dominantColor()` returns one averaged color. It is not a palette extractor and will not identify the accent color a designer would choose. For perceptual clustering or multi-swatch extraction, a dedicated library is still the right tool. Key Takeaways ------------- - `dominantColor()` ships with Laravel 13.24 — no extra package beyond Intervention Image. - The method averages the image down to one pixel; it is ideal for placeholders, not palette work. - Call `store()` before `dominantColor()` on the same instance to avoid processing the image twice. - Alpha-channel images return an 8-digit hex; store the column as `varchar(9)`. - Pass `background: 'dominant'` to `contain()` or `rotate()` for seamless letterbox fills. --- *Source: [Extract an Image's Dominant Color in Laravel — Laravel News](https://laravel-news.com/laravel-image-dominant-color)* Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Fextract-an-images-dominant-color-in-laravel-1324&text=Extract+an+Image%27s+Dominant+Color+in+Laravel+13.24) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Fextract-an-images-dominant-color-in-laravel-1324) Frequently Asked Questions ---------------------------- 3 questions Q01 What does Laravel's dominantColor() method actually return? It returns a hex color string (e.g., `#8a6f4c`) representing the average color of the image. For images with an alpha channel it returns an 8-digit hex (`#rrggbbaa`). The value is computed by resizing the image to a single pixel and reading that pixel's color. Q02 Why should I call store() before dominantColor() on the same image instance? Calling `store()` first runs the transformation pipeline and caches the processed bytes on the instance. A subsequent `dominantColor()` call samples those cached bytes at no extra cost. Reversing the order causes the pipeline to run twice — once for the color sample and once for the actual save. Q03 Can dominantColor() be used to extract a full color palette? No. `dominantColor()` returns a single averaged color. It is not a palette extractor and will not identify multiple representative swatches or accent colors. For multi-color extraction or perceptual clustering, a dedicated library is required. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![Job Batching, Chaining, and Rate-Limited Middleware in Laravel Queues](https://cdn.msaied.com/515/f0ef4270f8cb79ceff107c7a7c63f1ed.png) laravel queues jobs ### Job Batching, Chaining, and Rate-Limited Middleware in Laravel Queues Go beyond basic dispatching: learn how to compose Laravel job batches, build resilient chains, and throttle th... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 6 Aug 2026 3 min read Read ](https://msaied.com/articles/job-batching-chaining-and-rate-limited-middleware-in-laravel-queues-4) [ ![Laravel Boost Project Rules: Teach AI Agents Your Team's Conventions](https://cdn.msaied.com/517/850c73bd5504aa6154c76e452ad136c1.png) Laravel Boost AI Agents Laravel ### Laravel Boost Project Rules: Teach AI Agents Your Team's Conventions Laravel Boost v2.5.0 introduces project rules — scoped Markdown files committed to your repo that teach AI age... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 5 Aug 2026 4 min read Read ](https://msaied.com/articles/laravel-boost-project-rules-teach-ai-agents-your-teams-conventions) [ ![Image Dominant Color and HEIC Support in Laravel 13.24](https://cdn.msaied.com/514/1db4d7a38103ef4be23345bd39fc7658.png) Laravel 13.24 Image API HEIC ### Image Dominant Color and HEIC Support in Laravel 13.24 Laravel 13.24 adds dominant color detection, HEIC/AVIF image support, a modelKeys() query builder method, a ne... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 4 Aug 2026 4 min read Read ](https://msaied.com/articles/image-dominant-color-and-heic-support-in-laravel-1324) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://msaied.com) - [Projects](https://msaied.com/projects) - [Articles](https://msaied.com/articles) - [Certificates](https://msaied.com/certificates) - [Contact](https://msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)