5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Is there a way to find, out what the fade colors are for pre determined steps.

To explain. I have 5 stars.

I want the full color star to be #3399ff for example. ( call this star 5 )

star 4 to be 10% lighter than star 5 star 3 to be 10% lighter than star 4

I am not looking for a css trick, but moreover a method to determine color values.

Obviously I dont want to change opacity, but physically change the css for the “dilluted” color. If you know a method to generate fade color values from lightest to darkest even this may be great.

Cheers

6026 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

We need to be familiar with hex number system to manually find the in-between steps. Also it is somewhat possible only if the color belongs to a round number. For example, it is easy to find next step for 8888ff than complex numbers like 5cadef.

However, if your main concern is to calculate next step through script, that’s not a problem; I guess that is not something you asked for, right?

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

you know, I am not sure I wonder if it could be done using rgb. A plugin, could help. But just didnt know if anything was available.

Like, grays f9d9d9 f8f8f8 etc etc

I just wondered if anyone knew a mathematical ( jquery or other ) way of physically generating a set sequence of colors derived from a base ref, that could be applied to lost of other values.

6026 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

^ So your input needs to be taken as hue reference of color wheel and generate the variations of brightness (with pre defined % of steps). Then you might need to search for javascript/jQuery color pickers with some extended options. Hope you can either get a sophisticated picker or custom script from stackoverflow.com answers.

6026 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says
This is a HSL picker, which may help:
http://hslpicker.com/#3399ff

The 3rd slider value is your brightness variations.

1876 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

Mathematically:

Let’s darken FF9900 by 10%. Color hex numbers are in pairs XX-YY-ZZ etc

FF in hex = 255 in decimal = Red value

99 in hex = 153 in decimal = Green value

00 in hex = 0 in decimal = Blue value

Now you just substract 10% which is 255 * 0.1 = 25.5, which rounds to 25.

255 – 25 = 230 …which converts to hex as E6

153 – 25 = 128 …which converts to hex as 80

0 – 25 = 0 (can’t go below zero, 00 = black, FF = white) ...which converts to hex as 00

So the final darkened value is E68000

Technically, you are looking for a hex to decimal and vice versa converter code which you should be able to mod to do darken and lighten calculations based on the math above.

Online conversion:

http://www.binaryhexconverter.com/hex-to-decimal-converter


http://www.binaryhexconverter.com/decimal-to-hex-converter
5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

@freshface, spot on. Thats exactly what I was looking to do. Okies, I will have a play and report back. Thanks

@vf, thanks. But I was looking for a more mathematical, and scaleable solution.

6026 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

@freshface, spot on. Thats exactly what I was looking to do. Okies, I will have a play and report back. Thanks @vf, thanks. But I was looking for a more mathematical, and scaleable solution.

freshface’s example will work only for the color range that falls exactly 100% saturation. To cover all other ranges (less than 100% like ffcc80), you may need to convert first RGB into HSL and control the L values only. It requires much more steps / conversions (and theoretical explanation), thats why I simply pointed the link, it has script source link on bottom.

https://github.com/imathis/hsl-color-picker/#whats-so-great-about-hsl
1876 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

I made a mistake in the last calculation, you need to substract 10% of the actual value, not from the 255 range. So instead of 128, it’s 138 on the second value.

Now you just substract 10%:

255 – 10% = 230 …which converts to hex as E6

153 – 10% = 138 …which converts to hex as 8A

0 – 25 = 0 (can’t go below zero, 00 = black, FF = white) ...which converts to hex as 00

So the final darkened value is E68A00

And VF is right, it’s just more work though – but you will get really accurate colors unlike with my method.

33 posts
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Had an item featured in an Envato Bundle
+4 more
Tricycle says

Not sure if it’s what you’re after but this could be easily achieved with Less(or Sass) functions – http://lesscss.org/#reference

Something like this:

.class-1{ color: lighten(yellow,10%); }

.class-2{ color: yellow; }

.class-3{ color: darken(yellow,10%); }

by
by
by
by
by
by