Skip to content

Feathers oklch color widgets #24118

@viridia

Description

@viridia

What problem does this solve or what need does it fill?

The feathers color widgets (color slider and color plane) currently support sRGB and HSL color spaces. Given the emphasis that we have put on supporting oklab and oklch color spaces, it would be nice if we had support for editing these color spaces as well.

Unfortunately, this is not easy to do. Unlike rgb or hsl spaces where the widget can display a simple color gradient, we have to deal with out-of-gamut colors: not all points within the gradient are valid oklch colors. You can see an example here: https://oklch.com/

What solution would you like?

First, we'll need to decide what we want the out-of-gamut regions to look like.

For the color plane, the gradient uses a custom shader and has access to @ickshonpe 's general color conversion functions, so it probably would not be too difficult to render the out-of-gamut parts of the plan differently, possibly using a checkerboard texture.

The slider widget, on the other hand, uses Bevy's built-in gradient support, so this would require a complex gradient with the out-of-gamut areas being rendered transparent. Alternatively, we could reimplement the color slider to use a custom material similar to what the color plane does.

Alternatively, we could implement special widgets that only know about oklch colors, and then dynamically switch widgets when the user switches to a different color space.

What alternative(s) have you considered?

  • Not supporting ok color spaces
  • Not doing anything special with out-of-gamut colors and then just clamping them during editing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-ColorColor spaces and color mathA-UIGraphical user interfaces, styles, layouts, and widgetsC-FeatureA new feature, making something new possibleD-Domain-ExpertRequires deep knowledge in a given domainD-ModestA "normal" level of difficulty; suitable for simple features or challenging fixesS-Needs-DesignThis issue requires design work to think about how it would best be accomplished

    Type

    No type

    Projects

    Status

    Needs SME Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions