REQUEST: Ability to adjust page background color for contrast comparison

[edwardsdesign]

I would like to request input/output colors for the SassMe background. I use SassME all of the time for color comparison and it would be really useful to compare new colors against existing project background colors. This would remove the redundancy of 'adjust color, copy to sass, compile sass, adjust color, copy to sass, compile sass, etc...' until the right color combination is found.

A less desirable option would be to switch from a light theme to a dark theme. This would give somewhat of a better comparison when dealing with backgrounds that have darker hues.

SassMe is a daily part of my workflow, Thanks for creating it.

Original: arc90/sass-color-picker

[edwardsdesign]

Jim,
Here is a rough concept of how this might be laid out, features included in mock-ups are:

• 2 color sections with sliders: foreground and background
• light/dark switch in masthead to change page theme
• Default HTML text section showing H1-H3, OL/LI bullets and 16px and 10px text sizes in both Serif and Sans-Serif fonts that change with color sliders.
• Ability to reverse foreground and background colors, shown in right corner of HTML section

Light theme:

Dark theme:

The purpose of the HTML section would be to show how some colors might pair well in some instances but just do not work in others, i.e. small sand colored text on blue background.

Just a thought that I wanted to share.

[jimniels]

Thanks for the mockups, these really help illustrate the desired functionality more than words can. I do have a question: I'm not entirely clear on the purpose of the light/dark theme switcher? Isn't the point of having two inputs, i.e. a background and foreground color, so that you can more easily test light/dark modes?

This is obviously a much more sophisticated UI for color comparison. I'm unsure about replacing what we currently have in favor of this. Perhaps a better solution would be two offer multiple ways of viewing your color comparisons? I don't know what that would be off the bat, but some kind of UI toggle like "compare 1 color" is the default and looks like the current UI and then a link that says like "compare 2 colors" that when you click it, the UI changes to something like what you have above...this would definitely need more thought.

[edwardsdesign]

Isn't the point of having two inputs, i.e. a background and foreground color, so that you can more easily test light/dark modes?

The concept behind having light/dark themes is to allow for a quick simulation of the 2 adjusted/compared colors with a 3rd background color allowing the user to see how the colors vibrancy changes against both extremes without having to keep swapping the 2 input colors.

I'm unsure about replacing what we currently have in favor of this.

No worries, this is only a suggestion. It has been some time since this tool had any activity so I just wanted to show support and start a conversation about how this could possibly grow.

[jimniels]

allow for a quick simulation of the 2 adjusted/compared colors with a 3rd background color allowing the user to see how the colors vibrancy changes against both extremes

Ahh, I see where you're coming from. Ok that makes sense, thank you!

this is only a suggestion

I think this is a good suggestion. I think people might actually find this super useful. I just wonder about how it will fit into the current UI. There's another issue that asks for an enhancement that would require a UI change as well. Perhaps there's a way we could plan a UI to accommodate both of these alternative use cases. Like some kind of "switcher" that let's you choose how you want to adjust colors. Going to leave this issue open for suggestions around this.

Thanks again for the UI mocks, that will help a lot I think if/when we can take this forward.