README

Colors 是一个为 Kirby 3 设计的字段，允许使用原生颜色选择器选择颜色。颜色可以以 HEX、RGB 或 HSL 格式查看和编辑。此外，字段自动计算最易读的对比颜色。如果您想指定背景颜色并相应地调整文本颜色，这将很有用。该字段根据 WCAG 无障碍指南显示颜色对比等级 AA、AALarge、AAA 和 AAALarge。

重要

随着版本 4 的发布，Kirby 现在提供核心颜色字段，该字段为颜色输入提供类似选项。它应作为此已弃用的插件的替代品使用。核心字段中缺少的一个功能是颜色对比检查。为此目的正在准备一个新的插件。

安装

下载

下载并将此存储库复制到 /site/plugins/colors。

Git 子模块

git submodule add https://github.com/hananils/kirby-colors.git site/plugins/colors

Composer

composer require hananils/kirby-colors

蓝图

此字段在 colors 类型下提供

alpha: 允许您启用或禁用不透明度小部件，可以是 true 或 false。
contrast: 允许您启用或禁用计算最易读对比颜色的对比度小部件，可以是 true 或 false 或插件应从中选择的颜色数组。
default: 作为默认颜色使用的颜色，可以是 hex3、hex6、hex8、rgb、rgba、hsl 或 hsla。

动态对比选项

为了设置对比颜色，可以查询另一个字段

colors:
    type: colors
    label: Colors
    contrast:
        type: query
        query: site.contrasts

您必须确保引用字段返回单个颜色或颜色数组。使用类似 split 的方法来处理逗号分隔的字符串，例如 site.contrasts.split。

如果您想在颜色字段相同的页面上引用字段，您必须注意更改以获取实时更新

colors:
    type: colors
    label: Colors
    contrast:
        type: watch
        field: contrasts
contrasts:
    type: text
    label: Contrast colors

如果您需要分割监视字段的值，您还必须定义分割字符

colors:
    type: colors
    label: Colors
    contrast:
        type: watch
        field: contrasts
        split: ','
contrasts:
    type: text
    label: Contrast colors

示例

colors:
    type: colors
    label: Colors

colors:
    type: colors
    label: Colors (alpha)
    alpha: true

colors:
    type: colors
    label: Colors (alpha + readable)
    alpha: true
    contrast: true

colors:
    type: colors
    label: Colors (readable)
    contrast:
        - '#112233'
        - '#778899'

字段方法

`$field->isHex()`

验证当前颜色是否存储为十六进制值，返回 true 或 false。

`$field->isRgb()`

验证当前颜色是否存储为 RGB 值，返回 true 或 false。

`$field->isHsl()`

验证当前颜色是否存储为 HSL 值，返回 true 或 false。

`$field->toClass()`

返回当前颜色对象，Hananils\Color，请参阅 lib\Color.php。

`$field->toColor($space)`

返回当前颜色作为字符串。接受可选的 $space 属性来设置输出颜色空间，可以是 hex、rgb 或 hsl。

`$field->toSpace()`

返回当前颜色空间，可以是 hex、rgb 或 hsl。

`$field->toValues()`

返回所有颜色值，例如。

[
    'original' => '#ffffff',
    'space' => 'hex',
    'r' => 255,
    'g' => 255,
    'b' => 255,
    'h' => 0,
    's' => 0,
    'l' => 100,
    'a' => 100
];

`$field->toReadabilityReport()`

返回在蓝图定义的对比颜色上的可读性报告，默认为黑白。

`$field->toMostReadable()`

返回在蓝图定义的对比颜色上的最易读颜色，默认为黑白。

颜色计算

此插件捆绑了两个类，一个用于JavaScript，一个用于PHP，具有相同的API来执行颜色计算。请参阅 lib/Color.php 和 src/lib/color.js。

技巧和窍门

单击左侧的颜色预览以打开颜色选择器。
单击箭头图标以在颜色空间之间切换。
当编辑RGB或HSL颜色时，使用上箭头和下箭头键以+1或-1调整值。
按住 meta键（或shift键）以+10或-10调整值。
单击值的灰色单位指示器，然后垂直拖动鼠标以实时调整值。

替代方案

请注意，Tim Ötting还为Kirby 3开发了一个名为Kirby Color的颜色字段，请参阅 https://github.com/TimOetting/kirby-color。

许可证

此插件由 hana+nils · Büro für Gestaltung免费提供，遵循 MIT许可证。我们为数字和模拟媒体创建视觉设计。

hananils / kirby-colors

维护者

详细信息