Laravel dominantColor(): Extract Image Colors | Mohamed Said [Skip to content](#main) [ ![](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed SaidLaravel Backend Engineer ](https://www.msaied.com/public) - [Home](https://www.msaied.com/public) - [Projects](https://www.msaied.com/public/projects) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [About](https://www.msaied.com/public#about) [ Contact](https://www.msaied.com/public#contact) Menu Menu ---- Close - [HomeStart here](https://www.msaied.com/public) - [ProjectsCase studies](https://www.msaied.com/public/projects) - [ArticlesEngineering notes](https://www.msaied.com/public/articles) - [CertificatesCredentials](https://www.msaied.com/public/certificates) - [AboutHow I work](https://www.msaied.com/public#about) - [ContactGet in touch](https://www.msaied.com/public#contact) [Start a conversation](https://www.msaied.com/public#contact) [WhatsApp](https://wa.me/201094619204) [Email](mailto:hello@msaied.com) 1. [Home](https://www.msaied.com/public) 2. / 3. [Articles](https://www.msaied.com/public/articles) 4. / 5. [Laravel](https://www.msaied.com/public/articles?category=laravel) 6. / 7. Extract an Image's Dominant Color in Laravel 13.24 [Laravel](https://www.msaied.com/public/articles?category=laravel) [Tips & Tricks](https://www.msaied.com/public/articles?category=tips-tricks) Extract an Image's Dominant Color in Laravel 13.24 =================================================== Laravel 13.24 added dominantColor() to the first-party image API. Learn how to extract, store, and use an image's average color as a placeholder, letterbox fill, or text-contrast guide. ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://www.msaied.com/public#person) Published 5 Aug 2026 · Updated 6 Aug 2026 · 3 min read ShareCopy linkCopied ![Extract an Image's Dominant Color in Laravel 13.24](https://cdn.msaied.com/516/850cdb7ffa533b75462e7b29e8b25eb4.png) 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 -------------------------------------------------- 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)* - [Laravel](https://www.msaied.com/public/articles?search=Laravel) - [Image Processing](https://www.msaied.com/public/articles?search=Image%20Processing) - [PHP](https://www.msaied.com/public/articles?search=PHP) - [Laravel 13](https://www.msaied.com/public/articles?search=Laravel%2013) - [Intervention Image](https://www.msaied.com/public/articles?search=Intervention%20Image) Frequently asked questions --------------------------- 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. 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. 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. ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp)About the author ---------------- [Mohamed Said](https://www.msaied.com/public#person)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. [About](https://www.msaied.com/public#about) [GitHub ↗](https://github.com/EG-Mohamed) [LinkedIn ↗](https://www.linkedin.com/in/msaiedm/) [WhatsApp ↗](https://wa.me/201094619204) [Email Address ↗](mailto:hello@msaied.com) [My CV ↗](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) [Previous articleReject Unexpected Array Keys with Laravel Validation (Laravel 13.24)](https://www.msaied.com/public/articles/reject-unexpected-array-keys-with-laravel-validation-laravel-1324) [Next articleJob Batching, Chaining, and Rate-Limited Middleware in Laravel Queues](https://www.msaied.com/public/articles/job-batching-chaining-and-rate-limited-middleware-in-laravel-queues-4) 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) ### Have a technical challenge? Tell me what you’re building. I reply within two working days. [Start a conversation](https://www.msaied.com/public#contact) Related articles ----------------- [ ![](https://cdn.msaied.com/740/cce86edc21eddcbdd2f2454fadaf9c70.png) · 3 min read### The Pipeline Pattern in Laravel: Custom Pipelines Beyond Middleware 5 Oct 2026 ](https://www.msaied.com/public/articles/the-pipeline-pattern-in-laravel-custom-pipelines-beyond-middleware-1) [ ![](https://cdn.msaied.com/739/2d6897fdcdcf090613f96f72a64b8a78.png) · 4 min read### MySQL Full-Text Search in Laravel: Indexes, Relevance Scoring, and Boolean Mode 4 Oct 2026 ](https://www.msaied.com/public/articles/mysql-full-text-search-in-laravel-indexes-relevance-scoring-and-boolean-mode) [ ![](https://cdn.msaied.com/738/073696a3fefe18bec825beec5ac658f5.png) · 4 min read### Laravel Queue Rate-Limited Middleware: Throttling Jobs Without Losing Work 4 Oct 2026 ](https://www.msaied.com/public/articles/laravel-queue-rate-limited-middleware-throttling-jobs-without-losing-work) Have a technical challenge? ---------------------------- Tell me what you’re building. I reply within two working days. [Discuss your project ↗](https://www.msaied.com/public#contact) © 2026 Mohamed Said · Built with Laravel, meant to last.Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. - [Home](https://www.msaied.com/public) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [GitHub](https://github.com/EG-Mohamed) - [LinkedIn](https://www.linkedin.com/in/msaiedm/) - [WhatsApp](https://wa.me/201094619204) - [Email Address](mailto:hello@msaied.com) - [My CV](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) - [Sitemap](https://www.msaied.com/public/sitemap.xml)