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。
按住meta键（或shift键）以调整值增加或减少10。
点击值的灰色单位指示器，然后垂直拖动鼠标以动态调整值。

替代方案

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

许可证

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

hananils / colors

维护者

详细信息