README

Carbon.ColorPicker.OKLCH

用于 Neos CMS 的颜色选择器，将颜色保存在 OKLCH 颜色空间。它还提供了一个 eel 辅助工具，用于将 HEX 颜色转换为 OKLCH。

有许多选项可以自定义选择器的外观

这里您可以查看一些组合

安装

Carbon.ColorPicker.OKLCH 通过 packagist 提供。在您的站点包中运行以下命令

composer require --no-update carbon/colorpicker-oklch

然后在项目根目录中运行 composer update。

值的存储方式

模式 all

如果 mode 设置为 all（默认值），则颜色选择器不仅存储给定的值，还存储以下值的数组

• hex: 颜色的十六进制格式
• oklch: OKLCH 颜色空间中的颜色
• coords: OKLCH 颜色空间中的值。这对于任何颜色转换都很好。如果您使用类似 Tailwind OKLCH 插件 的东西，这将非常方便
• customProperty: 为您的 CSS 准备好使用的自定义属性。您可以通过 customPropertyName 选项设置名称，默认为 color

{
  "hex": "#65a30d",
  "oklch": "oklch(64.817% 0.17545 131.68)",
  "coords": {
    "l": 0.64817,
    "c": 0.17545,
    "h": 131.68
  },
  "customProperty": {
    "coords": "--color-l:0.64817;--color-c:0.17545;--color-h:131.68;",
    "oklch": "--color:oklch(64.817% 0.17545 131.68);",
    "hex": "--color:#65a30d;"
  }
}

模式 coords

如果 mode 设置为 coords，则颜色选择器将 OKLCH 颜色的坐标存储为数组

{
  "l": 0.64817,
  "c": 0.17545,
  "h": 131.68393
}

模式 hex

如果 mode 设置为 hex，则颜色选择器将存储十六进制颜色值：#65a30d

模式 oklch

如果 mode 设置为 oklch，则颜色选择器将 OKLCH 颜色存储为字符串：oklch(64.817% 0.17545 131.68)

设置

添加一个类型为数组的属性，并按此示例配置编辑器

Foo.Bar:Your.Prototype:
  properties:
    colorOKLCH:
      type: array
      ui:
        label: OKLCH Color
        inspector:
          editor: "Carbon.ColorPicker/OKLCH"
          group: yourGroupName

如果您将模式设置为 hex 或 oklch，则类型必须是 string

Foo.Bar:Your.Prototype:
  properties:
    colorOKLCH:
      type: string
      ui:
        label: OKLCH Color
        inspector:
          editor: "Carbon.ColorPicker/OKLCH"
          group: yourGroupName
          editorOptions:
            mode: oklch

自定义化

通过您的 Settings.yaml 文件，编辑器允许通过一些全局默认选项

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Carbon.ColorPicker.OKLCH:
          # Set the mode of the color picker. Possible values are: 'oklch', 'hex', 'coords', 'all'
          mode: "all"
          # Disable the color picker
          disable: false
          # Allow empty values
          allowEmpty: true
          # Show preset selector
          showPresets: true
          # Show input field for hex input
          showHexInput: true
          # Show color picker
          showPicker: true
          # Show slider to set the lightness
          showLightness: false
          # Show slider to set the luminance
          showLuminance: false
          # Collapse the color picker (enables only when showPicker is true)
          collapsed: false
          # The name of the custom property. Only used when mode is set to 'all'
          customPropertyName: "color"
          # The precision of the OKLCH color picker. Set to 0 to disable rounding and use the raw values.
          precision: 5
          # The presets are based on https://tailwind.org.cn/docs/customizing-colors with the key 600
          # false and null values get filtered out. You can also disable all presets with presets: false
          presets:
            slate: "#475569"
            gray: "#4b5563"
            zinc: "#52525b"
            neutral: "#525252"
            stone: "#57534e"
            red: "#dc2626"
            orange: "#ea580c"
            amber: "#d97706"
            yellow: "#ca8a04"
            lime: "#65a30d"
            green: "#16a34a"
            emerald: "#059669"
            teal: "#0d9488"
            cyan: "#0891b2"
            sky: "#0284c7"
            blue: "#2563eb"
            indigo: "#4f46e5"
            violet: "#7c3aed"
            purple: "#9333ea"
            fuchsia: "#c026d3"
            pink: "#db2777"
            rose: "#e11d48"

设置也可以在您的属性配置中设置

Foo.Bar:Your.Prototype:
  properties:
    colorOKLCH:
      type: array
      ui:
        label: OKLCH Color
        inspector:
          editor: "Carbon.ColorPicker/OKLCH"
          group: yourGroupName
          editorOptions:
            showLightness: true
            showLuminance: true
            disable: true
            allowEmpty: false
            collapsed: true
            customPropertyName: "color-main"
            presets:
              red: "#dc2626"
              orange: "#ea580c"

Eel 辅助工具

ColorConvert.toOkLch(color, precision, customPropertyName)

将 HEX 颜色转换为当您将模式设置为 all 时使用的对象。

• color (string|array, required) 颜色
• precision (int) 颜色的精度，默认为 5
• customPropertyName (string) 即将使用的自定义属性的名称，默认为 'color'

示例

${ColorConvert.toOkLch('#65a30d', 4, 'color-main')}

返回

{
  "hex": "#65a30d",
  "oklch": "oklch(64.82% 0.1755 131.7)",
  "coords": {
    "l": 0.6482,
    "c": 0.1755,
    "h": 131.7
  },
  "customProperty": {
    "coords": "--color-main-l:0.6482;--color-main-c:0.1755;--color-main-h:131.7;",
    "oklch": "--color-main:oklch(64.82% 0.1755 131.7);",
    "hex": "--color-main:#65a30d;"
  }
}