Color Picker: add Oklab and Oklch color formats

[lemonyte]

Summary of the Pull Request

This pull request adds support for the Oklab color space to the Color Picker utility.
It adds a format for Oklab, as well as the cylindrical model representation (polar coordinate form) of Oklab called Oklch.

What this PR does not do

This PR does not internally change how colors are represented, though this may be desirable for a future PR, specifically in the "color variations" bar of the Color Picker UI to ensure constant lightness between hues.

Also, this PR does not add a cylindrical mode representation of CIE LAB (called CIE LCh).

PR Checklist

• Closes: Add CIE LCH, Oklab and Oklch formats to Color Picker #23724 (partially)
• Communication: I've discussed this with core contributors already. If work hasn't been agreed, this work might be rejected
• Tests: Added/updated and all pass
• Localization: All end user facing strings can be localized
• Dev docs: Added/updated
• New binaries: Added on the required places
  • JSON for signing for new binaries
  • WXS for installer for new binaries and localization folder
  • YML for CI pipeline for new test projects
  • YML for signed pipeline
• Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

• The canonical capitalization of Oklab and Oklch as used by Björn Ottosson is inconsistent with CIE Lab and CIE LCh (also styled as CIELAB and CIELCH).

• The CSS color spec for oklab and oklch does not allow commas in the color expression, so if the formats are primarily intended for CSS copy-paste, they should be represented as oklab(L a b) and oklch(L C h) without commas.

• Also, in the CSS spec the CIELAB and CIELCH color functions are simply lab(L a b) and lch(L C h) respectively, without the leading CIE.

• CIE Lab lightness values range from 0 to 100, while Oklab lightness ranges from 0 to 1. In CSS it is more often represented as a percentage with two decimal places, which looks similar to CIE Lab representation. Right now the implementation follows the canonical 0 to 1 representation, but it may be worth updating for consistency.

• Existing configuration files seem to prevent the settings UI and color picker UI from showing the new formats. In testing, I removed my existing configuration files from a regular PowerToys installation in order for the changes to show up. I presume the configuration must be migrated somehow but I don't know how to do this.

• The help text for creating new color formats has become a little more verbose and now doesn't fit into the dialog modal. It may be worth shortening the help text, or otherwise updating the UI in a separate PR.
  

Validation Steps Performed

• Test values and colors can be obtained from oklch.com for testing the color picker UI.
• Added unit tests

[lemonyte]

@microsoft-github-policy-service agree

[Copilot]

Pull Request Overview

This PR enhances the Color Picker utility to support additional color spaces by adding conversions and display formats for CIELCh, Oklab, and Oklch.

• Introduces new enum entries and helper functions for the additional color formats.
• Updates UI properties and configuration parameters to include the new formats and their corresponding localization keys.
• Augments color conversion routines in both the ColorRepresentationHelper and ColorFormatHelper classes.

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/settings-ui/Settings.UI/SettingsXAML/Controls/ColorFormatEditor.xaml.cs	Updated color format parameters with new entries and revised localization keys.
src/settings-ui/Settings.UI.Library/Enumerations/ColorRepresentationType.cs	Added enum entries for CIELCh, Oklab, and Oklch representations with updated comments.
src/settings-ui/Settings.UI.Library/ColorPickerProperties.cs	Included the new color formats in VisibleColorFormats for the Color Picker UI.
src/modules/colorPicker/ColorPickerUI/ViewModels/ColorEditorViewModel.cs	Integrated the new color formats into the ViewModel with appropriate conversion methods.
src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs	Added conversion methods for CIELCh, Oklab, and Oklch with appropriate rounding and string formatting.
src/common/ManagedCommon/ColorFormatHelper.cs	Implemented new conversion methods for the additional color spaces and updated the string representation cases.

Files not reviewed (1)

• src/settings-ui/Settings.UI/Strings/en-us/Resources.resw: Language not supported

Comments suppressed due to low confidence (2)

src/common/ManagedCommon/ColorFormatHelper.cs:612

• [nitpick] The variable name 'chromaOklab' is ambiguous since the conversion is for Oklch; consider renaming it to 'chromaOklch' for clarity.

var (_, chromaOklab, _) = ConvertToOklchColor(color);

src/common/ManagedCommon/ColorFormatHelper.cs:616

• [nitpick] The variable name 'hueOklab' is misleading for an Oklch conversion; consider renaming it to 'hueOklch' to better reflect its purpose.

var (_, _, hueOklab) = ConvertToOklchColor(color);

[Copilot]

Pull Request Overview

This pull request adds support for new color spaces in the Color Picker utility by introducing formats for Oklab, Oklch, and a variant of CIELCh. Key changes include updated UI parameters in the color format editor, new enumeration entries and helper methods to convert colors to the CIELCh, Oklab, and Oklch representations, and updates to the visible color format mappings.

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/settings-ui/Settings.UI/SettingsXAML/Controls/ColorFormatEditor.xaml.cs	Updated color format parameter definitions to include new formats and adjusted ordering for CIELCh, Oklab, and Oklch.
src/settings-ui/Settings.UI.Library/Enumerations/ColorRepresentationType.cs	Added new enum entries for CIELCh, Oklab, and Oklch with corresponding value ranges.
src/settings-ui/Settings.UI.Library/ColorPickerProperties.cs	Extended the visible color format list to include the new formats.
src/modules/colorPicker/ColorPickerUI/ViewModels/ColorEditorViewModel.cs	Added new color format models for CIELCh, Oklab, and Oklch representations.
src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs	Implemented conversion methods for CIELCh, Oklab, and Oklch string representations (rounding values to two decimals).
src/common/ManagedCommon/ColorFormatHelper.cs	Introduced conversion functions for CIELCh, Oklab, and Oklch color models and updated the string formatting switch-case to support the new parameter tokens.

Files not reviewed (1)

• src/settings-ui/Settings.UI/Strings/en-us/Resources.resw: Language not supported

Comments suppressed due to low confidence (2)

src/common/ManagedCommon/ColorFormatHelper.cs:345

• The conversion function for Oklch computes chroma as the square root of (chromaticity_a² + chromaticity_b²), but given the documented range of Oklch chroma is [0..0.5], verify whether the computed value needs to be clamped or scaled accordingly.

private static (double Lightness, double Chroma, double Hue) GetOklchColorFromOklab(double lightness, double chromaticity_a, double chromaticity_b)

src/settings-ui/Settings.UI/SettingsXAML/Controls/ColorFormatEditor.xaml.cs:54

• Ensure that the resource key 'Help_chromaticityACIE' (and similarly 'Help_chromaticityBCIE') used for the new CIELCh parameters matches the intended naming convention in the resource files for clarity and consistency.

new ColorFormatParameter() { Parameter = "%Ca", Description = resourceLoader.GetString("Help_chromaticityACIE") }

[yeelam-gordon]

/azp run

[azure-pipelines]

Azure Pipelines will not run the associated pipelines, because the pull request was updated after the run command was issued. Review the pull request again and issue a new run command.

[yeelam-gordon]

/azp run

[azure-pipelines]

Azure Pipelines will not run the associated pipelines, because the pull request was updated after the run command was issued. Review the pull request again and issue a new run command.

[lemonyte]

I've removed the CIE LCh format from this PR because it would be better added in a separate PR, possibly along with changes to the CIE LAB & CIE XYZ calculation accuracy.

All added tests pass now, so this PR is ready for review and merge.

However, there is still the question of the representation format including commas. I'd appreciate any input on this detail.

The CSS color spec for oklab and oklch does not allow commas in the color expression, so if the formats are primarily intended for CSS copy-paste, they should be represented as oklab(L a b) and oklch(L C h) without commas.

[shuaiyuanxx]

The text in the 'Add custom color format' page is too long to be displayed properly. I'm wondering if the name can be simplified, or if the UI supports tooltips on hover to show the full content?

I think you can add ad tooltip ToolTipService.ToolTip="{x:Bind Description}" in ColorFormatEditor.xaml to solve this problem.

PowerToys/src/settings-ui/Settings.UI/SettingsXAML/Controls/ColorFormatEditor.xaml

Line 35 in 293fa26

TextWrapping="NoWrap" />

[shuaiyuanxx]

The other parts of the code look good to me and have also passed local testing.

[lemonyte]

I think you can add ad tooltip ToolTipService.ToolTip="{x:Bind Description}" in ColorFormatEditor.xaml to solve this problem

Done, thanks!

[shuaiyuanxx]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[shuaiyuanxx]

LGTM

[yeelam-gordon]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).