5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
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

5764 posts
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Elite Author
  • Has been a member for 6-7 years
  • Sold between 100 000 and 250 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • India
+3 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?

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
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.

5764 posts
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Elite Author
  • Has been a member for 6-7 years
  • Sold between 100 000 and 250 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • India
+3 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.

5764 posts
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Elite Author
  • Has been a member for 6-7 years
  • Sold between 100 000 and 250 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • India
+3 more
VF says
This is a HSL picker, which may help:
http://hslpicker.com/#3399ff

The 3rd slider value is your brightness variations.

1864 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 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
5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
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.

5764 posts
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Elite Author
  • Has been a member for 6-7 years
  • Sold between 100 000 and 250 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • India
+3 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
1864 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 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
  • Elite Author
  • Sold between 50 000 and 100 000 dollars
  • Author had a File in an Envato Bundle
  • Exclusive Author
  • United States
  • Has been a member for 6-7 years
  • Bought between 50 and 99 items
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