It'd be useful to be able to provide an input and output color

[ferdis]

@AaronHolbrook commented on Oct 4, 2012

In order to have the formula for how to get from one color to another (which is useful in templating).

Is this possible?

Original: arc90/sass-color-picker#3

[jimniels]

For reference: this comment on the arc90/sass-color-picker thread seems like an apt use-case description.

If you give an input and an output color, I don't think the Sass HSL Color functions can give you the exact color, but they can probably get you close ... that would take some playing around with. As for the UI, it would require changing the current UI as the sliders would no longer be needed. It would probably be an experience more like this:

1. Give me your input, i.e. "#12345"
2. Now give me your output, i.e. "#45678"
3. Here's the best approximation Sass' HSL color functions will get you: "lighten(#12345, 14%) = #45688"

Implementing something like this would require a significant change in the existing UI and functionality of the application. I think to build something like this, we would need some kind of "mode" switcher in the UI where you could choose something like:

• Provide input, get output & sass funcs
• Provide input & output, get sass funcs

Switching between these 2 "modes" would give you the UI you need. Is this making sense?

[ferdis]

While I completely agree with the UI part, I'm not so certain it requires a lot of work on the application logic.

This is more along the lines of what I was thinking:

Input:
#123456 / hsl(210, 65%, 20%) to #456789 / hsl(210, 33%, 40%)

Calc:
hue = 210 - 210, 0 (no hue change)
de/saturate = 65 - 33 = 22 
light/darken = 20 - 40 = -20

Output:
saturate(darken(#123456, 20%), 22%)

The above is just a primitive example, but essentially by converting to and from HSL you can pretty much have the exact values you need to pop into the various functions.

[jimniels]

Yup, you're right. The math/logic for determining the Sass function output is basically exactly what you typed above and that logic is already in the code. The challenge is more figuring out how to accommodate this in the UI, i.e. these two use cases:

1. Provide input, provide Sass function(s), get output
2. Provide input, provide output, get Sass function(s)

It's probably worth taking a look at the request in issue 3 and figuring out how we might accommodate something like this too. Perhaps there's a way we could build a "switcher" to switch between these "modes" (and any future modes that may be asked for.