Background gradient colours are removed when clicking on main colour textbox #98

tomascassidy opened this Issue Jun 1, 2012 · 1 comment


None yet

2 participants


Tested in Google Chrome 19.0.1084.52 m on Windows 7 x64

Steps to reproduce:

  1. Open themeroller (
  2. Close initial "Get Rolling popup"
  3. Click on tab on left sidebar to view options for "Swatch A"
  4. Click "Header/Footer Bar" to expand the header options
  5. Click the [+] next to "Background" slider to show the gradient colour textboxes
  6. Default colours showing should be:
    • Background: #eeeeee
    • Start: #f0f0f0
    • End: #dddddd
  7. Click in the "Background" text box
  8. Colours in the Start and End textboxes are changed to the value in the Background textbox.

This behaviour is confusing (if it's correct behaviour), because people won't assume that clicking in one textbox will modify the values in other text boxes.

tybenz commented Sep 7, 2012

It is confusing. Something need to change about it, but I'm not sure how. Let me explain why we landed on the current behavior.

At first, we had simple start and end boxes, but as we tested we found that, the typical use of a linear gradient is to have one color and use a lighter/darker shade for the different start/end values.

So we tried to dumb down the idea of linear gradients in ThemeRoller's UI. We switched to a single color selector with a slider that allows the user to change how drastic the light-to-dark/dark-to-light transitions are. What the slider actually does is this: we take the color the user gave us and we increase the brightness of the start color and decrease the brightness of the end color. If the slider is to the left of the midway point, this behavior is reversed.

Then we were left with the edge case of users wanting to dial in start/end values perfectly. So we compromised. We put our single-color-with-slider front and center and left the start/end dropdown as a back up.

The workflow in my head looks like this:

  1. The user dials in a color to base their gradient off of.
  2. They use the slider to find a decent lightness-to-darkness ratio
  3. If they want to fine-tune the start or end color the click the "+" and edit them accordingly

The start and end colors do change while changing the base color so that when the user goes to fine-tune the resulting gradient, they can tweak the actual start/end color.

The reason the start/end boxes match the base color box exactly on the user's first go is because the slider is defaulted to the middle position (flat gradient).

That was a long and winded, (and probably uneccessarily detailed) explanation of why it behaves this way.

I want to be clear, I'm not saying it's not confusing. I'm just writing down all the details so we might discuss how else to solve the problem. Thoughts anyone? @toddparker?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment