Get color information from an image resource

feature
1

The image resizing functions are very cool and I’m planning to use them a lot more in a project I’m working on.

While experimenting with my CSS, I figured it would be a interesting idea to be able to automatically pick a dominant colour from an image to use within your site. I’ve seen other libraries offer this feature, but I’m not sure where I saw it. The colour could be picked from the border of the image or by calculating from a blurred version of the image. I’m not sure which alghoritms these image libraries use.

You could then use this colour as the ‘placeholder’ color for when an image is loading, or tone it down (using Sass, for example) to use as a part of your design.

In the thing I’m working on right now, it could look like this:

{{ range .Resources.Match "default.*" }}
{{ $img := .Fill "500x250" }}       
{{ $temp-color := .dominantColor }}       
    <header class="title" style="background: {{ $temp-color }} center center/cover url({{ $img.RelPermalink }}">
{{ end }}

png

2

I fgured out then if you create a 1x1 size image (using Fill "1x1"), you get the exact colour I need :slight_smile: I could use this repeating background-image as a placeholder and thus get the effect I’m looking for. But, of course that would be waste of HTTP requests. What I really want is the #hex value of that colour. Any tricks? :slight_smile:

3

Currently this isn’t possible (pretty sure about that). But it would be cool. But to do it effectively (Hugo fast), I suspect it needs to be a first-class citizen.

1 Like
4

I found this old post ranking on top, before figuring out there is a new .Colors method, so I thought I would mention that it is now possible to extract the main color from an image ressources.

See doc here:

1 Like