Fifty Shades Of <color>
Hi !
As you know, there is a new mainstream trend, about the book/movie "Fifty shades of Grey".
I've seen a lot of artworks & web experiment about it, especially one from Chris Eppstein where he created a SASS mixin to display .. fifty shades of gray. ( Here is it ).
And I thought it would be cool to have a tool that could display literarily fifty shades of any colors.
So, I decided to give a try, and I created my own jQuery fiftyShadesOf($color) function.
Then, I wanted to create that tool. I had some free time to work on it And here is it!
So basically, you can enter any 6 digit hexadecimal colors in it, and you will have a preview of the 50 different shades of the color.
For now, it only do a shades panel from the given color to white.
But I plan to add few more controls to it in the future.
In terms of functionality:
- You can get an instant preview of the color by changing the hexadecimal color in the page, but you can also add the color directly at the end of the URL, so it will be faster for you to get the different shades by only typing the url.
- When you click a shade, it will expand to full page to help you to have a better idea of the color you will use.
- Double click the 2 given color values ( hexa / rgb ) and you'll be able to copy them ( using a good ol' prompt to avoid Flash or huge copy/pasting script that involves flash, like ZeroClipboard ) .
Well, I think this is it! I'd really appreciate some feedbacks about it, or any ideas would be welcome :)
Don't forget to check the attached files to have a better view of the project!
Live version : http://lukyvj.github.io/fifty-shades-of/
Github project : https://github.com/LukyVj/fifty-shades-of
EDIT :
I attached a GIF that shows how it works!