- I use it
- I never use it
- I use it sometimes
0
voters
Hello everyone,
I’d be grateful to have your feedback on your use of the scheme picker that is currently included in the Cwicly Colour Picker.
Thanks in advance!
Cheers,
I like the concept of it but because the user has no explicit control over the output, it is hard to put it to good use in any website that has a pre-agreed design.
We would really appreciate something along these lines for colour variations, which we will be able to use in every project and would reduce the number of manually added global colours:
2 Likes
Hi,
I totally agree here, we really need a fully manageable color system where we can dynamically define CSS variables for shades, transparencies, saturations, etc, from base colors.
Currently I just don’t even use global colors and color picker at all, since I can’t even get global colors values in SCSS to create variations.
(Maybe there’s some way, though, I’m not an expert in pre-processors…)
Thanks, @yankiara and @StrangeTech.
We are currently assessing the different needs around a colour system in Cwicly, hence this first check. Your posts/requests are greatly appreciated.
Cheers,
2 Likes
@Louis The main thing I would be interested in is the ability to add or import color variables from an external source, similar to how you can pull in external classes. I usually use my own color variables, or the ones from a framework like ACSS, so it would be nice to be able to pull those into the color system so you can easily pick colors with the built in color picker.
As far as the current color system goes, if we can’t pull in external color variables, it would be nice to be able to rename the color variables that Cwicly outputs, so they’re easier to reference/remember in the global stylesheets.
1 Like
Hello @msguerra74,
Thanks for bringing this up.
It is planned to introduce an easy way to add colour variables through a filter, just as we have implemented it for classes: Filters - Documentation
Cheers,
3 Likes
That’d be great, thanks
I select my colors before I use the color picker. Sometimes I use the color picker to quickly test blocks, but I haven’t used the scheme picker due to lack of need.
If the color system was more flexible and there were fluid spacing options, you almost wouldn’t need a framework. I think the integrated Tailwind looks like it’ll be neat, but I’m not sure if they have fluid type and spacing, which would be a bummer since it makes responsiveness so much easier and more “FLUID”. Haha
1 Like
I don’t use scheme picker because color values are not variables.
It would be good to integrate the ability to choose a color for the light and dark theme of the website.
I find this website interesting, which has the possibility of a quick visual display of how color looks on the page.
The advanced themer plugin for Bricks has something similar, where it is possible to try different colors.
2 Likes
Thanks for this link, very handy 
Much has already been said, but I also don’t use the themer mainly because the values aren’t as variables. Instead of the themer, perhaps there could be variations of selected colors (shades and transparencies) that we could choose from, and then selected would be inserted as variable. Also would be great if we could rename the color variables and define more than one color scheme.
I agree, a more robust variable-based color system would be ideal. Having shades and transparencies would be cool too, as long as we can toggle them on or off, and/or set how many of each we want. I usually go with a color, then add 5 shades (lighter, light, mid, dark, darker) and don’t use transparencies very much, but they’re handy on occasion.
I usually create my colors in SCSS and separate the values into individual HSL variables so I’ll have the hue, saturation, and lightness of a color in variable form, which allows me to build any color variation I need. For example, SCSS automates everything and works perfectly in Cwicly:
// SCSS Color Values
// Define your colors once here
$example-color: hsl(359deg 80% 63%);
:root {
// This automates things so you don't have to define the colors more than once andgets converted to CSS as:
// --example-color-h: 359deg; // Hue
// --example-color-s: 80%; // Saturation
// --example-color-l: 63%; // Lightness
--example-color-h: #{hue($example-color)};
--example-color-s: #{saturation($example-color)};
--example-color-l: #{lightness($example-color)};
// Then build your colors using the HSL format, which is easier to read and understand than HEX
// More info on the HSL format: https://www.smashingmagazine.com/2021/07/hsl-colors-css/
--example-color: hsl(var(--example-color-h) var(--example-color-s) var(--example-color-l)); // Full Example Color
// Custom variations
--example-color-lighter: hsl(var(--example-color-h) var(--example-color-s) 95%); // Lighter Variation
--example-color-90: hsl(var(--example-color-h) var(--example-color-s) var(--example-color-l) / .9); // 90% Transparent Variation
// Add as many variations as you need, or setup a predefined set that gets generated automatically, etc...
}
3 Likes
I never used this, or the color picker for that matter. I would use it if I was able to either paste a CSS variable in the field, or have global colors (with the option to set using variables) that would appear as options in the color picker.
However, I think most users here are advanced users that either use their own system or some kind of framework. So I guess maybe we are not the example of your intended or entire user base. I like what you showed in the sneak-peak though. 
I’ve been having issues with External Classes vanishing randomly when I refresh the block editor, so I used the Filters method and so far it’s worked perfectly. Thanks for adding that option!
I’m also using my own CSS styles via the global stylesheets, and was wondering if there will ever be an option where it can parse the classes directly from that for use as an “external class” in the class picker? This would be even better so I wouldn’t have to maintain a separate list of classes.