PHPackages carbon/colorpicker-oklch - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. carbon/colorpicker-oklch ActiveNeos-carbon[Utility & Helpers](/categories/utility) carbon/colorpicker-oklch ======================== Color picker for Neos CMS who saves the color in the OKLCH color space 1.0.7(3mo ago)65.3k↓53.8%2GPL-3.0TypeScriptCI passing Since Mar 18Pushed 2w ago1 watchersCompare [ Source](https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH)[ Packagist](https://packagist.org/packages/carbon/colorpicker-oklch)[ Fund](https://www.paypal.me/Jonnitto/20eur)[ GitHub Sponsors](https://github.com/jonnitto)[ RSS](/packages/carbon-colorpicker-oklch/feed)WikiDiscussions main Synced 3d ago READMEChangelog (10)Dependencies (4)Versions (17)Used By (2) [![Latest stable version](https://camo.githubusercontent.com/bb5b9644470adbbca7804ccf64b481512d73f22850aba964af4fb1c91ca09adf/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f636f6c6f727069636b65722d6f6b6c63682f762f737461626c65)](https://packagist.org/packages/carbon/colorpicker-oklch) [![Total downloads](https://camo.githubusercontent.com/8624713dfd27bb2a82cd76ff5e3dc9acbc0d532c674fbc32104b96217ccf785b/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f636f6c6f727069636b65722d6f6b6c63682f646f776e6c6f616473)](https://packagist.org/packages/carbon/colorpicker-oklch) [![License](https://camo.githubusercontent.com/b4d690a02197c01bd48b8aa631f19f1f0618004197424fa67ad8087eaba38fb2/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f636f6c6f727069636b65722d6f6b6c63682f6c6963656e7365)](https://packagist.org/packages/carbon/colorpicker-oklch) [![GitHub forks](https://camo.githubusercontent.com/84918a0efbda3541a2d80bdfbdb0b83d2a3ccb9645e805ddc1286a8ab68b027e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f436172626f6e5061636b616765732f436172626f6e2e436f6c6f725069636b65722e4f4b4c43482e7376673f7374796c653d736f6369616c266c6162656c3d466f726b)](https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH/fork) [![GitHub stars](https://camo.githubusercontent.com/01ecea843fab2fa209f4325ff4bcb7ac971fee87d613139fdb197c9faaa52602/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f436172626f6e5061636b616765732f436172626f6e2e436f6c6f725069636b65722e4f4b4c43482e7376673f7374796c653d736f6369616c266c6162656c3d5374617273)](https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH/stargazers) [![GitHub watchers](https://camo.githubusercontent.com/5861cb04d922b17aeec470f13f63156ed86ec2e7ace0c3f7f634cd5f79821399/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f436172626f6e5061636b616765732f436172626f6e2e436f6c6f725069636b65722e4f4b4c43482e7376673f7374796c653d736f6369616c266c6162656c3d5761746368)](https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH/subscription) Carbon.ColorPicker.OKLCH ======================== [](#carboncolorpickeroklch) Color picker for Neos CMS who saves the color in the [`OKLCH`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color space. It also provide an eel helper to convert `HEX` colors to `OKLCH`. There are many options on how the picker should look like: Here you can see some of the combinations: [![screenshot](https://private-user-images.githubusercontent.com/4510166/317223258-b604eb5a-cce6-4fb2-829d-d0c091be9758.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODMyMzQ3OTQsIm5iZiI6MTc4MzIzNDQ5NCwicGF0aCI6Ii80NTEwMTY2LzMxNzIyMzI1OC1iNjA0ZWI1YS1jY2U2LTRmYjItODI5ZC1kMGMwOTFiZTk3NTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA3MDVUMDY1NDU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDVhZGU1Y2RjZjc4YzkxNDk5YTg4M2I1ODE4ZWIwZDFiMjFhMTI0NzBjZWVkYzc0YWMzODRjNWI4Nzc4NDE3NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.UVCydDxP9HHgor8vSIRg3kauApgA02r8ug4oCN_z8ZQ)](https://private-user-images.githubusercontent.com/4510166/317223258-b604eb5a-cce6-4fb2-829d-d0c091be9758.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODMyMzQ3OTQsIm5iZiI6MTc4MzIzNDQ5NCwicGF0aCI6Ii80NTEwMTY2LzMxNzIyMzI1OC1iNjA0ZWI1YS1jY2U2LTRmYjItODI5ZC1kMGMwOTFiZTk3NTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA3MDVUMDY1NDU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDVhZGU1Y2RjZjc4YzkxNDk5YTg4M2I1ODE4ZWIwZDFiMjFhMTI0NzBjZWVkYzc0YWMzODRjNWI4Nzc4NDE3NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGcG5nIn0.UVCydDxP9HHgor8vSIRg3kauApgA02r8ug4oCN_z8ZQ) Installation ------------ [](#installation) `Carbon.ColorPicker.OKLCH` is available via packagist. Run the following command in your site package ``` composer require --no-update carbon/colorpicker-oklch ``` Then run `composer update` in your project root. How the value get stored ------------------------ [](#how-the-value-get-stored) ### Mode `all` [](#mode-all) If the `mode` ist set to `all` (which is the default), the color picker don't store only the given value, it stores an array with following values: - `hex`: The color in hex format - `oklch`: The color in the [`OKLCH`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color space - `coords`: The values in the [`OKLCH`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color space. This is great for any color transformation. Very handy if you use something like the [Tailwind OKLCH Plugin](https://github.com/MartijnCuppens/tailwindcss-oklch) - `customProperty`: Ready to use custom properties for your CSS. You can set the name via the option `customPropertyName`, defaults to `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;" } } ``` ### Mode `coords` [](#mode-coords) If the `mode` ist set to `coords`, the color picker stores the coordinates of the [`OKLCH`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color as array: ``` { "l": 0.64817, "c": 0.17545, "h": 131.68393 } ``` ### Mode `hex` [](#mode-hex) If the `mode` ist set to `hex`, the color picker stores the hex color value: `#65a30d` ### Mode `oklch` [](#mode-oklch) If the `mode` ist set to `oklch`, the color picker stores the [`OKLCH`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color as string: `oklch(64.817% 0.17545 131.68)` Settings -------- [](#settings) Add a property of type array and configure the editor as seen in this example: ``` Foo.Bar:Your.Prototype: properties: colorOKLCH: type: array ui: label: OKLCH Color inspector: editor: "Carbon.ColorPicker/OKLCH" group: yourGroupName ``` If you set mode to `hex` or `oklch` the type has to be `string`: ``` Foo.Bar:Your.Prototype: properties: colorOKLCH: type: string ui: label: OKLCH Color inspector: editor: "Carbon.ColorPicker/OKLCH" group: yourGroupName editorOptions: mode: oklch ``` ### Customization [](#customization) The editor allows some global default options via your `Settings.yaml` file: ``` Neos: Neos: Ui: frontendConfiguration: Carbon.ColorPicker.OKLCH: # This option makes it possible hide the whole editor (incl. label) based on data source hidden: false # 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 # Set the color contrast threshold for the color name output. Value between 0 and 1 # Depend on the luminance, the text will be black or white contrastThreshold: 0.6 # The presets are based on https://tailwindcss.com/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" # Optionally use a data source: # mode and precision cannot be set via datasource dataSourceIdentifier: "some-datasource" dataSourceUri: "some/custom-route" dataSourceAdditionalData: foo: "bar" dataSourceDisableCaching: false ``` The settings can also be set in your property configuration: ``` 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" contrastThreshold: "ClientEval: node.properties.contrastThresholdProperty / 100" presets: red: "#dc2626" orange: "#ea580c" ``` Eel helper ---------- [](#eel-helper) ### `ColorConvert.toOkLch(color, precision, customPropertyName)` [](#colorconverttooklchcolor-precision-custompropertyname) Converts a `HEX` color to the object who is used when you set the mode to `all`. - `color` (string|array, required) The color - `precision` (int) The precision for the color, defaults to `5` - `customPropertyName` (string) The name for the ready to use custom property, defaults to `'color'` Example: ``` ${ColorConvert.toOkLch('#65a30d', 4, 'color-main')} ``` returns ``` { "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;" } } ``` ### Health Score 48 — FairBetter than 93% of packages Maintenance90 Actively maintained with recent releases Popularity28 Limited adoption so far Community14 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 92% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~53 days Recently: every ~132 days Total 15 Last Release 90d ago Major Versions 0.1.6 → 1.0.02024-10-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto) --- Top Contributors [![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (46 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)") --- Tags color-pickerneoscmsoklchoklch-colortailwindcsscoloreditorflowpickerNeosneoscms ### Embed Badge ![Health badge](/badges/carbon-colorpicker-oklch/health.svg) ``` [![Health](https://phpackages.com/badges/carbon-colorpicker-oklch/health.svg)](https://phpackages.com/packages/carbon-colorpicker-oklch) ``` ### Alternatives [shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 14104.7k6](/packages/shel-neos-colorpicker)[shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 21214.3k1](/packages/shel-neos-hyphens)[techdivision/ckstyles Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration 21179.5k](/packages/techdivision-ckstyles)[carbon/includeassets Include your assets (css, js) in an easy way into Neos 14235.7k15](/packages/carbon-includeassets) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)