Colors
适用于图像，返回使用简单直方图方法的最主导颜色切片。
Syntax
RESOURCE.Colors
Returns
[]images.Color
Resource 图像对象上的 Colors 方法返回图像中最主导颜色的切片，从最主导到最不主导排序。此方法很快，但如果您同时缩小图像尺寸，可以通过从缩放后的图像提取颜色来提高性能。
方法
每个颜色是一个具有以下方法的对象：
ColorHex
(string) 返回 十六进制颜色 值，以井号前缀。
Luminance
(float64) 返回 sRGB 颜色空间中颜色的 相对亮度，范围为 [0, 1]。值 0 表示最暗的黑色，而值 1 表示最亮的白色。
图像滤镜如 images.Dither、images.Padding 和 images.Text 接受十六进制颜色值或 images.Color 对象作为参数。
Hugo 将 images.Color 对象渲染为十六进制颜色值。
排序
作为人为示例，创建一个图像主导颜色的表格，最主导颜色在前，并显示每个主导颜色的相对亮度：
{{ with resources.Get "images/a.jpg" }}
<table>
<thead>
<tr>
<th>颜色</th>
<th>相对亮度</th>
</tr>
</thead>
<tbody>
{{ range .Colors }}
<tr>
<td>{{ .ColorHex }}</td>
<td>{{ .Luminance | lang.FormatNumber 4 }}</td>
</tr>
{{ end }}
</tbody>
</table>
{{ end }}Hugo 将其渲染为：
| ColorHex | 相对亮度 |
|---|---|
#bebebd |
0.5145 |
#514947 |
0.0697 |
#768a9a |
0.2436 |
#647789 |
0.1771 |
#90725e |
0.1877 |
#a48974 |
0.2704 |
要按主导性排序，最不主导的颜色在前：
{{ range .Colors | collections.Reverse }}要按相对亮度排序，最暗的颜色在前：
{{ range sort .Colors "Luminance" }}要按相对亮度排序，最亮的颜色在前，请使用以下任一结构：
{{ range sort .Colors "Luminance" | collections.Reverse }}
{{ range sort .Colors "Luminance" "desc" }}示例
图像边框
使用最主导颜色为图像添加 5 像素边框：
{{ with resources.Get "images/a.jpg" }}
{{ $mostDominant := index .Colors 0 }}
{{ $filter := images.Padding 5 $mostDominant }}
{{ with .Filter $filter }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}使用最暗的主导颜色为图像添加 5 像素边框：
{{ with resources.Get "images/a.jpg" }}
{{ $darkest := index (sort .Colors "Luminance") 0 }}
{{ $filter := images.Padding 5 $darkest }}
{{ with .Filter $filter }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}深色背景上的浅色文本
创建一个文本框，其中前景色和背景色派生自图像最亮和最暗的主导颜色：
{{ with resources.Get "images/a.jpg" }}
{{ $darkest := index (sort .Colors "Luminance") 0 }}
{{ $lightest := index (sort .Colors "Luminance" "desc") 0 }}
<div style="background: {{ $darkest }};">
<div style="color: {{ $lightest }};">
<p>这是深色背景上的浅色文本。</p>
</div>
</div>
{{ end }}WCAG 对比度比率
在上一个示例中，我们将浅色文本放在深色背景上，但这种颜色组合是否符合 WCAG 指南的 最低 或 增强 对比度比率？
WCAG 将 对比度比率 定义为：
其中 $L_1$ 是最亮颜色的相对亮度，$L_2$ 是最暗颜色的相对亮度。
计算对比度比率以确定 WCAG 符合性：
{{ with resources.Get "images/a.jpg" }}
{{ $lightest := index (sort .Colors "Luminance" "desc") 0 }}
{{ $darkest := index (sort .Colors "Luminance") 0 }}
{{ $cr := div
(add $lightest.Luminance 0.05)
(add $darkest.Luminance 0.05)
}}
{{ if ge $cr 7.5 }}
{{ printf "对比度比率 %.2f 符合 WCAG AAA 级。" $cr }}
{{ else if ge $cr 4.5 }}
{{ printf "对比度比率 %.2f 符合 WCAG AA 级。" $cr }}
{{ else }}
{{ printf "对比度比率 %.2f 不符合 WCAG 指南。" $cr }}
{{ end }}
{{ end }}