Try generating random color palettes #40988
Conversation
|
Size Change: +2.86 kB (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
priethor
added
[Type] Feature
|
Neat to see progress with something fun like this color randomizer. Is there a specific reason to be located within the ellipsis colors/palette/theme or are we just testing the mechanics? |
Just testing. What I have in mind for a definitive UI would be a popover which should allow the user to undo the random palette change, choose start/end colors, and anything else that we might make configurable. I'm not sure yet what the best place for this popover would be; I'd appreciate any suggestions! |
|
There's a neat example in the Substack editor that simply has a random button/icon that switches styles, without the need to add extra complexity to the interaction. We'd need to define what parameters get changed, the logic behind it. But ideally not a popover or modal. The placement of the icon could be at the bottom of the GS panel, or right above the preview card. It also depends how we evolve the Change Styles flow. |
vcanales
force-pushed
the
try/color-palette-randomizer
branch
from
a2ea1e6
to
54f9725
Compare
Thanks for pointing me to Substack, I think I agree that we'll want to keep this simple. I've moved the button to the root screen for Global Styles, although it doesn't look quite right for me yet:
Perhaps something like this, with a button inside the preview, might also make sense:
Let me know what you think! |
|
Nice! It could be wise to consider this new UI (randomizer) alongside the Styles switcher I believe @critterverse was working on. #35619 And something @richtabor has been mulling on too. #38918 |
|
It could make sense to find or define an icon for the randomizer to be still understandable but also less prominent. Even at the bottom of GS root? |
vcanales
force-pushed
the
try/color-palette-randomizer
branch
from
4a98dd4
to
cc5ed9f
Compare
|
This is a really neat idea and great way to incorporate fun for users. 🌈 👏 I've spent the last few weeks working with style variations with WordPress 6.0. So, I thought I would test this PR with a custom theme with several style variations. All of my results from randomizing a variety of style variations provided very low contrast between I suspect there may be a few issues at play here:
With all that said. I do not have any understanding around what the Cubehelix library is doing (besides generating random color values based on lightness/darkness seeds and baseline), and it may be a matter of just dialing in the Lightness/Darkness values? Or, even the These: Here is a video of me attempting to generate random palette based on my high-contrast style variation. site-editing-color-randomizer-testing.mp4For now, I would prefer to see more exploration around randomizing style variations. I do like the location of the Randomize button, but would prefer it nested underneath style variations screen and when the user clicks it a random style variation is chosen, as opposed to a color palette. However, the usage and implementation of style variations has yet to be explored in WP.org repo, and I suspect that it'll gain traction in the coming weeks with more and more themes having variations within. 🤔 |
|
A few thoughts to clarify:
The resulting color schemes would not be as dramatic as what we see currently in the PR, but this would likely solve the contrast issues with the non-standardized color values. Something like the palettes below, where the contrast ratio between existing color palette values is maintained across the design:
|
+1 exciting to see this idea moving forward!
Agree that the bottom of the panel probably makes the most sense for this button — I can see it working as a fixed position element anchored to the bottom of the Global Styles panel:
|
Created #41574 regarding this, which implements one of the alternatives shown in Global Styles panel: iterating on the "Browse styles" button #40478 |
vcanales
changed the title
Typography, yes. For the rest of styles we might need to have a discussion about safe random values/ranges in order to implement them, but it's certainly possible to randomize them.
By maintaining it, do you mean figuring out what the lightness is for the current color, and then applying that to the new one? This experiment proposes applying a lightness value between 0.01 and 0.3 on the black end of the spectrum, and 0.8 and 0.99 on the white end, which in theory means that there's a discernible gap between both ends, ensuring contrast to an extent. |
I mean if one color is "light" then that same level of lightness is applied to its randomized value. The same for the darkness of a color. Like in the palettes below, each line could be the resulting palette of the randomization - where each color maintains its value (lightness/darkness) from the origin. Row two and three represents a randomized color palette of one: |
|
Just dropping some links that might inspire the effort:
|
vcanales
force-pushed
the
try/color-palette-randomizer
branch
from
85042fa
to
6d4870a
Compare
I moved the button to the bottom in the latest commit
Could you share the shuffle icon shown on your example? I would love to add it to our Icons collection. Now, I'm still using the replaceable block icon as a placeholder. |
I'm working on incorporating this. The problem I'm trying to deal with right now is that if #000 or #fff are being used, since lightness and darkness are 1 and 0 respectively, they will continue being absolute black and white. I think we'd still have to randomize lightness to some extent, although keeping it within a safe range. |
vcanales
force-pushed
the
try/color-palette-randomizer
branch
2 times, most recently
from
43e0afb
to
71a7565
Compare
vcanales
force-pushed
the
try/color-palette-randomizer
branch
from
71a7565
to
bbdc82a
Compare
Updated screenshot
|
scruffian
force-pushed
the
try/color-palette-randomizer
branch
from
a00190d
to
eaf6dc5
Compare
|
I think we should bring this in as it's under and experiment, and then we can iterate once we get feedback. |
|
For the FSE Outreach Program's sake, is this in the Gutenberg > Experiments tab? Asking as I can likely sneak this into the current exploration :) |
Indeed! Under "Color randomizer" in the Experimental settings.
|
|
Officially in the current call for testing :) https://make.wordpress.org/test/2022/11/13/fse-program-exploration-site-editor-sneak-peek/ Thank you! |
To be honest, I feel the same. Yes, it's a fun, but from a theme designer's perspective I don't see an urgent use since the theme designer can provide numerous style variations. For the user this provides the same kind of 'fun feel', but theme designers would provide an experience that actually works. There is so much potential in styles, but not much is published yet. So as a theme builder I feel style export/imports, the option to separate font styles from color styles are much more basic features I would love to have first. |
I agree with @ellenbauer and @aristath. It's a nice, fun idea. But anyone using a theme will probably rely on the theme's style variations. And that will probably feel like a randomizer to them already. At least, that's how I personally view style variations. I'd much rather focus on basic features first too, rather than fun ones. Let plugin and theme developers build the fun. :) |
|
I've been thinking about the idea of randomizing elements in the site editor. Are there explorations to offer pattern randomizing to create page templates? I think this would be very powerful imo, especially as patterns can be presorted by categories. Also, I think if theme authors could offer presets for their color palette values, I think the randomize color palette idea could also work better. So it's not completely random, but more like a mix/match approach to preset colors provided by the theme builder. |
|
This exploration aims at something along those lines: #45618 |
This generator takes the initial colors and moves them around in a color wheel, so the palettes generated are always somewhat related to the starting palette. Automagically generating derivative palettes for theme creators is the next thing I'll try. |
I think this approach most likely works great for small color palettes. As we are working with more complex color palettes for our themes, I feel it would work smoother if the theme author could provide a set of colors for each slug. Something like 10 variations of primary-button colors, primary background colors, text colors and so on. This could be an easy solution to guarantee that all randomized outcome actually works and something like a dark button text color on a dark button background color can be avoided. Maybe the slug in theme.json can just by default hold multiple values and the author can optionally set one value as the default and provide addition values right in the color if they want to control the outcome in their themes? E.g.:
But maybe I'm too much of a control freak here 😆 and it actually just works nicely if the colors are related to the original and are in a similar range of contrast. |
|
One thing I like about this tool is the element of surprise. Of course sometimes not all variations will work and look good, but not being able to predict what the outcome will be makes it very interesting! |
This experiment shows a method in which random color palettes may be
generated by utilizing hue rotations. For demonstration purposes, I've
used the Cubehelix color scheme utilities within chroma-js, which allow easy access to hue rotation functionality.
Hue rotation consists in rotating the hue wheel — such as the one you
might see in a color picker — by a determined amount of degrees, each turn
generating a new color.
This experiment highlights the need for themes to explicitly support
style randomization, as well as the need to incorporate a way to define
a color's role within a palette as a way of avoiding getting, for
example, palettes where background and foreground don't contrast,
rendering text illegible.
Demo
Next things to try in this PR