0

I need to implement Theming on a website (made in ASP.net MVC).

The idea is that the user picks one color (the base color), and from it I have to generate:

  • hover state color (40% lighter)
  • pressed state color (20% lighter)
  • darker color (20% darker)

I tried to make the implementation, but I realize that this is not working properly.

If user puts a lighter color, then the hover state would become almost invisible.

Searching the internet I found this link which seems to be what I'm looking for, but I couldn't find a real example.

Are there any projects or examples that do what I am trying to achieve?

Community
  • 1
  • 1
Catalin
  • 11,503
  • 19
  • 74
  • 147

3 Answers3

2

You can do this on the client side with JavaScript.

Suggested method:

  1. Pick base color using RGB values.
  2. Convert RGB to HSL
  3. increase and decrease HSL lightness
  4. Convert HSL back to RGB
  5. Convert RGB to CSS compatible hex and use in your theme.

To do your HSL / RGB conversion, you can use this:

http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

And here is an example you can modify to convert your RGB values to hex

How to convert decimal to hex in JavaScript?

Here is W3Schools page on colors too. Maybe not directly related to your question but may still be useful

http://www.w3schools.com/cssref/css_colors.asp

Community
  • 1
  • 1
Matthew Layton
  • 39,871
  • 52
  • 185
  • 313
1

The trick is to not let the user select a random color out of the full RGB space. Instead let them only select a base color through the hue and set saturation and brightness on yourself. The Color class itself already has methods to retrieve this values, but lacks the support to create a color from these values. This can be achieved by this answer.

With this approach you simply let the user only select the base color and so you ensure that lighter and darker colors are possible. The impressive way on how to do this can be seen within the Color Scheme Designer (which you maybe already know). Their you can also only select the hue in the first step.

Community
  • 1
  • 1
Oliver
  • 43,366
  • 8
  • 94
  • 151
0

Although below examples are working, you need to have some knowledge about color's math in order it working properly (if color is too bright, too dark, what is hue and others).

I found another way of doing this, and is exactly what i needed. Here is the link.

It mixes the base color with a white color with 50% opacity to make the color lighter.

Community
  • 1
  • 1
Catalin
  • 11,503
  • 19
  • 74
  • 147