Luminance

tips & tricks
1

One of the items in the releases notes for v0.125.0 references Luminance in relation to an image’s dominant colors.

This is now documented, including some interesting examples:

  • Add a border to an image, where the border is the darkest of the image’s most dominant colors.
  • Create a text box with foreground and background matching the image’s lightest and darkest dominant colors.
  • Calculate the contrast ratio in the above, and determine if it conforms to WCAG guidelines.

See https://gohugo.io/methods/resource/colors/ for details.

4 Likes
2

Thanks, @jmooring. I’ve added borders to my featured images, but, with the help of @dogweather’s excellent article, also changing whether it’s the lightest or the darkest color depending on the site’s theme (using JavaScript, a pity that this can’t be made entirely with Hugo). As opposed to what you propose, @dogweather, when using a light theme, I put a dark border (and light border when using a dark theme). I find it better.

An example here:

Source here.

3

Keep in mind that you can pass the dominant colors to CSS using resources.ExecuteAsTemplate or to Sass using the vars option.

4

I’ll investigate it, thanks!