Expanding Stylix Color Schemes

[W-Y-R]

Context

While Stylix offers a powerful way to generate color schemes from wallpapers, its customization options are somewhat limited. Currently, we can only control palette polarity.

Proposed Refinements

• Saturation Control: Provide intuitive options for saturation:

  • "Muted"
  • "Vibrant"
  • "Bold" ‎

    Note: A percentage could also be used (e.g. 0 would mean monochrome)

• Color Focus: Allow users to guide the algorithm with these options:

  • "Warm Focus" (emphasizes reds, oranges, yellows)
  • "Cool Focus" (emphasizes blues, greens, purples)
  • "Specific Color Focus" (e.g., "Focus: Teal" would generate a palette with teal as a prominent hue)

• Contrast Ratio: Implement controls for the generated palette:

  • "High Contrast"
  • "Medium Contrast"
  • "Low Contrast" ‎

    Note: This may be a bit vague, but it's meant as a contrast checker so the colors could be seen properly

Example Configuration

colorScheme = {
  generateFromWallpaper = true; # since we want to generate a color scheme (meant for https://github.com/danth/stylix/issues/200)
  saturation = "Vibrant";
  colorFocus = "Cool Focus";
  contrast = "Medium Contrast"; 
};

[CRTified]

So, the general "problem" of the palette generation is that it's mostly limited to colors that appear within the picture. To me, the solution would be a way of sampling related-but-not-present-in-picture colors.

For this, I've experimented with triadic and tetradic color palettes as a type of "extended palette" before, but wasn't able to get report-worthy results there (Besides https://github.com/danth/stylix/commit/c354350b9a81519a725366bd8d3f844a05e7ab0b which is a mistake I spotted due to these experiments).

My approach was to pick the base colors (0 to 7) as before, but selecting the accent colors as e.g., the two groups 8 to B and C to F, assigning them in a tetradic scheme. It increased the contrast significantly, but I wasn't happy with the results and discarded it.

Another thing I experimented with was post-processing the colors by setting the brightness as expected by the fitness function. This made everything brighter, but it also clashed heavily with the wallpapers I've tried.

I'd love to see some more variety in the color generation, but I generally expect it to be hard to formalize well in the way that you hope. But I don't want to discourage anyone, I'm not well-versed with color theory at all.

[W-Y-R]

You raise an excellent point! Since base16 is inherently tied to RGB color representation, I assume your algorithm utilizes the same format. Let's try converting the algorithm's output to the HSV format for greater flexibility in color manipulation.

Example:

• Original Color: #3482ff (a shade of blue)
• HSV Conversion:
  • Hue (H): 217°
  • Saturation (S): 79%
  • Value (V): 100%

To transform this blue into a shade of red while preserving saturation and value, we can adjust the hue. Let's define red as the range of 0° to 15° on the HSV color wheel.

1. Store the current hue (217°) in a variable 'x'.
2. Iteratively subtract half of 'x' from itself while 'x' remains greater than 15°. This will shift the hue towards the red range.
3. In this example, the new hue becomes 14°.

Lastly, convert the modified HSV values back to RGB (#ff6333). Naturally, the hue adjustments can be tailored for precision.

Similarly, the concept of a "Vibrant" mode aligns well with HSV. We could increase the saturation from 79% to a higher value like 85% to achieve the desired vibrancy. Same with “Muted” and “Bold”.

By working in HSV, we may find the contrast option less essential as HSV provides more direct control over color properties.

[CRTified]

I just noticed that I've pushed one of my attempts, it can be found here. Feel free to hack on it, it used the Lab color space instead of RGB.